babylon.quarks-editor 0.23.0 → 0.24.0

package/dist/react/modules.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Texture } from '@babylonjs/core/Materials/Textures/texture';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
 import { PlusIcon, XMarkIcon } from '@heroicons/react/24/solid';
-import { ColorOverLife, ConstantColor, ConstantValue, EulerGenerator, Gradient, IntervalValue, RandomColor, RandomColorBetweenGradient, RandomQuatGenerator, RenderMode, SizeOverLife, Vector3Function, Vector4, } from 'babylon.quarks';
+import { AxisAngleGenerator, BoxEmitFrom, ColorOverLife, ColorRange, ConstantColor, ConstantValue, EulerGenerator, Gradient, IntervalValue, RandomColor, RandomColorBetweenGradient, RandomQuatGenerator, RenderMode, SizeOverLife, Vector3, Vector3Function, Vector4, } from 'babylon.quarks';
 import React, { useMemo, useState } from 'react';
 import { DEFAULT_GRADIENT_STOPS, buildGradient, findBehavior, hexToRgb, readGradientStops, rgbToHex, } from '../core/colors';
 import { applyRendererMaterial, getMaterialLabel } from '../core/material';
@@ -58,6 +58,8 @@ const PARAM_LABELS = {
     height: 'Height',
     column: 'Columns',
     row: 'Rows',
+    depth: 'Depth',
+    speed: 'Speed (lengths/s)',
 };
 function ColorInput(props) {
     const { value, onChange } = props;
@@ -76,23 +78,30 @@ function ColorInput(props) {
 export function MainModule({ binding }) {
     const system = binding.system;
     const startColor = system.startColor;
-    const colorMode = startColor instanceof RandomColor ? 'random' : 'constant';
-    const colorA = startColor instanceof RandomColor
+    const colorMode = startColor instanceof RandomColor ? 'random' : startColor instanceof ColorRange ? 'range' : 'constant';
+    const twoColors = startColor instanceof RandomColor || startColor instanceof ColorRange;
+    const colorA = twoColors
         ? startColor.a
         : startColor instanceof ConstantColor
             ? startColor.color
             : new Vector4(1, 1, 1, 1);
-    const colorB = startColor instanceof RandomColor ? startColor.b : new Vector4(1, 0.5, 0.2, 1);
+    const colorB = twoColors ? startColor.b : new Vector4(1, 0.5, 0.2, 1);
+    /** The two-colour generator of the current mode. */
+    const makeTwoColors = (a, b) => colorMode === 'range' ? new ColorRange(a, b) : new RandomColor(a, b);
     const rotation = system.startRotation;
     const isEuler = rotation instanceof EulerGenerator;
+    const isAxisAngle = rotation instanceof AxisAngleGenerator;
     const rotationMode = rotation instanceof RandomQuatGenerator
         ? '3d'
         : isEuler
             ? 'euler'
-            : readScalar(rotation).mode === 'random'
-                ? 'random'
-                : 'angle';
-    const rotationState = readScalar(rotation instanceof RandomQuatGenerator || isEuler ? undefined : rotation);
+            : isAxisAngle
+                ? 'axisAngle'
+                : readScalar(rotation).mode === 'random'
+                    ? 'random'
+                    : 'angle';
+    const rotationState = readScalar(rotation instanceof RandomQuatGenerator || isEuler || isAxisAngle ? undefined : rotation);
+    const axisAngle = isAxisAngle ? rotation : undefined;
     const eulerAngles = {
         x: isEuler ? readScalar(rotation.angleX).value : 0,
         y: isEuler ? readScalar(rotation.angleY).value : 0,
@@ -109,7 +118,11 @@ 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)) }) }), _jsx(Row, { label: "Prewarm", children: _jsx(CheckboxField, { value: system.prewarm, onChange: (v) => binding.apply((s) => (s.prewarm = v)) }) }), _jsx(ValueField, { label: "Start delay", generator: system.startDelay, min: 0, curveMax: 5, onChange: (g) => binding.apply((s) => {
+    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: "Prewarm", children: _jsx(CheckboxField, { value: system.prewarm, onChange: (v) => binding.apply((s) => (s.prewarm = 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) => {
                     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: size3D ? '3d' : 'uniform', options: [
@@ -131,12 +144,16 @@ export function MainModule({ binding }) {
                     }) }, axis))) })), _jsx(Row, { label: "Start color", children: _jsx(SelectField, { value: colorGenMode, options: [
                         { value: 'constant', label: 'Constant' },
                         { value: 'random', label: 'Random between two' },
+                        { value: 'range', label: 'Blend between two' },
                         { value: 'gradient', label: 'Gradient' },
                         { value: 'gradient2', label: 'Random between gradients' },
                     ], onChange: (mode) => binding.apply((s) => {
                         if (mode === 'random') {
                             s.startColor = new RandomColor(colorA, colorB);
                         }
+                        else if (mode === 'range') {
+                            s.startColor = new ColorRange(colorA, colorB);
+                        }
                         else if (mode === 'gradient') {
                             s.startColor = buildGradient(DEFAULT_GRADIENT_STOPS);
                         }
@@ -146,10 +163,9 @@ export function MainModule({ binding }) {
                         else {
                             s.startColor = new ConstantColor(colorA);
                         }
-                    }) }) }), (colorGenMode === 'constant' || colorGenMode === 'random') && (_jsx(Row, { label: "", children: _jsx(ColorInput, { value: colorA, onChange: (next) => binding.apply((s) => {
-                        s.startColor =
-                            colorGenMode === 'random' ? new RandomColor(next, colorB) : new ConstantColor(next);
-                    }) }) })), colorGenMode === 'random' && (_jsx(Row, { label: "", children: _jsx(ColorInput, { value: colorB, onChange: (next) => binding.apply((s) => (s.startColor = new RandomColor(colorA, next))) }) })), colorGenMode === 'gradient' && (_jsx("div", { style: { marginTop: 6 }, children: _jsx(GradientEditor, { stops: readGradientStops(startColor), onChange: (stops) => binding.apply((s) => (s.startColor = buildGradient(stops))) }) })), colorGenMode === 'gradient2' && (_jsxs("div", { style: { marginTop: 6, display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx(GradientEditor, { stops: readGradientStops(startColor.gradient1), onChange: (stops) => binding.apply((s) => {
+                    }) }) }), (colorGenMode === 'constant' || twoColors) && (_jsx(Row, { label: "", children: _jsx(ColorInput, { value: colorA, onChange: (next) => binding.apply((s) => {
+                        s.startColor = twoColors ? makeTwoColors(next, colorB) : new ConstantColor(next);
+                    }) }) })), twoColors && (_jsx(Row, { label: "", children: _jsx(ColorInput, { value: colorB, onChange: (next) => binding.apply((s) => (s.startColor = makeTwoColors(colorA, next))) }) })), colorGenMode === 'gradient' && (_jsx("div", { style: { marginTop: 6 }, children: _jsx(GradientEditor, { stops: readGradientStops(startColor), onChange: (stops) => binding.apply((s) => (s.startColor = buildGradient(stops))) }) })), colorGenMode === 'gradient2' && (_jsxs("div", { style: { marginTop: 6, display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx(GradientEditor, { stops: readGradientStops(startColor.gradient1), onChange: (stops) => binding.apply((s) => {
                             const g = s.startColor;
                             s.startColor = new RandomColorBetweenGradient(buildGradient(stops), g.gradient2);
                         }) }), _jsx(GradientEditor, { stops: readGradientStops(startColor.gradient2), onChange: (stops) => binding.apply((s) => {
@@ -159,17 +175,24 @@ export function MainModule({ binding }) {
                         { value: 'angle', label: 'Angle (rad)' },
                         { value: 'random', label: 'Random angle' },
                         { value: 'euler', label: '3D (per axis)' },
+                        { value: 'axisAngle', label: '3D (axis + angle)' },
                         { value: '3d', label: 'Random 3D' },
                     ], onChange: (mode) => binding.apply((s) => {
                         s.startRotation =
                             mode === '3d'
                                 ? new RandomQuatGenerator()
-                                : mode === 'euler'
-                                    ? new EulerGenerator(new ConstantValue(eulerAngles.x), new ConstantValue(eulerAngles.y), new ConstantValue(eulerAngles.z))
-                                    : mode === 'random'
-                                        ? new IntervalValue(0, Math.PI * 2)
-                                        : new ConstantValue(rotationState.value);
-                    }) }) }), rotationMode === 'euler' && (_jsx(_Fragment, { children: ['x', 'y', 'z'].map((axis) => (_jsx(Row, { label: `  ${axis.toUpperCase()} (rad)`, children: _jsx(NumberField, { value: eulerAngles[axis], step: 0.1, onChange: (v) => setEulerAxis(axis, v) }) }, axis))) })), rotationMode === 'angle' && (_jsx(Row, { label: "", children: _jsx(NumberField, { value: rotationState.value, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new ConstantValue(v))) }) })), rotationMode === 'random' && (_jsx(Row, { label: "", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: rotationState.min, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new IntervalValue(v, rotationState.max))) }), _jsx(NumberField, { value: rotationState.max, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new IntervalValue(rotationState.min, v))) })] }) }))] }));
+                                : mode === 'axisAngle'
+                                    ? new AxisAngleGenerator(new Vector3(0, 1, 0), new ConstantValue(rotationState.value))
+                                    : mode === 'euler'
+                                        ? new EulerGenerator(new ConstantValue(eulerAngles.x), new ConstantValue(eulerAngles.y), new ConstantValue(eulerAngles.z))
+                                        : mode === 'random'
+                                            ? new IntervalValue(0, Math.PI * 2)
+                                            : new ConstantValue(rotationState.value);
+                    }) }) }), rotationMode === 'euler' && (_jsx(_Fragment, { children: ['x', 'y', 'z'].map((axis) => (_jsx(Row, { label: `  ${axis.toUpperCase()} (rad)`, children: _jsx(NumberField, { value: eulerAngles[axis], step: 0.1, onChange: (v) => setEulerAxis(axis, v) }) }, axis))) })), axisAngle && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "  Axis", children: _jsx("div", { style: { display: 'flex', gap: 6 }, children: ['x', 'y', 'z'].map((axis) => (_jsx(NumberField, { value: axisAngle.axis[axis], step: 0.1, onChange: (v) => binding.apply((s) => {
+                                    const next = axisAngle.axis.clone();
+                                    next[axis] = v;
+                                    s.startRotation = new AxisAngleGenerator(next, axisAngle.angle);
+                                }) }, axis))) }) }), _jsx(ValueField, { label: "  Angle (rad)", generator: axisAngle.angle, curveMax: Math.PI * 2, onChange: (g) => binding.apply((s) => (s.startRotation = new AxisAngleGenerator(axisAngle.axis.clone(), g))) })] })), rotationMode === 'angle' && (_jsx(Row, { label: "", children: _jsx(NumberField, { value: rotationState.value, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new ConstantValue(v))) }) })), rotationMode === 'random' && (_jsx(Row, { label: "", children: _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(NumberField, { value: rotationState.min, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new IntervalValue(v, rotationState.max))) }), _jsx(NumberField, { value: rotationState.max, step: 0.1, onChange: (v) => binding.apply((s) => (s.startRotation = new IntervalValue(rotationState.min, v))) })] }) }))] }));
 }
 export function EmissionModule({ binding }) {
     const system = binding.system;
@@ -204,7 +227,7 @@ export function EmissionModule({ binding }) {
 // Shapes whose constructor doesn't accept `mode`/`spread` at all — showing those controls
 // for them would edit a value the shape silently ignores, just like the old "default to
 // first texture" bug: a control that looks live but does nothing.
-const SHAPES_WITHOUT_MODE_SPREAD = new Set(['point', 'grid', 'mesh_surface']);
+const SHAPES_WITHOUT_MODE_SPREAD = new Set(['point', 'grid', 'box', 'mesh_surface']);
 export function ShapeModule({ binding }) {
     const system = binding.system;
     const type = getShapeType(system.emitterShape);
@@ -219,12 +242,16 @@ export function ShapeModule({ binding }) {
                     ], onChange: (id) => {
                         const mesh = id === '__none' ? undefined : meshOptions.find((m) => String(m.uniqueId) === id);
                         binding.apply((s) => (s.emitterShape = createShape('mesh_surface', { ...params, mesh })));
-                    } }) })), !SHAPES_WITHOUT_MODE_SPREAD.has(type) && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Emit mode", children: _jsx(SelectField, { value: params.mode, options: [
+                    } }) })), type === 'box' && (_jsx(Row, { label: "Emit from", children: _jsx(SelectField, { value: params.emitFrom, options: [
+                        { 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: [
                                 { value: 0, label: 'Random' },
                                 { value: 1, label: 'Loop' },
                                 { value: 2, label: 'Ping-pong' },
                                 { value: 3, label: 'Burst spread' },
-                            ], onChange: (mode) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, mode }))) }) }), _jsx(Row, { label: "Spread", children: _jsx(NumberField, { value: params.spread, min: 0, step: 0.05, onChange: (spread) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, spread }))) }) })] }))] }));
+                            ], onChange: (mode) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, mode }))) }) }), _jsx(Row, { label: "Spread", children: _jsx(NumberField, { value: params.spread, min: 0, step: 0.05, onChange: (spread) => binding.apply((s) => (s.emitterShape = createShape(type, { ...params, spread }))) }) })] })), _jsx(Row, { label: "Align to direction", children: _jsx(CheckboxField, { value: binding.system.alignToDirection, onChange: (v) => binding.apply((s) => (s.alignToDirection = v)) }) })] }));
 }
 export function SizeOverLifeModule({ binding }) {
     const system = binding.system;
@@ -351,6 +378,15 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                                     new ConstantValue(Math.round(v));
                             }) }) }), _jsx(Row, { label: "Follow origin", children: _jsx(CheckboxField, { value: !!system.rendererEmitterSettings.followLocalOrigin, onChange: (v) => binding.apply((s) => {
                                 s.rendererEmitterSettings.followLocalOrigin = v;
+                            }) }) }), [
+                        ['recordWorldSpace', 'Record in world space'],
+                        ['uvFromHead', 'UV from head'],
+                        ['colorFromParticle', 'Color from particle'],
+                        ['dieWithParticle', 'Die with particle'],
+                    ].map(([key, label]) => (_jsx(Row, { label: label, children: _jsx(CheckboxField, { value: !!system.rendererEmitterSettings[key], onChange: (v) => binding.apply((s) => {
+                                s.rendererEmitterSettings[key] = v;
+                            }) }) }, key))), _jsx(Row, { label: "Head width scale", children: _jsx(NumberField, { value: system.rendererEmitterSettings.headWidthScale ?? 1, min: 0, step: 0.1, onChange: (v) => binding.apply((s) => {
+                                s.rendererEmitterSettings.headWidthScale = v;
                             }) }) })] })), system.renderMode === RenderMode.StretchedBillBoard && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Speed factor", children: _jsx(NumberField, { value: system.rendererEmitterSettings.speedFactor ?? 0, step: 0.1, onChange: (v) => binding.apply((s) => (s.rendererEmitterSettings.speedFactor = v)) }) }), _jsx(Row, { label: "Length factor", children: _jsx(NumberField, { value: system.rendererEmitterSettings.lengthFactor ?? 2, step: 0.1, onChange: (v) => binding.apply((s) => (s.rendererEmitterSettings.lengthFactor = v)) }) })] })), _jsxs("div", { style: {
                     marginTop: 10,
                     marginBottom: 2,
@@ -503,7 +539,22 @@ export function RendererModule({ binding, textureOptions, geometryOptions, resol
                                         { value: 'add', label: 'Add (glow)' },
                                         { value: 'mix', label: 'Mix (outline)' },
                                     ], 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: "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)) })] }) }))] }));
+                })(), _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) => {
+                            const next = (s.pivot ?? new Vector3()).clone();
+                            next[axis] = v;
+                            s.pivot = next;
+                        }) }, axis))) }) })), system.renderMode === RenderMode.Mesh && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Env map atlas", children: _jsx(SelectField, { value: system.getRendererSettings().reflectionAtlas?.url ?? '', options: [
+                                { value: '', label: 'None' },
+                                ...(textureOptions ?? []).map((option) => ({ value: option.url, label: option.label })),
+                            ], onChange: (url) => patchMaterial({ reflectionAtlas: url ? loadTexture(url) : null }) }) }), _jsx(Row, { label: "Reflection level", children: _jsx(NumberField, { value: system.getRendererSettings().reflectionLevel ?? 1, min: 0, step: 0.1, onChange: (v) => patchMaterial({ reflectionLevel: Math.max(0, v) }) }) })] })), _jsx(Row, { label: "Sort mode", children: _jsx(SelectField, { value: system.sortMode, options: [
+                        { value: 'none', label: 'None' },
+                        { value: 'distance', label: 'By distance' },
+                        { value: 'oldestInFront', label: 'Oldest in front' },
+                        { value: 'youngestInFront', label: 'Youngest in front' },
+                    ], 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)) })] }) }))] }));
 }
 function removeBehavior(system, type) {
     const behaviors = system.behaviors;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "babylon.quarks-editor",
-    "version": "0.23.0",
+    "version": "0.24.0",
     "description": "Shuriken-style effect editor for babylon.quarks: headless edit-model core + React module-stack UI",
     "type": "module",
     "main": "./dist/index.js",
@@ -24,7 +24,8 @@
     ],
     "scripts": {
         "clean": "rimraf dist",
-        "build": "npm run clean && tsc -p tsconfig.json"
+        "build": "npm run clean && tsc -p tsconfig.json",
+        "test": "jest"
     },
     "repository": {
         "type": "git",
@@ -59,7 +60,7 @@
         "react-dom": ">=18"
     },
     "devDependencies": {
-        "@babylonjs/materials": "9.6.2",
+        "@babylonjs/materials": "9.31.0",
         "@heroicons/react": "^2.2.0",
         "@tanstack/react-virtual": "^3.14.6",
         "@types/react": "^19.0.0",

package/src/core/material.ts

@@ -7,6 +7,9 @@ export interface RendererMaterialPatch {
     depthWrite?: boolean;
     alphaTest?: number;
     texture?: unknown;
+    /** A 3×2 cube-face atlas mesh particles reflect, or null for none. */
+    reflectionAtlas?: unknown;
+    reflectionLevel?: number;
 }
 
 function isEditableMaterialRecord(material: unknown): material is Record<string, unknown> {
@@ -35,6 +38,12 @@ export function applyRendererMaterial(system: ParticleSystem, patch: RendererMat
     if (patch.texture !== undefined) {
         system.texture = patch.texture as never;
     }
+    if (patch.reflectionAtlas !== undefined) {
+        settings.reflectionAtlas = patch.reflectionAtlas as never;
+    }
+    if (patch.reflectionLevel !== undefined) {
+        settings.reflectionLevel = patch.reflectionLevel;
+    }
 
     const material = system.material;
     if (isEditableMaterialRecord(material)) {
@@ -58,6 +67,12 @@ export function applyRendererMaterial(system: ParticleSystem, patch: RendererMat
             material.texture = patch.texture;
             material.map = patch.texture;
         }
+        if (patch.reflectionAtlas !== undefined) {
+            material.reflectionAtlas = patch.reflectionAtlas;
+        }
+        if (patch.reflectionLevel !== undefined) {
+            material.reflectionLevel = patch.reflectionLevel;
+        }
     }
 
     system.neededToUpdateRender = true;

package/src/core/shapes.ts

@@ -1,9 +1,13 @@
 import type {Mesh} from '@babylonjs/core/Meshes/mesh';
 import type {EmitterShape} from 'babylon.quarks';
 import {
+    BoxEmitFrom,
+    BoxEmitter,
     CircleEmitter,
     ConeEmitter,
+    ConstantValue,
     DonutEmitter,
+    EdgeEmitter,
     EmitterMode,
     GridEmitter,
     HemisphereEmitter,
@@ -22,6 +26,8 @@ export type ShapeType =
     | 'donut'
     | 'rectangle'
     | 'grid'
+    | 'box'
+    | 'edge'
     | 'mesh_surface';
 
 export const SHAPE_TYPES: Array<{value: ShapeType; label: string}> = [
@@ -32,6 +38,8 @@ export const SHAPE_TYPES: Array<{value: ShapeType; label: string}> = [
     {value: 'donut', label: 'Donut'},
     {value: 'rectangle', label: 'Rectangle'},
     {value: 'grid', label: 'Grid'},
+    {value: 'box', label: 'Box'},
+    {value: 'edge', label: 'Edge'},
     {value: 'mesh_surface', label: 'Mesh surface'},
     {value: 'point', label: 'Point'},
 ];
@@ -48,6 +56,12 @@ export interface ShapeParams {
     spread: number;
     column: number;
     row: number;
+    /** Box depth (Z). */
+    depth: number;
+    /** Where a box emits from: its volume, its faces or its edges. */
+    emitFrom: BoxEmitFrom;
+    /** How fast an edge emitter's loop / ping-pong point travels, in lengths per second. */
+    speed: number;
     mesh?: Mesh;
 }
 
@@ -63,6 +77,9 @@ export const DEFAULT_SHAPE_PARAMS: ShapeParams = {
     spread: 0,
     column: 10,
     row: 10,
+    depth: 1,
+    emitFrom: BoxEmitFrom.Volume,
+    speed: 1,
     mesh: undefined,
 };
 
@@ -87,6 +104,9 @@ export function readShapeParams(shape: EmitterShape): ShapeParams {
         height: num('height', DEFAULT_SHAPE_PARAMS.height),
         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,
+        speed: anyShape.speed instanceof ConstantValue ? anyShape.speed.value : DEFAULT_SHAPE_PARAMS.speed,
         mesh: anyShape.mesh as Mesh | undefined,
     };
 }
@@ -102,6 +122,8 @@ export const SHAPE_PARAM_KEYS: {[K in ShapeType]: Array<keyof ShapeParams>} = {
     donut: ['radius', 'arc', 'thickness', 'donutRadius'],
     rectangle: ['width', 'height'],
     grid: ['width', 'height', 'column', 'row'],
+    box: ['width', 'height', 'depth'],
+    edge: ['radius', 'speed'],
     mesh_surface: [],
 };
 
@@ -165,6 +187,20 @@ export function createShape(type: ShapeType, params: ShapeParams): EmitterShape
                 column: params.column,
                 row: params.row,
             });
+        case 'box':
+            return new BoxEmitter({
+                width: params.width,
+                height: params.height,
+                depth: params.depth,
+                emitFrom: params.emitFrom,
+            });
+        case 'edge':
+            return new EdgeEmitter({
+                radius: params.radius,
+                mode: params.mode,
+                spread: params.spread,
+                speed: new ConstantValue(params.speed),
+            });
         case 'mesh_surface':
             return new MeshSurfaceEmitter(params.mesh);
     }

package/src/react/EffectEditor.tsx

@@ -12,8 +12,10 @@ import {
     LimitSpeedOverLifeModule,
     NoiseModule,
     OrbitOverLifeModule,
+    Rotation3DOverLifeModule,
     RotationBySpeedModule,
     RotationOverLifeModule,
+    SequencesModule,
     SizeBySpeedModule,
     SpeedOverLifeModule,
     TextureSheetModule,
@@ -116,6 +118,7 @@ export const EffectEditor = React.memo(function EffectEditor(props: EffectEditor
             <SizeOverLifeModule binding={binding} />
             <SizeBySpeedModule binding={binding} />
             <RotationOverLifeModule binding={binding} />
+            <Rotation3DOverLifeModule binding={binding} />
             <RotationBySpeedModule binding={binding} />
             <NoiseModule binding={binding} />
             <TurbulenceModule binding={binding} />
@@ -123,6 +126,7 @@ export const EffectEditor = React.memo(function EffectEditor(props: EffectEditor
             <WidthOverTrailModule binding={binding} />
             <SubEmittersModule binding={binding} rootBinding={props.binding} />
             <TextureSheetModule binding={binding} />
+            <SequencesModule binding={binding} textureOptions={props.textureOptions} />
             <RendererModule
                 binding={binding}
                 textureOptions={props.textureOptions}

package/src/react/EffectEditorHost.tsx

@@ -93,6 +93,21 @@ import {iconStyle, type HeroIcon} from './icons';
 import type {GeometryData, GeometryOption, TextureOption} from './modules';
 import {buttonStyle, globalEditorStyles, theme} from './theme';
 
+/**
+ * The effect's JSON, with a warning when it points at object URLs: a texture
+ * dropped in from disk lives at a `blob:` URL that dies with the page, so the
+ * exported effect would load without it.
+ */
+function exportEffectJSON(binding: EffectBinding, warn: (message: string) => void): string {
+    const json = binding.exportJSON('EditorEffect');
+    if (json.includes('"blob:')) {
+        warn(
+            'This effect references blob: textures, which will not load after a reload. Re-pick them from a hosted URL.'
+        );
+    }
+    return json;
+}
+
 export interface EffectEditorHostHandle {
     binding: EffectBinding;
     history: EffectHistory;
@@ -2139,7 +2154,7 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
                                     disabled={!binding}
                                     onClick={() => {
                                         if (!binding) return;
-                                        const blob = new Blob([binding.exportJSON('EditorEffect')], {
+                                        const blob = new Blob([exportEffectJSON(binding, showToast)], {
                                             type: 'application/json',
                                         });
                                         const link = document.createElement('a');
@@ -2156,7 +2171,7 @@ export function EffectEditorHost(props: EffectEditorHostProps) {
                                         className="qe-hover"
                                         style={buttonStyle}
                                         disabled={!binding}
-                                        onClick={() => binding && props.onSave!(binding.exportJSON('EditorEffect'))}
+                                        onClick={() => binding && props.onSave!(exportEffectJSON(binding, showToast))}
                                     >
                                         Save
                                     </button>

package/src/react/SubEmittersModule.tsx

@@ -69,6 +69,21 @@ export function SubEmittersModule(props: {binding: EffectBinding; rootBinding: E
                             onChange={(v) => binding.apply(() => (behavior.useVelocityAsBasis = v))}
                         />
                     </Row>
+                    {(['color', 'size', 'rotation', 'lifetime'] as const).map((property) => (
+                        <Row key={property} label={`Inherit ${property}`}>
+                            <CheckboxField
+                                value={behavior.inherit.includes(property)}
+                                onChange={(v) =>
+                                    binding.apply(
+                                        () =>
+                                            (behavior.inherit = v
+                                                ? [...behavior.inherit.filter((p) => p !== property), property]
+                                                : behavior.inherit.filter((p) => p !== property))
+                                    )
+                                }
+                            />
+                        </Row>
+                    ))}
                     <p style={{margin: '8px 0 2px', color: theme.textDim, fontSize: 11.5}}>
                         Spawns “{target?.emitter.name ?? 'sub-emitter'}” — select it in the hierarchy above to edit it.
                     </p>

package/src/react/ValueField.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {ScalarGenerator, ScalarValueState, buildCurve, buildScalar, readPieces, readScalar} from '../core/values';
 import {CurveEditor} from './CurveEditor';
 import {NumberField, Row, SelectField} from './fields';
@@ -6,6 +7,8 @@ import {NumberField, Row, SelectField} from './fields';
  * Unity-like value field: Constant | Random Between Two Constants | Curve,
  * bound to a quarks value generator.
  */
+const captionStyle: React.CSSProperties = {fontSize: 10.5, opacity: 0.6, flex: 'none'};
+
 export function ValueField(props: {
     label: string;
     hint?: string;
@@ -41,8 +44,10 @@ export function ValueField(props: {
             )}
             {state.mode === 'random' && (
                 <Row label="">
-                    <div style={{display: 'flex', gap: 6}}>
+                    <div style={{display: 'flex', gap: 6, alignItems: 'center'}}>
+                        <span style={captionStyle}>min</span>
                         <NumberField value={state.min} min={props.min} onChange={(min) => commit({min})} />
+                        <span style={captionStyle}>max</span>
                         <NumberField value={state.max} min={props.min} onChange={(max) => commit({max})} />
                     </div>
                 </Row>