babylon.quarks-editor 0.28.0 → 0.29.0

package/CHANGELOG.md

@@ -4,6 +4,27 @@ All notable changes to the `babylon.quarks-editor` package are documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and the project follows the `quarks.core` 0.x version line.
 
+## [0.29.0] — 2026-10-24
+
+### Changed
+
+- **Renderer module** has an "Image processing" switch beside "Apply fog", for
+  `ParticleSystem.applyImageProcessing`.
+
+- **Value fields** offer Random Between Two Curves, with a curve editor for each bound. Switching
+  between Curve and Random Between Two Curves keeps every segment.
+- **Curve modules** (Size, Speed and Limit Speed over Lifetime, Size by Speed, Width over Trail,
+  Texture Sheet frames) have a "Two curves" switch and show both bounds of an imported Random
+  Between Two Curves; an edit used to drop the upper one.
+- **Stop action** in Main and **Ring buffer** (with its loop range) beside Max particles, as
+  Unity's. The editor saves the stop action but does not apply it, so previews replay.
+- **Separate axes** in Limit Speed over Lifetime (with its Space), Size over Lifetime and Size by
+  Speed: a curve for each of X, Y and Z, as Unity's Separate Axes.
+- **Scaling mode** offers Local (the default), Hierarchy and Shape, as Unity's, for world- and
+  local-space systems alike.
+- **Shape module:** a cone's Emit from (Base, Volume) and Length, shown for Volume only, and a
+  grid's Sampling (Random, Sequential).
+
 ## [0.28.0] — 2026-10-23
 
 ### Breaking

package/README.md

@@ -11,7 +11,7 @@ npm install babylon.quarks-editor babylon.quarks @babylonjs/core @babylonjs/mate
 ```
 
 The editor is an ES module package (`import`, not `require`). Its version follows babylon.quarks:
-editor 0.28.x needs babylon.quarks 0.28.x.
+editor 0.29.x needs babylon.quarks 0.29.x.
 
 ## Usage
 

package/dist/core/defaultEffect.js

@@ -19,6 +19,8 @@ export function createDefaultEffect(scene, resolveTexture, textureUrl) {
         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/dist/core/emitterShapeWireframe.js

@@ -2,6 +2,7 @@ import { Color3 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3 } from '@babylonjs/core/Maths/math.vector.js';
 import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder.js';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
+import { ConeEmitFrom } from 'babylon.quarks';
 import { EDITOR_SCENE_NODE_METADATA } from './editorScene.js';
 import './lineShaders.js';
 import { getShapeType, readShapeParams } from './shapes.js';
@@ -103,17 +104,23 @@ function buildEmitterWireframe(system, scene) {
                 lines('wf-cone-spoke-a', [Vector3.Zero(), arcPoint(radius, 0)]);
                 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;
                 const rim = arcPoint(radius, theta);
                 const dir = new Vector3(Math.sin(angle) * Math.cos(theta), 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/dist/core/loadEffect.js

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

package/dist/core/shapes.d.ts

@@ -1,6 +1,6 @@
 import type { Mesh } from '@babylonjs/core/Meshes/mesh.js';
 import type { EmitterShape } from 'babylon.quarks';
-import { BoxEmitFrom, EmitterMode } from 'babylon.quarks';
+import { BoxEmitFrom, ConeEmitFrom, EmitterMode, GridSampling } from 'babylon.quarks';
 /** The emitter shapes the Shape module offers, by the `type` they serialise with. */
 export type ShapeType = 'point' | 'sphere' | 'hemisphere' | 'cone' | 'circle' | 'donut' | 'rectangle' | 'grid' | 'box' | 'edge' | 'mesh_surface';
 /** The Shape module's shape list, in menu order, with the label each shows. */
@@ -41,6 +41,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. */

package/dist/core/shapes.js

@@ -1,4 +1,4 @@
-import { BoxEmitFrom, BoxEmitter, CircleEmitter, ConeEmitter, ConstantValue, DonutEmitter, EdgeEmitter, EmitterMode, GridEmitter, HemisphereEmitter, MeshSurfaceEmitter, PointEmitter, RectangleEmitter, SphereEmitter, } from 'babylon.quarks';
+import { BoxEmitFrom, BoxEmitter, CircleEmitter, ConeEmitFrom, ConeEmitter, ConstantValue, DonutEmitter, EdgeEmitter, EmitterMode, GridEmitter, GridSampling, HemisphereEmitter, MeshSurfaceEmitter, PointEmitter, RectangleEmitter, SphereEmitter, } from 'babylon.quarks';
 /** The Shape module's shape list, in menu order, with the label each shows. */
 export const SHAPE_TYPES = [
     { value: 'cone', label: 'Cone' },
@@ -28,6 +28,9 @@ export const DEFAULT_SHAPE_PARAMS = {
     row: 10,
     depth: 1,
     emitFrom: BoxEmitFrom.Volume,
+    coneEmitFrom: ConeEmitFrom.Base,
+    length: 5,
+    sampling: GridSampling.Random,
     speed: 1,
     mesh: undefined,
 };
@@ -53,7 +56,11 @@ export function readShapeParams(shape) {
         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),
+        // 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),
         speed: anyShape.speed instanceof ConstantValue ? anyShape.speed.value : DEFAULT_SHAPE_PARAMS.speed,
         mesh: anyShape.mesh,
     };
@@ -64,7 +71,7 @@ export const SHAPE_PARAM_KEYS = {
     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'],
@@ -100,6 +107,8 @@ export function createShape(type, params) {
                 arc: params.arc,
                 thickness: params.thickness,
                 angle: params.angle,
+                emitFrom: params.coneEmitFrom,
+                length: params.length,
                 mode: params.mode,
                 spread: params.spread,
             });
@@ -133,6 +142,7 @@ export function createShape(type, params) {
                 height: params.height,
                 column: params.column,
                 row: params.row,
+                sampling: params.sampling,
             });
         case 'box':
             return new BoxEmitter({

package/dist/core/systems.js

@@ -26,6 +26,8 @@ export function createChildSystem(parent, options = {}) {
         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/dist/core/values.d.ts

@@ -1,11 +1,14 @@
 import type { FunctionValueGenerator, RotationGenerator, ValueGenerator, Vector3Generator } from 'babylon.quarks';
-import { PiecewiseBezier } from 'babylon.quarks';
+import { 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 {
     /** Which of the fields below is the value. */
@@ -16,8 +19,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];
 }
 /**
  * What a value field shows for `generator`: its constant, its range or its first curve segment.
@@ -36,10 +41,22 @@ export interface CurvePiece {
     /** The segment's four bezier control values. */
     p: [number, number, number, number];
 }
-/** Reads pieces from a PiecewiseBezier (or synthesizes one segment for other generators). */
-export declare 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 declare function readPieces(generator: AnyGenerator | undefined, second?: boolean): CurvePiece[];
 /** A piecewise bezier from segments, sorted by their start. */
 export declare function buildCurve(pieces: CurvePiece[]): PiecewiseBezier;
+/**
+ * `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 declare function withCurves(generator: AnyGenerator | undefined, mode: 'curve'): PiecewiseBezier;
+export declare function withCurves(generator: AnyGenerator | undefined, mode: 'curves'): RandomBetweenCurves;
+export declare function withCurves(generator: AnyGenerator | undefined, mode: 'curve' | 'curves'): PiecewiseBezier | RandomBetweenCurves;
 /** Splits the piece containing x into two exact halves using Bezier.split. */
 export declare function splitPieces(pieces: CurvePiece[], x: number): CurvePiece[];
 /** Removes the boundary at pieces[index].start by merging with the previous piece. */

package/dist/core/values.js

@@ -1,10 +1,17 @@
-import { Bezier, ConstantValue, IntervalValue, PiecewiseBezier } from 'babylon.quarks';
+import { Bezier, ConstantValue, IntervalValue, PiecewiseBezier, RandomBetweenCurves } from 'babylon.quarks';
 /**
  * What a value field shows for `generator`: its constant, its range or its first curve segment.
  * Anything else, including a missing generator, reads as the constant 1.
  */
 export function readScalar(generator) {
-    const state = { mode: 'constant', value: 1, min: 0.5, max: 1.5, curve: [0, 1, 1, 0] };
+    const state = {
+        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;
@@ -19,14 +26,23 @@ export function readScalar(generator) {
     }
     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) {
+    const first = curve.functions[0]?.[0];
+    return first ? [first.p[0], first.p[1], first.p[2], first.p[3]] : undefined;
+}
 export function buildScalar(state) {
     switch (state.mode) {
         case 'constant':
@@ -35,10 +51,24 @@ export function buildScalar(state) {
             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]]));
     }
 }
-/** Reads pieces from a PiecewiseBezier (or synthesizes one segment for other generators). */
-export function readPieces(generator) {
+/**
+ * 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, second = false) {
+    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,
@@ -53,6 +83,14 @@ export function buildCurve(pieces) {
     const sorted = [...pieces].sort((a, b) => a.start - b.start);
     return new PiecewiseBezier(sorted.map((piece) => [new Bezier(...piece.p), piece.start]));
 }
+export function withCurves(generator, mode) {
+    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, x) {
     const sorted = [...pieces].sort((a, b) => a.start - b.start);

package/dist/react/AxesCurveField.d.ts

@@ -0,0 +1,21 @@
+import { PiecewiseBezier, RandomBetweenCurves, Vector3Function } from 'babylon.quarks';
+import React from 'react';
+import { AnyGenerator } from '../core/values.js';
+/** 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;
+}
+/**
+ * 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 declare function AxesCurveField(props: AxesCurveFieldProps): React.ReactElement;
+export {};

package/dist/react/AxesCurveField.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IntervalValue, RandomBetweenCurves, Vector3Function } from 'babylon.quarks';
+import { withCurves } from '../core/values.js';
+import { CheckboxField, Row } from './fields.js';
+import { LifeCurveField } from './LifeCurveField.js';
+const captionStyle = { fontSize: 10.5, opacity: 0.6, marginTop: 6 };
+/**
+ * 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) {
+    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) {
+    const { generator } = props;
+    const axes = generator instanceof Vector3Function ? generator : undefined;
+    const toggle = (on) => props.onChange(on ? new Vector3Function(curveOf(generator), curveOf(generator), curveOf(generator)) : curveOf(axes?.x));
+    return (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Separate axes", hint: "A curve for each of X, Y and Z, as Unity's Separate Axes.", children: _jsx(CheckboxField, { value: axes !== undefined, onChange: toggle }) }), axes === undefined ? (_jsx(LifeCurveField, { generator: generator, maxValue: props.maxValue, onChange: props.onChange })) : (['x', 'y', 'z'].map((axis) => (_jsxs("div", { children: [_jsx("div", { style: captionStyle, children: axis.toUpperCase() }), _jsx(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)) })] }, axis))))] }));
+}

package/dist/react/LifeCurveField.d.ts

@@ -0,0 +1,18 @@
+import { PiecewiseBezier, RandomBetweenCurves } from 'babylon.quarks';
+import React from 'react';
+import { AnyGenerator } from '../core/values.js';
+/** 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 declare function LifeCurveField(props: LifeCurveFieldProps): React.ReactElement;

package/dist/react/LifeCurveField.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IntervalValue, RandomBetweenCurves } from 'babylon.quarks';
+import { buildCurve, readPieces, withCurves } from '../core/values.js';
+import { CurveEditor } from './CurveEditor.js';
+import { CheckboxField, Row } from './fields.js';
+const captionStyle = { fontSize: 10.5, opacity: 0.6, flex: 'none' };
+/**
+ * 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) {
+    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, upper) => {
+        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 (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Two curves", hint: "Random between two curves: each particle follows its own curve between them.", children: _jsx(CheckboxField, { value: two, onChange: (on) => props.onChange(withCurves(generator, on ? 'curves' : 'curve')) }) }), (two ? ['lower', 'upper'] : ['curve']).map((bound) => (_jsxs("div", { style: { marginTop: 6 }, children: [two && _jsx("span", { style: captionStyle, children: bound }), _jsx(CurveEditor, { pieces: readPieces(generator, bound === 'upper'), maxValue: props.maxValue, onChange: (pieces) => edit(pieces, bound === 'upper') })] }, bound)))] }));
+}

package/dist/react/ValueField.d.ts

@@ -31,8 +31,9 @@ export interface ConstantValueFieldProps extends ValueFieldBaseProps {
     onChange: (generator: ValueGenerator) => void;
 }
 /**
- * Unity-like value field: Constant | Random Between Two Constants | Curve, bound to a quarks value
- * generator. With `curve={false}` it offers only the first two, for settings sampled once.
+ * Unity-like value field: Constant | Random Between Two Constants | Curve | Random Between Two
+ * Curves, bound to a quarks value generator. With `curve={false}` it offers only the first two,
+ * for settings sampled once.
  */
 export declare function ValueField(props: CurveValueFieldProps | ConstantValueFieldProps): React.ReactElement;
 export {};

package/dist/react/ValueField.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { buildCurve, buildScalar, readPieces, readScalar, } from '../core/values.js';
+import { RandomBetweenCurves } from 'babylon.quarks';
+import { buildCurve, buildScalar, readPieces, readScalar, withCurves, } from '../core/values.js';
 import { CurveEditor } from './CurveEditor.js';
 import { NumberField, Row, SelectField } from './fields.js';
 const captionStyle = { fontSize: 10.5, opacity: 0.6, flex: 'none' };
@@ -7,13 +8,15 @@ function isValueGenerator(generator) {
     return generator.type === 'value';
 }
 /**
- * Unity-like value field: Constant | Random Between Two Constants | Curve, bound to a quarks value
- * generator. With `curve={false}` it offers only the first two, for settings sampled once.
+ * Unity-like value field: Constant | Random Between Two Constants | Curve | Random Between Two
+ * Curves, bound to a quarks value generator. With `curve={false}` it offers only the first two,
+ * for settings sampled once.
  */
 export function ValueField(props) {
     const read = readScalar(props.generator);
     // A setting without curves shows a curve it was loaded with as a constant, so an edit replaces it.
-    const state = props.curve === false && read.mode === 'curve' ? { ...read, mode: 'constant' } : read;
+    const curved = read.mode === 'curve' || read.mode === 'curves';
+    const state = props.curve === false && curved ? { ...read, mode: 'constant' } : read;
     const emit = (generator) => {
         if (props.curve !== false) {
             props.onChange(generator);
@@ -26,6 +29,17 @@ export function ValueField(props) {
     return (_jsxs(_Fragment, { children: [_jsx(Row, { label: props.label, hint: props.hint, hintKey: props.hintKey, children: _jsx(SelectField, { value: state.mode, options: [
                         { value: 'constant', label: 'Constant' },
                         { value: 'random', label: 'Random between two' },
-                        ...(props.curve !== false ? [{ value: 'curve', label: 'Curve' }] : []),
-                    ], onChange: (mode) => commit({ mode }) }) }), state.mode === 'constant' && (_jsx(Row, { label: "", children: _jsx(NumberField, { value: state.value, min: props.min, onChange: (value) => commit({ value }) }) })), state.mode === 'random' && (_jsx(Row, { label: "", children: _jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [_jsx("span", { style: captionStyle, children: "min" }), _jsx(NumberField, { value: state.min, min: props.min, onChange: (min) => commit({ min }) }), _jsx("span", { style: captionStyle, children: "max" }), _jsx(NumberField, { value: state.max, min: props.min, onChange: (max) => commit({ max }) })] }) })), state.mode === 'curve' && (_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(props.generator), maxValue: props.curveMax, onChange: (pieces) => emit(buildCurve(pieces)) }) }))] }));
+                        ...(props.curve !== false
+                            ? [
+                                { value: 'curve', label: 'Curve' },
+                                { value: 'curves', label: 'Random between two curves' },
+                            ]
+                            : []),
+                    ], onChange: (mode) => 
+                    // Between one curve and two, every segment is kept; other switches start afresh.
+                    (mode === 'curve' || mode === 'curves') && curved
+                        ? emit(withCurves(props.generator, mode))
+                        : commit({ mode }) }) }), state.mode === 'constant' && (_jsx(Row, { label: "", children: _jsx(NumberField, { value: state.value, min: props.min, onChange: (value) => commit({ value }) }) })), state.mode === 'random' && (_jsx(Row, { label: "", children: _jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [_jsx("span", { style: captionStyle, children: "min" }), _jsx(NumberField, { value: state.min, min: props.min, onChange: (min) => commit({ min }) }), _jsx("span", { style: captionStyle, children: "max" }), _jsx(NumberField, { value: state.max, min: props.min, onChange: (max) => commit({ max }) })] }) })), state.mode === 'curve' && (_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(props.generator), maxValue: props.curveMax, onChange: (pieces) => emit(buildCurve(pieces)) }) })), state.mode === 'curves' && (_jsx(_Fragment, { children: ['lower', 'upper'].map((bound, index) => (_jsxs("div", { style: { marginTop: 6 }, children: [_jsx("span", { style: captionStyle, children: bound }), _jsx(CurveEditor, { pieces: readPieces(props.generator, index === 1), maxValue: props.curveMax, onChange: (pieces) => emit(index === 0
+                                ? new RandomBetweenCurves(buildCurve(pieces), buildCurve(readPieces(props.generator, true)))
+                                : new RandomBetweenCurves(buildCurve(readPieces(props.generator)), buildCurve(pieces))) })] }, bound))) }))] }));
 }

package/dist/react/behaviorModules.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PlusIcon, XMarkIcon } from '@heroicons/react/24/solid';
-import { ApplyCollision, ApplyForce, ApplySequences, AxisAngleGenerator, Bezier, ChangeEmitDirection, ColorBySpeed, ConstantValue, EulerGenerator, ForceOverLife, FrameOverLife, Gradient, GravityForce, InheritVelocity, IntervalValue, LimitSpeedOverLife, Noise, OrbitOverLife, PiecewiseBezier, RandomQuatGenerator, Rotation3DOverLife, RotationBySpeed, RotationOverLife, SizeBySpeed, SpeedOverLife, TextureSequencer, TurbulenceField, Vector3, VelocityOverLife, WidthOverLength, } from 'babylon.quarks';
+import { ApplyCollision, ApplyForce, ApplySequences, AxisAngleGenerator, Bezier, ChangeEmitDirection, ColorBySpeed, ConstantValue, EulerGenerator, ForceOverLife, FrameOverLife, Gradient, GravityForce, InheritVelocity, IntervalValue, LimitSpeedOverLife, Noise, OrbitOverLife, PiecewiseBezier, RandomQuatGenerator, Rotation3DOverLife, RotationBySpeed, RotationOverLife, SizeBySpeed, SpeedOverLife, TextureSequencer, TurbulenceField, Vector3, Vector3Function, VelocityOverLife, WidthOverLength, } from 'babylon.quarks';
 import React from 'react';
 import { buildGradient, DEFAULT_GRADIENT_STOPS, findBehavior, readGradientStops } from '../core/colors.js';
-import { buildCurve, buildScalar, readPieces, readScalar } from '../core/values.js';
-import { CurveEditor } from './CurveEditor.js';
+import { buildScalar, readScalar } from '../core/values.js';
+import { AxesCurveField } from './AxesCurveField.js';
 import { CheckboxField, NumberField, Row, SelectField } from './fields.js';
 import { GradientEditor } from './GradientEditor.js';
 import { iconStyle } from './icons.js';
+import { LifeCurveField } from './LifeCurveField.js';
 import { ModuleSection } from './ModuleSection.js';
 import { theme } from './theme.js';
 import { ValueField } from './ValueField.js';
@@ -30,11 +31,14 @@ function BehaviorModule(props) {
 }
 /** The Speed over Lifetime module (Unity's Speed Modifier): scales speed by a curve over the particle's life. */
 export function SpeedOverLifeModule({ binding }) {
-    return (_jsx(BehaviorModule, { binding: binding, title: "Speed over Lifetime", type: "SpeedOverLife", create: () => new SpeedOverLife(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [1, 0.75, 0.5, 0] })), children: (behavior) => (_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(behavior.speed), maxValue: 2, onChange: (pieces) => binding.apply(() => (behavior.speed = buildCurve(pieces))) }) })) }));
+    return (_jsx(BehaviorModule, { binding: binding, title: "Speed over Lifetime", type: "SpeedOverLife", create: () => new SpeedOverLife(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [1, 0.75, 0.5, 0] })), children: (behavior) => (_jsx("div", { style: { marginTop: 6 }, children: _jsx(LifeCurveField, { generator: behavior.speed, maxValue: 2, onChange: (curve) => binding.apply(() => (behavior.speed = curve)) }) })) }));
 }
 /** The Limit Speed over Lifetime module (Unity's Limit Velocity over Lifetime): caps speed by a curve, with dampening. */
 export function LimitSpeedOverLifeModule({ binding }) {
-    return (_jsx(BehaviorModule, { binding: binding, title: "Limit Speed over Lifetime", type: "LimitSpeedOverLife", create: () => new LimitSpeedOverLife(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [4, 2, 1, 1] }), 0.5), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(behavior.speed), maxValue: 8, onChange: (pieces) => binding.apply(() => (behavior.speed = buildCurve(pieces))) }) }), _jsx(Row, { label: "Dampen", children: _jsx(NumberField, { value: behavior.dampen, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.dampen = Math.min(1, v))) }) })] })) }));
+    return (_jsx(BehaviorModule, { binding: binding, title: "Limit Speed over Lifetime", type: "LimitSpeedOverLife", create: () => new LimitSpeedOverLife(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [4, 2, 1, 1] }), 0.5), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(AxesCurveField, { generator: behavior.speed, maxValue: 8, onChange: (speed) => binding.apply(() => (behavior.speed = speed)) }) }), behavior.speed instanceof Vector3Function && (_jsx(Row, { label: "Space", hint: "The axes each limit is measured along: the emitter's or the world's.", children: _jsx(SelectField, { value: behavior.space, options: [
+                            { value: 'local', label: 'Local' },
+                            { value: 'world', label: 'World' },
+                        ], onChange: (v) => binding.apply(() => (behavior.space = v)) }) })), _jsx(Row, { label: "Dampen", children: _jsx(NumberField, { value: behavior.dampen, min: 0, step: 0.05, onChange: (v) => binding.apply(() => (behavior.dampen = Math.min(1, v))) }) })] })) }));
 }
 /** The Force over Lifetime module (Unity's Force over Lifetime): a constant push per axis. */
 export function ForceOverLifeModule({ binding }) {
@@ -190,7 +194,7 @@ export function ColorBySpeedModule({ binding }) {
 }
 /** The Size by Speed module (Unity's Size by Speed): size over a speed range. */
 export function SizeBySpeedModule({ binding }) {
-    return (_jsx(BehaviorModule, { binding: binding, title: "Size by Speed", type: "SizeBySpeed", create: () => new SizeBySpeed(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [0.5, 0.8, 1.2, 1.5] }), new IntervalValue(0, 5)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(behavior.size), maxValue: 2, onChange: (pieces) => binding.apply(() => (behavior.size = buildCurve(pieces))) }) }), _jsx(SpeedRangeRows, { binding: binding, behavior: behavior })] })) }));
+    return (_jsx(BehaviorModule, { binding: binding, title: "Size by Speed", type: "SizeBySpeed", create: () => new SizeBySpeed(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [0.5, 0.8, 1.2, 1.5] }), new IntervalValue(0, 5)), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(AxesCurveField, { generator: behavior.size, maxValue: 2, onChange: (size) => binding.apply(() => (behavior.size = size)) }) }), _jsx(SpeedRangeRows, { binding: binding, behavior: behavior })] })) }));
 }
 /** The Rotation by Speed module (Unity's Rotation by Speed): spin rate over a speed range. */
 export function RotationBySpeedModule({ binding }) {
@@ -202,7 +206,7 @@ export function OrbitOverLifeModule({ binding }) {
 }
 /** The Width over Trail module (Unity's Trails width over trail): a trail's width along its length. */
 export function WidthOverTrailModule({ binding }) {
-    return (_jsx(BehaviorModule, { binding: binding, title: "Width over Trail", type: "WidthOverLength", create: () => new WidthOverLength(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [1, 0.75, 0.4, 0] })), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(behavior.width), maxValue: 2, onChange: (pieces) => binding.apply(() => (behavior.width = buildCurve(pieces))) }) }), _jsx(Row, { label: "Absolute width", children: _jsx(CheckboxField, { value: behavior.absolute, onChange: (v) => binding.apply(() => (behavior.absolute = v)) }) })] })) }));
+    return (_jsx(BehaviorModule, { binding: binding, title: "Width over Trail", type: "WidthOverLength", create: () => new WidthOverLength(buildScalar({ mode: 'curve', value: 1, min: 0, max: 1, curve: [1, 0.75, 0.4, 0] })), children: (behavior) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: 6 }, children: _jsx(LifeCurveField, { generator: behavior.width, maxValue: 2, onChange: (curve) => binding.apply(() => (behavior.width = curve)) }) }), _jsx(Row, { label: "Absolute width", children: _jsx(CheckboxField, { value: behavior.absolute, onChange: (v) => binding.apply(() => (behavior.absolute = v)) }) })] })) }));
 }
 /** How many of the first frames a start-frame generator picks from: its exclusive upper bound. */
 function startFrameCount(startFrame) {
@@ -276,5 +280,5 @@ export function TextureSheetModule({ binding }) {
                                     if (v && frameBehavior.frameCount <= 0) {
                                         frameBehavior.frameCount = tiles;
                                     }
-                                }) }), frameBehavior.startFrame && (_jsx(NumberField, { value: startFrameCount(frameBehavior.startFrame), min: 1, max: tiles, step: 1, onChange: (v) => binding.apply(() => (frameBehavior.startFrame = new IntervalValue(0, Math.max(1, Math.round(v))))) }))] }), _jsx("div", { style: { marginTop: 6 }, children: _jsx(CurveEditor, { pieces: readPieces(frameBehavior.frame), maxValue: Math.max(1, tiles - 1), onChange: (pieces) => binding.apply(() => (frameBehavior.frame = buildCurve(pieces))) }) })] }))] }));
+                                }) }), frameBehavior.startFrame && (_jsx(NumberField, { value: startFrameCount(frameBehavior.startFrame), min: 1, max: tiles, step: 1, onChange: (v) => binding.apply(() => (frameBehavior.startFrame = new IntervalValue(0, Math.max(1, Math.round(v))))) }))] }), _jsx("div", { style: { marginTop: 6 }, children: _jsx(LifeCurveField, { generator: frameBehavior.frame, maxValue: Math.max(1, tiles - 1), onChange: (curve) => binding.apply(() => (frameBehavior.frame = curve)) }) })] }))] }));
 }

package/dist/react/inspectorHints.js

@@ -31,7 +31,7 @@ const INSPECTOR_HINTS = {
     Duration: 'How long the particle system runs before stopping (non-looping) or one loop cycle.',
     Looping: 'When enabled, the effect restarts from the beginning after duration ends.',
     'World space': 'Simulates in world coordinates so moving the emitter does not drag existing particles.',
-    'Scaling mode': 'What the emitter’s scale does to a world-space system: only the shape and sizes, or speeds and forces too (Unity’s Scaling Mode).',
+    'Scaling mode': 'Which scale reaches the effect (Unity’s Scaling Mode): Local, the emitter’s own; Hierarchy, its parents’ too; Shape, the whole scale on the emission shape alone.',
     Prewarm: 'Simulates the effect once at start so it already looks mid-playback when play begins.',
     'Warm-up time': 'Seconds of the cycle simulated before the first frame of a looping system (Niagara’s Warmup Time); 0 warms up a whole cycle, as Unity does.',
     'Start delay': 'Wait time before emission starts after play or restart.',