babylon.quarks-editor 0.28.0 → 0.29.0

package/dist/react/modules.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
 import { Mesh } from '@babylonjs/core/Meshes/mesh.js';
 import { PlusIcon, XMarkIcon } from '@heroicons/react/24/solid';
-import { AxisAngleGenerator, BoxEmitFrom, ColorOverLife, ColorRange, ConstantColor, ConstantValue, EulerGenerator, Gradient, IntervalValue, RandomColor, RandomColorBetweenGradient, RandomQuatGenerator, RenderMode, SizeOverLife, Vector2, Vector3, Vector3Function, Vector4, normalizeTextureUV, } from 'babylon.quarks';
+import { AxisAngleGenerator, BoxEmitFrom, ColorOverLife, ColorRange, ConeEmitFrom, ConstantColor, ConstantValue, EulerGenerator, Gradient, GridSampling, IntervalValue, RandomColor, RandomColorBetweenGradient, RandomQuatGenerator, RenderMode, SizeOverLife, Vector2, Vector3, Vector3Function, Vector4, normalizeTextureUV, } from 'babylon.quarks';
 import React, { useMemo } from 'react';
 import { DEFAULT_GRADIENT_STOPS, buildGradient, findBehavior, hexToRgb, readGradientStops, rgbToHex, } from '../core/colors.js';
 import { applyRendererMaterial, getMaterialLabel } from '../core/material.js';
 import { DEFAULT_SHAPE_PARAMS, SHAPE_PARAM_KEYS, SHAPE_TYPES, createShape, getShapeType, readShapeParams, } from '../core/shapes.js';
-import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values.js';
-import { CurveEditor } from './CurveEditor.js';
+import { buildCurve, buildScalar, readScalar } from '../core/values.js';
+import { AxesCurveField } from './AxesCurveField.js';
 import { GradientEditor } from './GradientEditor.js';
 import { InspectorInfoIcon } from './InspectorInfoIcon.js';
 import { ModuleSection } from './ModuleSection.js';
@@ -60,6 +60,7 @@ const PARAM_LABELS = {
     column: 'Columns',
     row: 'Rows',
     depth: 'Depth',
+    length: 'Length',
     speed: 'Speed (lengths/s)',
 };
 /** Uppercase group title inside a module, as the Renderer's "Material" heading. */
@@ -143,14 +144,19 @@ export function MainModule({ binding }) {
         : startColor instanceof Gradient
             ? 'gradient'
             : colorMode;
-    return (_jsxs(ModuleSection, { title: "Main", children: [_jsx(Row, { label: "Duration", children: _jsx(NumberField, { value: system.duration, min: 0.05, onChange: (v) => binding.apply((s) => (s.duration = v)) }) }), _jsx(Row, { label: "Looping", children: _jsx(CheckboxField, { value: system.looping, onChange: (v) => binding.apply((s) => (s.looping = v)) }) }), _jsx(Row, { label: "World space", children: _jsx(CheckboxField, { value: system.worldSpace, onChange: (v) => binding.apply((s) => (s.worldSpace = v)) }) }), system.worldSpace && (_jsx(Row, { label: "Scaling mode", children: _jsx(SelectField, { value: system.scalingMode, options: [
-                        { value: 'shape', label: 'Shape (sizes and shape only)' },
-                        { value: 'hierarchy', label: 'Hierarchy (motion scales too)' },
-                    ], onChange: (mode) => binding.apply((s) => (s.scalingMode = mode)) }) })), _jsx(Row, { label: "Prewarm", children: _jsx(CheckboxField, { value: system.prewarm, onChange: (v) => binding.apply((s) => (s.prewarm = v)) }) }), system.prewarm && (_jsx(Row, { label: "Warm-up time", children: _jsx(NumberField, { value: system.prewarmTime, step: 0.1, min: 0, onChange: (v) => binding.apply((s) => (s.prewarmTime = Math.max(0, v))) }) })), _jsx(Row, { label: "Playback speed", children: _jsx(NumberField, { value: system.playbackSpeed, step: 0.1, min: 0, onChange: (v) => binding.apply((s) => (s.playbackSpeed = Math.max(0, v))) }) }), _jsxs(Row, { label: "Fixed seed", children: [_jsx(CheckboxField, { value: system.seed !== undefined, onChange: (v) => binding.apply((s) => (s.seed = v ? (s.seed ?? 1) : undefined)) }), system.seed !== undefined && (_jsx(NumberField, { value: system.seed, step: 1, min: 0, onChange: (v) => binding.apply((s) => (s.seed = Math.max(0, Math.floor(v)))) }))] }), _jsx(Row, { label: "Off screen", children: _jsx(SelectField, { value: system.cullingMode, options: [
+    return (_jsxs(ModuleSection, { title: "Main", children: [_jsx(Row, { label: "Duration", children: _jsx(NumberField, { value: system.duration, min: 0.05, onChange: (v) => binding.apply((s) => (s.duration = v)) }) }), _jsx(Row, { label: "Looping", children: _jsx(CheckboxField, { value: system.looping, onChange: (v) => binding.apply((s) => (s.looping = v)) }) }), _jsx(Row, { label: "World space", children: _jsx(CheckboxField, { value: system.worldSpace, onChange: (v) => binding.apply((s) => (s.worldSpace = v)) }) }), _jsx(Row, { label: "Scaling mode", children: _jsx(SelectField, { value: system.scalingMode, options: [
+                        { value: 'local', label: 'Local (own scale only)' },
+                        { value: 'hierarchy', label: 'Hierarchy (parents too)' },
+                        { value: 'shape', label: 'Shape (shape only)' },
+                    ], onChange: (mode) => binding.apply((s) => (s.scalingMode = mode)) }) }), _jsx(Row, { label: "Prewarm", children: _jsx(CheckboxField, { value: system.prewarm, onChange: (v) => binding.apply((s) => (s.prewarm = v)) }) }), system.prewarm && (_jsx(Row, { label: "Warm-up time", children: _jsx(NumberField, { value: system.prewarmTime, step: 0.1, min: 0, onChange: (v) => binding.apply((s) => (s.prewarmTime = Math.max(0, v))) }) })), _jsx(Row, { label: "Playback speed", children: _jsx(NumberField, { value: system.playbackSpeed, step: 0.1, min: 0, onChange: (v) => binding.apply((s) => (s.playbackSpeed = Math.max(0, v))) }) }), _jsxs(Row, { label: "Fixed seed", children: [_jsx(CheckboxField, { value: system.seed !== undefined, onChange: (v) => binding.apply((s) => (s.seed = v ? (s.seed ?? 1) : undefined)) }), system.seed !== undefined && (_jsx(NumberField, { value: system.seed, step: 1, min: 0, onChange: (v) => binding.apply((s) => (s.seed = Math.max(0, Math.floor(v)))) }))] }), _jsx(Row, { label: "Off screen", children: _jsx(SelectField, { value: system.cullingMode, options: [
                         { value: 'always', label: 'Always simulate' },
                         { value: 'pause', label: 'Pause' },
                         { value: 'pauseAndCatchUp', label: 'Pause and catch up' },
-                    ], onChange: (mode) => binding.apply((s) => (s.cullingMode = mode)) }) }), _jsx(ValueField, { label: "Start delay", generator: system.startDelay, min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => {
+                    ], onChange: (mode) => binding.apply((s) => (s.cullingMode = mode)) }) }), _jsx(Row, { label: "Stop action", hint: "What the system does once it has finished, as Unity's Stop Action. The editor saves it but does not apply it, so previews replay.", children: _jsx(SelectField, { value: system.stopAction, options: [
+                        { value: 'none', label: 'None' },
+                        { value: 'disable', label: 'Disable' },
+                        { value: 'destroy', label: 'Destroy' },
+                    ], onChange: (v) => binding.apply((s) => (s.stopAction = v)) }) }), _jsx(ValueField, { label: "Start delay", generator: system.startDelay, min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => {
                     s.startDelay = g;
                     s.restart();
                 }) }), _jsx(ValueField, { label: "Start lifetime", generator: system.startLife, min: 0.01, curveMax: 10, onChange: (g) => binding.apply((s) => (s.startLife = g)) }), _jsx(ValueField, { label: "Start speed", generator: system.startSpeed, min: 0, curveMax: 20, onChange: (g) => binding.apply((s) => (s.startSpeed = g)) }), _jsx(Row, { label: "Start size", children: _jsx(SelectField, { value: startSize3D ? '3d' : 'uniform', options: [
@@ -266,7 +272,10 @@ export function ShapeModule({ binding }) {
     const scene = system.emitter.getScene();
     // 'vfxBatch' is the renderer's own internal instancing mesh — never a valid emission source.
     const meshOptions = scene.meshes.filter((m) => m instanceof Mesh && m.name !== 'vfxBatch' && m.getTotalVertices() > 0);
-    return (_jsxs(ModuleSection, { title: "Shape", children: [_jsx(Row, { label: "Shape", hintKey: "shape.type", children: _jsx(SelectField, { value: type, options: SHAPE_TYPES, onChange: (next) => binding.apply((s) => (s.emitterShape = createShape(next, params))) }) }), keys.map((key) => (_jsx(Row, { label: PARAM_LABELS[key], children: _jsx(NumberField, { value: params[key], min: 0, onChange: (v) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, [key]: v }))) }) }, key))), type === 'mesh_surface' && (_jsx(Row, { label: "Source mesh", children: _jsx(SelectField, { value: params.mesh?.uniqueId != null ? String(params.mesh.uniqueId) : '__none', options: [
+    return (_jsxs(ModuleSection, { title: "Shape", children: [_jsx(Row, { label: "Shape", hintKey: "shape.type", children: _jsx(SelectField, { value: type, options: SHAPE_TYPES, onChange: (next) => binding.apply((s) => (s.emitterShape = createShape(next, params))) }) }), keys
+                // A cone's Length only shapes Emit from Volume; Unity shows it for Cone Volume alone.
+                .filter((key) => key !== 'length' || params.coneEmitFrom === ConeEmitFrom.Volume)
+                .map((key) => (_jsx(Row, { label: PARAM_LABELS[key], children: _jsx(NumberField, { value: params[key], min: 0, onChange: (v) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, [key]: v }))) }) }, key))), type === 'mesh_surface' && (_jsx(Row, { label: "Source mesh", children: _jsx(SelectField, { value: params.mesh?.uniqueId != null ? String(params.mesh.uniqueId) : '__none', options: [
                         { value: '__none', label: '(none)' },
                         ...meshOptions.map((m) => ({ value: String(m.uniqueId), label: m.name })),
                     ], onChange: (id) => {
@@ -276,7 +285,13 @@ export function ShapeModule({ binding }) {
                         { value: BoxEmitFrom.Volume, label: 'Volume' },
                         { value: BoxEmitFrom.Shell, label: 'Shell (faces)' },
                         { value: BoxEmitFrom.Edge, label: 'Edges' },
-                    ], onChange: (emitFrom) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, emitFrom }))) }) })), !SHAPES_WITHOUT_MODE_SPREAD.has(type) && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Emit mode", children: _jsx(SelectField, { value: params.mode, options: [
+                    ], onChange: (emitFrom) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, emitFrom }))) }) })), type === 'cone' && (_jsx(Row, { label: "Emit from", children: _jsx(SelectField, { value: params.coneEmitFrom, options: [
+                        { value: ConeEmitFrom.Base, label: 'Base' },
+                        { value: ConeEmitFrom.Volume, label: 'Volume' },
+                    ], onChange: (coneEmitFrom) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, coneEmitFrom }))) }) })), type === 'grid' && (_jsx(Row, { label: "Sampling", children: _jsx(SelectField, { value: params.sampling, options: [
+                        { value: GridSampling.Random, label: 'Random' },
+                        { value: GridSampling.Sequential, label: 'Sequential' },
+                    ], onChange: (sampling) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, sampling }))) }) })), !SHAPES_WITHOUT_MODE_SPREAD.has(type) && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Emit mode", children: _jsx(SelectField, { value: params.mode, options: [
                                 { value: 0, label: 'Random' },
                                 { value: 1, label: 'Loop' },
                                 { value: 2, label: 'Ping-pong' },
@@ -293,9 +308,9 @@ export function SizeOverLifeModule({ binding }) {
             if (enabled) {
                 s.addBehavior(new SizeOverLife(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve })));
             }
-        }), children: _jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: behavior ? readPieces(behavior.size) : [{ start: 0, p: curve }], maxValue: 2, onChange: (pieces) => binding.apply((s) => {
+        }), children: _jsx("div", { style: { marginTop: 6 }, children: _jsx(AxesCurveField, { generator: behavior ? behavior.size : buildCurve([{ start: 0, p: curve }]), maxValue: 2, onChange: (size) => binding.apply((s) => {
                     removeBehavior(s, 'SizeOverLife');
-                    s.addBehavior(new SizeOverLife(buildCurve(pieces)));
+                    s.addBehavior(new SizeOverLife(size));
                 }) }) }) }));
 }
 /** The Color over Lifetime module (Unity's Color over Lifetime): a gradient over the particle's life. */
@@ -554,7 +569,17 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                                         { value: 'mix', label: 'Mix (outline)' },
                                         { value: 'fade', label: 'Fade (faces fade, edges stay)' },
                                     ], onChange: (mode) => patchRim({ mode }) }) }), _jsx(Row, { label: "Rim color", children: _jsx("div", { style: { display: 'flex', gap: 6 }, children: [0, 1, 2].map((channel) => (_jsx(NumberField, { value: rim.color[channel], min: 0, step: 0.05, onChange: (v) => setChannel(channel, v) }, channel))) }) }), _jsx(Row, { label: "Rim power", children: _jsx(NumberField, { value: rim.power, min: 0.01, step: 0.25, onChange: (power) => patchRim({ power }) }) }), _jsx(Row, { label: "Rim strength", children: _jsx(NumberField, { value: rim.strength, min: 0, step: 0.05, onChange: (strength) => patchRim({ strength }) }) })] }));
-                })(), _jsx(Row, { label: "Render order", children: _jsx(NumberField, { value: system.renderOrder, step: 1, onChange: (v) => binding.apply((s) => (s.renderOrder = Math.round(v))) }) }), _jsx(Row, { label: "Rendering group", children: _jsx(NumberField, { value: system.renderingGroupId, step: 1, min: 0, onChange: (v) => binding.apply((s) => (s.renderingGroupId = Math.max(0, Math.round(v)))) }) }), _jsx(Row, { label: "Layer mask", children: _jsx(NumberField, { value: system.layers.mask, min: 0, step: 1, onChange: (v) => binding.apply((s) => (s.layers.mask = Math.max(0, Math.floor(v)))) }) }), _jsxs(Row, { label: "Max particles", children: [_jsx(CheckboxField, { value: system.maxParticles !== undefined, onChange: (v) => binding.apply((s) => (s.maxParticles = v ? 1000 : undefined)) }), system.maxParticles !== undefined && (_jsx(NumberField, { value: system.maxParticles, min: 1, step: 10, onChange: (v) => binding.apply((s) => (s.maxParticles = Math.max(1, Math.floor(v)))) }))] }), system.renderMode !== RenderMode.Mesh && system.renderMode !== RenderMode.Trail && (_jsx(Row, { label: "Pivot", children: _jsx("div", { style: { display: 'flex', gap: 6 }, children: ['x', 'y', 'z'].map((axis) => (_jsx(NumberField, { value: system.pivot?.[axis] ?? 0, step: 0.05, onChange: (v) => binding.apply((s) => {
+                })(), _jsx(Row, { label: "Render order", children: _jsx(NumberField, { value: system.renderOrder, step: 1, onChange: (v) => binding.apply((s) => (s.renderOrder = Math.round(v))) }) }), _jsx(Row, { label: "Rendering group", children: _jsx(NumberField, { value: system.renderingGroupId, step: 1, min: 0, onChange: (v) => binding.apply((s) => (s.renderingGroupId = Math.max(0, Math.round(v)))) }) }), _jsx(Row, { label: "Layer mask", children: _jsx(NumberField, { value: system.layers.mask, min: 0, step: 1, onChange: (v) => binding.apply((s) => (s.layers.mask = Math.max(0, Math.floor(v)))) }) }), _jsxs(Row, { label: "Max particles", children: [_jsx(CheckboxField, { value: system.maxParticles !== undefined, onChange: (v) => binding.apply((s) => (s.maxParticles = v ? 1000 : undefined)) }), system.maxParticles !== undefined && (_jsx(NumberField, { value: system.maxParticles, min: 1, step: 10, onChange: (v) => binding.apply((s) => (s.maxParticles = Math.max(1, Math.floor(v)))) }))] }), system.maxParticles !== undefined && system.renderMode !== RenderMode.Trail && (_jsx(Row, { label: "Ring buffer", hint: "What a full system does with new particles, as Unity's Ring Buffer Mode.", children: _jsx(SelectField, { value: system.ringBufferMode, options: [
+                        { value: 'disabled', label: 'Disabled' },
+                        { value: 'pauseUntilReplaced', label: 'Pause until replaced' },
+                        { value: 'loopUntilReplaced', label: 'Loop until replaced' },
+                    ], onChange: (v) => binding.apply((s) => (s.ringBufferMode = v)) }) })), system.maxParticles !== undefined &&
+                system.renderMode !== RenderMode.Trail &&
+                system.ringBufferMode === 'loopUntilReplaced' && (_jsx(Row, { label: "Loop range", hint: "The part of its life a particle plays again, from 0 to 1.", children: _jsx("div", { style: { display: 'flex', gap: 6 }, children: ['x', 'y'].map((end) => (_jsx(NumberField, { value: system.ringBufferLoopRange[end], min: 0, step: 0.05, onChange: (v) => binding.apply((s) => {
+                            const next = s.ringBufferLoopRange.clone();
+                            next[end] = Math.min(1, Math.max(0, v));
+                            s.ringBufferLoopRange = new Vector2(Math.min(next.x, next.y), Math.max(next.x, next.y));
+                        }) }, end))) }) })), system.renderMode !== RenderMode.Mesh && system.renderMode !== RenderMode.Trail && (_jsx(Row, { label: "Pivot", children: _jsx("div", { style: { display: 'flex', gap: 6 }, children: ['x', 'y', 'z'].map((axis) => (_jsx(NumberField, { value: system.pivot?.[axis] ?? 0, step: 0.05, onChange: (v) => binding.apply((s) => {
                             const next = (s.pivot ?? new Vector3()).clone();
                             next[axis] = v;
                             s.pivot = next;
@@ -573,7 +598,7 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                     ], onChange: (mode) => binding.apply((s) => (s.sortMode = mode)) }) }), _jsx(Row, { label: "Limit screen size", children: _jsx(CheckboxField, { value: system.minParticleSize > 0 || system.maxParticleSize !== Infinity, onChange: (v) => binding.apply((s) => {
                         s.minParticleSize = 0;
                         s.maxParticleSize = v ? 0.5 : Infinity;
-                    }) }) }), (system.minParticleSize > 0 || system.maxParticleSize !== Infinity) && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Min size (viewport)", children: _jsx(NumberField, { value: system.minParticleSize, step: 0.01, min: 0, onChange: (v) => binding.apply((s) => (s.minParticleSize = Math.max(0, v))) }) }), _jsx(Row, { label: "Max size (viewport)", children: _jsx(NumberField, { value: system.maxParticleSize === Infinity ? 0 : system.maxParticleSize, step: 0.05, min: 0, onChange: (v) => binding.apply((s) => (s.maxParticleSize = v > 0 ? v : Infinity)) }) })] })), _jsx(Row, { label: "Apply fog", children: _jsx(CheckboxField, { value: system.applyFog, onChange: (v) => binding.apply((s) => (s.applyFog = v)) }) }), _jsx(Row, { label: "Soft particles", children: _jsx(CheckboxField, { value: system.softParticles, onChange: (v) => binding.apply((s) => (s.softParticles = v)) }) }), system.softParticles && (_jsx(Row, { label: "Fade near/far", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: system.softNearFade, min: 0, onChange: (v) => binding.apply((s) => (s.softNearFade = v)) }), _jsx(NumberField, { value: system.softFarFade, min: 0, onChange: (v) => binding.apply((s) => (s.softFarFade = v)) })] }) }))] }));
+                    }) }) }), (system.minParticleSize > 0 || system.maxParticleSize !== Infinity) && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Min size (viewport)", children: _jsx(NumberField, { value: system.minParticleSize, step: 0.01, min: 0, onChange: (v) => binding.apply((s) => (s.minParticleSize = Math.max(0, v))) }) }), _jsx(Row, { label: "Max size (viewport)", children: _jsx(NumberField, { value: system.maxParticleSize === Infinity ? 0 : system.maxParticleSize, step: 0.05, min: 0, onChange: (v) => binding.apply((s) => (s.maxParticleSize = v > 0 ? v : Infinity)) }) })] })), _jsx(Row, { label: "Apply fog", children: _jsx(CheckboxField, { value: system.applyFog, onChange: (v) => binding.apply((s) => (s.applyFog = v)) }) }), _jsx(Row, { label: "Image processing", children: _jsx(CheckboxField, { value: system.applyImageProcessing, onChange: (v) => binding.apply((s) => (s.applyImageProcessing = v)) }) }), _jsx(Row, { label: "Soft particles", children: _jsx(CheckboxField, { value: system.softParticles, onChange: (v) => binding.apply((s) => (s.softParticles = v)) }) }), system.softParticles && (_jsx(Row, { label: "Fade near/far", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: system.softNearFade, min: 0, onChange: (v) => binding.apply((s) => (s.softNearFade = v)) }), _jsx(NumberField, { value: system.softFarFade, min: 0, onChange: (v) => binding.apply((s) => (s.softFarFade = v)) })] }) }))] }));
 }
 function removeBehavior(system, type) {
     const behaviors = system.behaviors;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "babylon.quarks-editor",
-    "version": "0.28.0",
+    "version": "0.29.0",
     "description": "Shuriken-style effect editor for babylon.quarks: headless edit-model core + React module-stack UI",
     "type": "module",
     "main": "./dist/index.js",
@@ -61,7 +61,7 @@
         "@babylonjs/materials": "^9.0.0",
         "@heroicons/react": ">=2.0.0",
         "@tanstack/react-virtual": ">=3.0.0",
-        "babylon.quarks": "~0.28.0",
+        "babylon.quarks": "~0.29.0",
         "react": ">=18",
         "react-dom": ">=18"
     },

package/src/core/defaultEffect.ts

@@ -40,6 +40,8 @@ export function createDefaultEffect(
         transparent: true,
         blendMode: 1,
     });
+    // The editor previews over and over; the stop action is saved, not applied.
+    system.ignoreStopAction = true;
     system.addBehavior(new ColorOverLife(buildGradient(DEFAULT_GRADIENT_STOPS)));
     system.emitter.rotation.x = -Math.PI / 2;
     return system;

package/src/core/emitterShapeWireframe.ts

@@ -6,6 +6,7 @@ import {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder.js';
 import {TransformNode} from '@babylonjs/core/Meshes/transformNode.js';
 import type {Scene} from '@babylonjs/core/scene.js';
 import type {ParticleSystem} from 'babylon.quarks';
+import {ConeEmitFrom} from 'babylon.quarks';
 import {EDITOR_SCENE_NODE_METADATA} from './editorScene.js';
 import './lineShaders.js';
 import {getShapeType, readShapeParams} from './shapes.js';
@@ -120,8 +121,16 @@ function buildEmitterWireframe(system: ParticleSystem, scene: Scene): Mesh[] {
                 lines('wf-cone-spoke-b', [Vector3.Zero(), arcPoint(radius, arc)]);
             }
 
-            const preview = Math.max(radius * 2, 1.25);
-            const farRadius = radius + preview * Math.tan(angle);
+            // Emit from Volume draws the volume itself, out to its length; the base a stretch of the
+            // directions.
+            const preview =
+                params.coneEmitFrom === ConeEmitFrom.Volume
+                    ? Math.max(Number.isFinite(params.length) ? params.length : 0, 0.001)
+                    : Math.max(radius * 2, 1.25);
+            // The rays and the far rim end at the same point, which a near-flat cone keeps in view.
+            const travel = preview / Math.max(Math.cos(angle), 0.05);
+            const farRadius = radius + Math.sin(angle) * travel;
+            const farZ = Math.cos(angle) * travel;
             const spokeCount = Math.max(4, Math.ceil((arc / (Math.PI * 2)) * 12));
             for (let i = 0; i <= spokeCount; i++) {
                 const theta = (i / spokeCount) * arc;
@@ -131,10 +140,9 @@ function buildEmitterWireframe(system: ParticleSystem, scene: Scene): Mesh[] {
                     Math.sin(angle) * Math.sin(theta),
                     Math.cos(angle)
                 );
-                const travel = preview / Math.max(Math.cos(angle), 0.05);
                 lines(`wf-cone-ray-${i}`, [rim, rim.add(dir.scale(travel))], DIRECTION_COLOR);
             }
-            lines('wf-cone-far', xyArc(farRadius, arc, 32, preview), DIRECTION_COLOR);
+            lines('wf-cone-far', xyArc(farRadius, arc, 32, farZ), DIRECTION_COLOR);
             break;
         }
         case 'sphere': {

package/src/core/loadEffect.ts

@@ -110,6 +110,8 @@ export function parseEffectFromJson(
     const systems: ParticleSystem[] = [];
     QuarksUtil.runOnAllParticleEmitters(root, (emitter: ParticleEmitter) => {
         const system = emitter.system as ParticleSystem;
+        // The editor previews over and over; the stop action is saved, not applied.
+        system.ignoreStopAction = true;
         if (registerRenderer && renderer) {
             renderer.addSystem(system);
         }

package/src/core/shapes.ts

@@ -4,12 +4,14 @@ import {
     BoxEmitFrom,
     BoxEmitter,
     CircleEmitter,
+    ConeEmitFrom,
     ConeEmitter,
     ConstantValue,
     DonutEmitter,
     EdgeEmitter,
     EmitterMode,
     GridEmitter,
+    GridSampling,
     HemisphereEmitter,
     MeshSurfaceEmitter,
     PointEmitter,
@@ -82,6 +84,12 @@ export interface ShapeParams {
     depth: number;
     /** Where a box emits from: its volume, its faces or its edges. */
     emitFrom: BoxEmitFrom;
+    /** Where a cone emits from: its base or its volume. */
+    coneEmitFrom: ConeEmitFrom;
+    /** Height of a cone's volume (Unity's Length), for Emit from Volume. */
+    length: number;
+    /** How a grid picks its cells: at random or in turn. */
+    sampling: GridSampling;
     /** How fast an edge emitter's loop / ping-pong point travels, in lengths per second. */
     speed: number;
     /** The mesh a mesh surface emitter emits from. */
@@ -103,6 +111,9 @@ export const DEFAULT_SHAPE_PARAMS: ShapeParams = {
     row: 10,
     depth: 1,
     emitFrom: BoxEmitFrom.Volume,
+    coneEmitFrom: ConeEmitFrom.Base,
+    length: 5,
+    sampling: GridSampling.Random,
     speed: 1,
     mesh: undefined,
 };
@@ -131,7 +142,11 @@ export function readShapeParams(shape: EmitterShape): ShapeParams {
         column: num('column', DEFAULT_SHAPE_PARAMS.column),
         row: num('row', DEFAULT_SHAPE_PARAMS.row),
         depth: num('depth', DEFAULT_SHAPE_PARAMS.depth),
-        emitFrom: num('emitFrom', DEFAULT_SHAPE_PARAMS.emitFrom) as BoxEmitFrom,
+        // A box and a cone both name it emitFrom, with different enums: each keeps its own.
+        emitFrom: shape instanceof BoxEmitter ? shape.emitFrom : DEFAULT_SHAPE_PARAMS.emitFrom,
+        coneEmitFrom: shape instanceof ConeEmitter ? shape.emitFrom : DEFAULT_SHAPE_PARAMS.coneEmitFrom,
+        length: num('length', DEFAULT_SHAPE_PARAMS.length),
+        sampling: num('sampling', DEFAULT_SHAPE_PARAMS.sampling) as GridSampling,
         speed: anyShape.speed instanceof ConstantValue ? anyShape.speed.value : DEFAULT_SHAPE_PARAMS.speed,
         mesh: anyShape.mesh as Mesh | undefined,
     };
@@ -143,7 +158,7 @@ export const SHAPE_PARAM_KEYS: {[K in ShapeType]: Array<keyof ShapeParams>} = {
     point: [],
     sphere: ['radius', 'arc', 'thickness'],
     hemisphere: ['radius', 'arc', 'thickness'],
-    cone: ['radius', 'arc', 'thickness', 'angle'],
+    cone: ['radius', 'arc', 'thickness', 'angle', 'length'],
     circle: ['radius', 'arc', 'thickness'],
     donut: ['radius', 'arc', 'thickness', 'donutRadius'],
     rectangle: ['width', 'height'],
@@ -180,6 +195,8 @@ export function createShape(type: ShapeType, params: ShapeParams): EmitterShape
                 arc: params.arc,
                 thickness: params.thickness,
                 angle: params.angle,
+                emitFrom: params.coneEmitFrom,
+                length: params.length,
                 mode: params.mode,
                 spread: params.spread,
             });
@@ -213,6 +230,7 @@ export function createShape(type: ShapeType, params: ShapeParams): EmitterShape
                 height: params.height,
                 column: params.column,
                 row: params.row,
+                sampling: params.sampling,
             });
         case 'box':
             return new BoxEmitter({

package/src/core/systems.ts

@@ -49,6 +49,8 @@ export function createChildSystem(parent: ParticleSystem, options: ChildSystemOp
         worldSpace: true,
     });
     child.emitter.name = options.name ?? (oneShot ? 'sub-emitter' : 'child-system');
+    // The editor previews over and over; the stop action is saved, not applied.
+    child.ignoreStopAction = true;
     if (oneShot) {
         child.onlyUsedByOther = true;
     }

package/src/core/values.ts

@@ -1,12 +1,15 @@
 import type {FunctionValueGenerator, RotationGenerator, ValueGenerator, Vector3Generator} from 'babylon.quarks';
-import {Bezier, ConstantValue, IntervalValue, PiecewiseBezier} from 'babylon.quarks';
+import {Bezier, ConstantValue, IntervalValue, PiecewiseBezier, RandomBetweenCurves} from 'babylon.quarks';
 
 /** A generator of one number: a constant or random value, or a curve over the particle's life. */
 export type ScalarGenerator = ValueGenerator | FunctionValueGenerator;
 /** Any generator a value field can be pointed at; ones that are not scalar read as the default. */
 export type AnyGenerator = ScalarGenerator | Vector3Generator | RotationGenerator;
-/** How a value field produces its number: Unity's Constant, Random Between Two Constants or Curve. */
-export type ScalarMode = 'constant' | 'random' | 'curve';
+/**
+ * How a value field produces its number: Unity's Constant, Random Between Two Constants, Curve or
+ * Random Between Two Curves.
+ */
+export type ScalarMode = 'constant' | 'random' | 'curve' | 'curves';
 
 /** Editable snapshot of a scalar value generator. */
 export interface ScalarValueState {
@@ -18,8 +21,10 @@ export interface ScalarValueState {
     min: number;
     /** Upper end of the random range (mode: random). */
     max: number;
-    /** Cubic bezier control values over normalized lifetime (mode: curve). */
+    /** Cubic bezier control values over normalized lifetime (mode: curve; the first curve of curves). */
     curve: [number, number, number, number];
+    /** The second curve's control values (mode: curves); the first curve's when left out. */
+    curve2?: [number, number, number, number];
 }
 
 /**
@@ -27,7 +32,14 @@ export interface ScalarValueState {
  * Anything else, including a missing generator, reads as the constant 1.
  */
 export function readScalar(generator: AnyGenerator | undefined): ScalarValueState {
-    const state: ScalarValueState = {mode: 'constant', value: 1, min: 0.5, max: 1.5, curve: [0, 1, 1, 0]};
+    const state: ScalarValueState = {
+        mode: 'constant',
+        value: 1,
+        min: 0.5,
+        max: 1.5,
+        curve: [0, 1, 1, 0],
+        curve2: [0, 1, 1, 0],
+    };
     if (generator instanceof ConstantValue) {
         state.mode = 'constant';
         state.value = generator.value;
@@ -40,15 +52,24 @@ export function readScalar(generator: AnyGenerator | undefined): ScalarValueStat
         state.value = (generator.a + generator.b) / 2;
     } else if (generator instanceof PiecewiseBezier) {
         state.mode = 'curve';
-        const first = generator.functions[0]?.[0];
-        if (first) {
-            state.curve = [first.p[0], first.p[1], first.p[2], first.p[3]];
-            state.value = first.p[0];
-        }
+        state.curve = firstSegment(generator) ?? state.curve;
+        state.curve2 = state.curve;
+        state.value = state.curve[0];
+    } else if (generator instanceof RandomBetweenCurves) {
+        state.mode = 'curves';
+        state.curve = firstSegment(generator.curve1) ?? state.curve;
+        state.curve2 = firstSegment(generator.curve2) ?? state.curve;
+        state.value = state.curve[0];
     }
     return state;
 }
 
+/** The control values of a curve's first segment, if it has one. */
+function firstSegment(curve: PiecewiseBezier): [number, number, number, number] | undefined {
+    const first = curve.functions[0]?.[0];
+    return first ? [first.p[0], first.p[1], first.p[2], first.p[3]] : undefined;
+}
+
 /** The generator a value field's state describes; a curve state builds a one-segment curve. */
 export function buildScalar(state: ScalarValueState & {mode: 'curve'}): PiecewiseBezier;
 export function buildScalar(state: ScalarValueState): ScalarGenerator;
@@ -60,6 +81,11 @@ export function buildScalar(state: ScalarValueState): ScalarGenerator {
             return new IntervalValue(Math.min(state.min, state.max), Math.max(state.min, state.max));
         case 'curve':
             return new PiecewiseBezier([[new Bezier(...state.curve), 0]]);
+        case 'curves':
+            return new RandomBetweenCurves(
+                new PiecewiseBezier([[new Bezier(...state.curve), 0]]),
+                new PiecewiseBezier([[new Bezier(...(state.curve2 ?? state.curve)), 0]])
+            );
     }
 }
 
@@ -71,8 +97,20 @@ export interface CurvePiece {
     p: [number, number, number, number];
 }
 
-/** Reads pieces from a PiecewiseBezier (or synthesizes one segment for other generators). */
-export function readPieces(generator: AnyGenerator | undefined): CurvePiece[] {
+/**
+ * Reads pieces from a PiecewiseBezier, or from the first curve of a RandomBetweenCurves (the
+ * second with `second`). A constant reads as a flat curve, a random range as a flat curve at its
+ * lower end (its upper with `second`), and other generators as one default segment.
+ */
+export function readPieces(generator: AnyGenerator | undefined, second = false): CurvePiece[] {
+    if (generator instanceof RandomBetweenCurves) {
+        return readPieces(second ? generator.curve2 : generator.curve1);
+    }
+    // A constant is a flat curve, and a random range two flat curves at its ends.
+    if (generator instanceof ConstantValue || generator instanceof IntervalValue) {
+        const value = generator instanceof ConstantValue ? generator.value : second ? generator.b : generator.a;
+        return [{start: 0, p: [value, value, value, value]}];
+    }
     if (generator instanceof PiecewiseBezier && generator.functions.length > 0) {
         return generator.functions.map(([bezier, start]) => ({
             start,
@@ -89,6 +127,29 @@ export function buildCurve(pieces: CurvePiece[]): PiecewiseBezier {
     return new PiecewiseBezier(sorted.map((piece) => [new Bezier(...piece.p), piece.start] as [Bezier, number]));
 }
 
+/**
+ * `generator` as one curve (`'curve'`) or two (`'curves'`, Unity's Random Between Two Curves),
+ * keeping every segment: one curve becomes both bounds of two, and two keep their first as one.
+ * A constant is a flat curve, and a random range flat curves at its ends.
+ */
+export function withCurves(generator: AnyGenerator | undefined, mode: 'curve'): PiecewiseBezier;
+export function withCurves(generator: AnyGenerator | undefined, mode: 'curves'): RandomBetweenCurves;
+export function withCurves(
+    generator: AnyGenerator | undefined,
+    mode: 'curve' | 'curves'
+): PiecewiseBezier | RandomBetweenCurves;
+export function withCurves(
+    generator: AnyGenerator | undefined,
+    mode: 'curve' | 'curves'
+): PiecewiseBezier | RandomBetweenCurves {
+    const first = buildCurve(readPieces(generator));
+    if (mode === 'curve') {
+        return first;
+    }
+    const second = generator instanceof RandomBetweenCurves || generator instanceof IntervalValue;
+    return new RandomBetweenCurves(first, buildCurve(readPieces(generator, second)));
+}
+
 /** Splits the piece containing x into two exact halves using Bezier.split. */
 export function splitPieces(pieces: CurvePiece[], x: number): CurvePiece[] {
     const sorted = [...pieces].sort((a, b) => a.start - b.start);

package/src/react/AxesCurveField.tsx

@@ -0,0 +1,72 @@
+import {IntervalValue, PiecewiseBezier, RandomBetweenCurves, Vector3Function} from 'babylon.quarks';
+import React from 'react';
+import {AnyGenerator, withCurves} from '../core/values.js';
+import {CheckboxField, Row} from './fields.js';
+import {LifeCurveField} from './LifeCurveField.js';
+
+const captionStyle: React.CSSProperties = {fontSize: 10.5, opacity: 0.6, marginTop: 6};
+
+/** One curve or two, for one axis or for all of them. */
+type AxisCurve = PiecewiseBezier | RandomBetweenCurves;
+
+/** Props of an {@link AxesCurveField}. */
+export interface AxesCurveFieldProps {
+    /** The generator shown: one curve (or two) for every axis, or a `Vector3Function` per axis. */
+    generator: AnyGenerator | undefined;
+    /** Top of the curve editors' value range. */
+    maxValue?: number;
+    /** Receives the edited generator. */
+    onChange: (generator: AxisCurve | Vector3Function) => void;
+}
+
+/**
+ * The curve or curves `generator` holds, as a fresh copy: a constant as a flat curve, a random
+ * range as two flat ones.
+ */
+function curveOf(generator: AnyGenerator | undefined): AxisCurve {
+    const two = generator instanceof RandomBetweenCurves || generator instanceof IntervalValue;
+    return withCurves(generator, two ? 'curves' : 'curve');
+}
+
+/**
+ * A curve over life with Unity's Separate Axes switch: off, one curve (or two) for all axes; on, a
+ * {@link Vector3Function} with its own for X, Y and Z. Switching on gives every axis the shared
+ * curve; switching off keeps the X one.
+ */
+export function AxesCurveField(props: AxesCurveFieldProps): React.ReactElement {
+    const {generator} = props;
+    const axes = generator instanceof Vector3Function ? generator : undefined;
+    const toggle = (on: boolean) =>
+        props.onChange(
+            on ? new Vector3Function(curveOf(generator), curveOf(generator), curveOf(generator)) : curveOf(axes?.x)
+        );
+    return (
+        <>
+            <Row label="Separate axes" hint="A curve for each of X, Y and Z, as Unity's Separate Axes.">
+                <CheckboxField value={axes !== undefined} onChange={toggle} />
+            </Row>
+            {axes === undefined ? (
+                <LifeCurveField generator={generator} maxValue={props.maxValue} onChange={props.onChange} />
+            ) : (
+                (['x', 'y', 'z'] as const).map((axis) => (
+                    <div key={axis}>
+                        <div style={captionStyle}>{axis.toUpperCase()}</div>
+                        <LifeCurveField
+                            generator={axes[axis]}
+                            maxValue={props.maxValue}
+                            onChange={(curve) =>
+                                props.onChange(
+                                    new Vector3Function(
+                                        axis === 'x' ? curve : axes.x,
+                                        axis === 'y' ? curve : axes.y,
+                                        axis === 'z' ? curve : axes.z
+                                    )
+                                )
+                            }
+                        />
+                    </div>
+                ))
+            )}
+        </>
+    );
+}

package/src/react/LifeCurveField.tsx

@@ -0,0 +1,57 @@
+import {IntervalValue, PiecewiseBezier, RandomBetweenCurves} from 'babylon.quarks';
+import React from 'react';
+import {AnyGenerator, buildCurve, CurvePiece, readPieces, withCurves} from '../core/values.js';
+import {CurveEditor} from './CurveEditor.js';
+import {CheckboxField, Row} from './fields.js';
+
+const captionStyle: React.CSSProperties = {fontSize: 10.5, opacity: 0.6, flex: 'none'};
+
+/** Props of a {@link LifeCurveField}. */
+export interface LifeCurveFieldProps {
+    /** The generator shown: one curve, two curves, or anything else, read as one curve. */
+    generator: AnyGenerator | undefined;
+    /** Top of the curve editors' value range. */
+    maxValue?: number;
+    /** Receives the edited curve or curves. */
+    onChange: (generator: PiecewiseBezier | RandomBetweenCurves) => void;
+}
+
+/**
+ * A setting that is a curve over the particle's life, or two with a "Two curves" switch (Unity's
+ * Random Between Two Curves): each particle then follows its own curve between the lower and the
+ * upper one. Every segment of both curves is kept through edits and switches.
+ */
+export function LifeCurveField(props: LifeCurveFieldProps): React.ReactElement {
+    const {generator} = props;
+    // A random range shows as two flat curves, and an edit turns it into them.
+    const two = generator instanceof RandomBetweenCurves || generator instanceof IntervalValue;
+    const edit = (pieces: CurvePiece[], upper: boolean) => {
+        if (!two) {
+            props.onChange(buildCurve(pieces));
+            return;
+        }
+        const lower = upper ? buildCurve(readPieces(generator)) : buildCurve(pieces);
+        const higher = upper ? buildCurve(pieces) : buildCurve(readPieces(generator, true));
+        props.onChange(new RandomBetweenCurves(lower, higher));
+    };
+    return (
+        <>
+            <Row label="Two curves" hint="Random between two curves: each particle follows its own curve between them.">
+                <CheckboxField
+                    value={two}
+                    onChange={(on) => props.onChange(withCurves(generator, on ? 'curves' : 'curve'))}
+                />
+            </Row>
+            {(two ? (['lower', 'upper'] as const) : (['curve'] as const)).map((bound) => (
+                <div key={bound} style={{marginTop: 6}}>
+                    {two && <span style={captionStyle}>{bound}</span>}
+                    <CurveEditor
+                        pieces={readPieces(generator, bound === 'upper')}
+                        maxValue={props.maxValue}
+                        onChange={(pieces) => edit(pieces, bound === 'upper')}
+                    />
+                </div>
+            ))}
+        </>
+    );
+}