babylon.quarks-editor 0.26.0 → 0.28.0

package/src/react/modules.tsx

@@ -1,7 +1,20 @@
-import {Texture} from '@babylonjs/core/Materials/Textures/texture';
-import {Mesh} from '@babylonjs/core/Meshes/mesh';
+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 type {Behavior, CullingMode, MeshLighting, MeshRim, ParticleSystem, SortMode} from 'babylon.quarks';
+import type {
+    Behavior,
+    CullingMode,
+    GradientMapChannel,
+    MeshLighting,
+    MeshRim,
+    ParticleErosionOptions,
+    ParticleSystem,
+    ParticleUVDistortionOptions,
+    RenderFace,
+    ScalingMode,
+    SortMode,
+    TrailSettings,
+} from 'babylon.quarks';
 import {
     AxisAngleGenerator,
     BoxEmitFrom,
@@ -17,12 +30,13 @@ import {
     RandomQuatGenerator,
     RenderMode,
     SizeOverLife,
+    Vector2,
     Vector3,
     Vector3Function,
     Vector4,
+    normalizeTextureUV,
 } from 'babylon.quarks';
-import React, {useMemo, useState} from 'react';
-import {EffectBinding} from '../core/binding';
+import React, {useMemo} from 'react';
 import {
     DEFAULT_GRADIENT_STOPS,
     GradientStop,
@@ -31,9 +45,9 @@ import {
     hexToRgb,
     readGradientStops,
     rgbToHex,
-} from '../core/colors';
-import {applyRendererMaterial, getMaterialLabel} from '../core/material';
-import type {ShapeType} from '../core/shapes';
+} from '../core/colors.js';
+import {applyRendererMaterial, getMaterialLabel} from '../core/material.js';
+import type {ShapeType} from '../core/shapes.js';
 import {
     DEFAULT_SHAPE_PARAMS,
     SHAPE_PARAM_KEYS,
@@ -41,21 +55,18 @@ import {
     createShape,
     getShapeType,
     readShapeParams,
-} from '../core/shapes';
-import {buildCurve, buildScalar, readPieces, readScalar} from '../core/values';
-import {CurveEditor} from './CurveEditor';
-import {GradientEditor} from './GradientEditor';
-import {InspectorInfoIcon} from './InspectorInfoIcon';
-import {ModuleSection} from './ModuleSection';
-import {PromptDialog} from './PromptDialog';
-import {ValueField} from './ValueField';
-import {CheckboxField, NumberField, Row, SelectField} from './fields';
-import {iconStyle} from './icons';
-import {theme} from './theme';
-
-interface ModuleProps {
-    binding: EffectBinding;
-}
+} from '../core/shapes.js';
+import {buildCurve, buildScalar, readPieces, readScalar} from '../core/values.js';
+import {CurveEditor} from './CurveEditor.js';
+import {GradientEditor} from './GradientEditor.js';
+import {InspectorInfoIcon} from './InspectorInfoIcon.js';
+import {ModuleSection, type ModuleProps} from './ModuleSection.js';
+import {TextureSelect} from './TextureSelect.js';
+import {TextureUVField} from './TextureUVField.js';
+import {ValueField} from './ValueField.js';
+import {CheckboxField, NumberField, Row, SelectField} from './fields.js';
+import {iconStyle} from './icons.js';
+import {theme} from './theme.js';
 
 const MESH_QUAD_POSITIONS = new Float32Array([-0.5, -0.5, 0, 0.5, -0.5, 0, 0.5, 0.5, 0, -0.5, 0.5, 0]);
 const MESH_QUAD_INDICES = new Uint32Array([0, 1, 2, 0, 2, 3]);
@@ -105,6 +116,49 @@ const PARAM_LABELS: {[key: string]: string} = {
     speed: 'Speed (lengths/s)',
 };
 
+/** Uppercase group title inside a module, as the Renderer's "Material" heading. */
+function SubHeader(props: {title: string; hint: string}) {
+    return (
+        <div
+            style={{
+                marginTop: 10,
+                marginBottom: 2,
+                fontSize: 11,
+                fontWeight: 600,
+                color: '#7c8db5',
+                textTransform: 'uppercase',
+                letterSpacing: 0.4,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 5,
+            }}
+        >
+            {props.title}
+            <InspectorInfoIcon content={props.hint} size={12} />
+        </div>
+    );
+}
+
+/** Three number inputs editing a Vector3 by value. */
+function AxisField(props: {value: Vector3; onChange: (next: Vector3) => void}) {
+    return (
+        <div style={{display: 'flex', gap: 6}}>
+            {(['x', 'y', 'z'] as const).map((axis) => (
+                <NumberField
+                    key={axis}
+                    value={props.value[axis]}
+                    step={0.1}
+                    onChange={(v) => {
+                        const next = props.value.clone();
+                        next[axis] = v;
+                        props.onChange(next);
+                    }}
+                />
+            ))}
+        </div>
+    );
+}
+
 function ColorInput(props: {value: Vector4; onChange: (next: Vector4) => void}) {
     const {value, onChange} = props;
     return (
@@ -136,18 +190,20 @@ function ColorInput(props: {value: Vector4; onChange: (next: Vector4) => void})
     );
 }
 
+/** The Main module (Unity's main module): duration, looping, start delay, life, speed, size, rotation and colour. */
 export function MainModule({binding}: ModuleProps) {
     const system = binding.system;
     const startColor = system.startColor;
     const colorMode =
         startColor instanceof RandomColor ? 'random' : startColor instanceof ColorRange ? 'range' : 'constant';
-    const twoColors = startColor instanceof RandomColor || startColor instanceof ColorRange;
-    const colorA = twoColors
-        ? (startColor as never as {a: Vector4}).a
+    const twoColor = startColor instanceof RandomColor || startColor instanceof ColorRange ? startColor : null;
+    const colorA = twoColor
+        ? twoColor.a
         : startColor instanceof ConstantColor
           ? startColor.color
           : new Vector4(1, 1, 1, 1);
-    const colorB = twoColors ? (startColor as never as {b: Vector4}).b : new Vector4(1, 0.5, 0.2, 1);
+    const colorB = twoColor ? twoColor.b : new Vector4(1, 0.5, 0.2, 1);
+    const twoColors = twoColor !== null;
     /** The two-colour generator of the current mode. */
     const makeTwoColors = (a: Vector4, b: Vector4) =>
         colorMode === 'range' ? new ColorRange(a, b) : new RandomColor(a, b);
@@ -161,17 +217,17 @@ export function MainModule({binding}: ModuleProps) {
               ? 'euler'
               : isAxisAngle
                 ? 'axisAngle'
-                : readScalar(rotation as never).mode === 'random'
+                : readScalar(rotation).mode === 'random'
                   ? 'random'
                   : 'angle';
     const rotationState = readScalar(
-        rotation instanceof RandomQuatGenerator || isEuler || isAxisAngle ? undefined : (rotation as never)
+        rotation instanceof RandomQuatGenerator || isEuler || isAxisAngle ? undefined : rotation
     );
     const axisAngle = isAxisAngle ? (rotation as AxisAngleGenerator) : undefined;
     const eulerAngles = {
-        x: isEuler ? readScalar((rotation as EulerGenerator).angleX as never).value : 0,
-        y: isEuler ? readScalar((rotation as EulerGenerator).angleY as never).value : 0,
-        z: isEuler ? readScalar((rotation as EulerGenerator).angleZ as never).value : 0,
+        x: isEuler ? readScalar((rotation as EulerGenerator).angleX).value : 0,
+        y: isEuler ? readScalar((rotation as EulerGenerator).angleY).value : 0,
+        z: isEuler ? readScalar((rotation as EulerGenerator).angleZ).value : 0,
     };
     const setEulerAxis = (axis: 'x' | 'y' | 'z', v: number) =>
         binding.apply((s) => {
@@ -182,8 +238,7 @@ export function MainModule({binding}: ModuleProps) {
                 axis === 'z' ? new ConstantValue(v) : cur.angleZ
             );
         });
-    const startSize = system.startSize as unknown as {type?: string; x?: never; y?: never; z?: never};
-    const size3D = startSize.type === 'vec3function';
+    const startSize3D = system.startSize instanceof Vector3Function ? system.startSize : null;
     const colorGenMode =
         startColor instanceof RandomColorBetweenGradient
             ? 'gradient2'
@@ -205,9 +260,31 @@ export function MainModule({binding}: ModuleProps) {
             <Row label="World space">
                 <CheckboxField value={system.worldSpace} onChange={(v) => binding.apply((s) => (s.worldSpace = v))} />
             </Row>
+            {system.worldSpace && (
+                <Row label="Scaling mode">
+                    <SelectField<ScalingMode>
+                        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))}
+                    />
+                </Row>
+            )}
             <Row label="Prewarm">
                 <CheckboxField value={system.prewarm} onChange={(v) => binding.apply((s) => (s.prewarm = v))} />
             </Row>
+            {system.prewarm && (
+                <Row label="Warm-up time">
+                    <NumberField
+                        value={system.prewarmTime}
+                        step={0.1}
+                        min={0}
+                        onChange={(v) => binding.apply((s) => (s.prewarmTime = Math.max(0, v)))}
+                    />
+                </Row>
+            )}
             <Row label="Playback speed">
                 <NumberField
                     value={system.playbackSpeed}
@@ -269,50 +346,50 @@ export function MainModule({binding}: ModuleProps) {
             />
             <Row label="Start size">
                 <SelectField
-                    value={size3D ? '3d' : 'uniform'}
+                    value={startSize3D ? '3d' : 'uniform'}
                     options={[
                         {value: 'uniform', label: 'Uniform'},
                         {value: '3d', label: '3D (per axis)'},
                     ]}
                     onChange={(mode) =>
                         binding.apply((s) => {
-                            const cur = s.startSize as never as {clone: () => never; x?: never};
-                            if (mode === '3d') {
+                            const cur = s.startSize;
+                            if (mode === '3d' && cur.type !== 'vec3function') {
                                 // Seed all three axes from the current uniform generator.
                                 s.startSize = new Vector3Function(cur.clone(), cur.clone(), cur.clone());
-                            } else {
+                            } else if (mode !== '3d' && cur instanceof Vector3Function) {
                                 // Collapse back to the X-axis generator.
-                                s.startSize = (s.startSize as never as {x: never}).x;
+                                s.startSize = cur.x;
                             }
                         })
                     }
                 />
             </Row>
-            {!size3D && (
+            {!startSize3D && (
                 <ValueField
                     label=""
-                    generator={system.startSize as never}
+                    generator={system.startSize}
                     min={0}
                     curveMax={5}
                     onChange={(g) => binding.apply((s) => (s.startSize = g))}
                 />
             )}
-            {size3D && (
+            {startSize3D && (
                 <>
                     {(['x', 'y', 'z'] as const).map((axis) => (
                         <ValueField
                             key={axis}
                             label={axis.toUpperCase()}
-                            generator={startSize[axis] as never}
+                            generator={startSize3D[axis]}
                             min={0}
                             curveMax={5}
                             onChange={(g) =>
                                 binding.apply((s) => {
                                     const cur = s.startSize as Vector3Function;
                                     s.startSize = new Vector3Function(
-                                        axis === 'x' ? (g as never) : cur.x,
-                                        axis === 'y' ? (g as never) : cur.y,
-                                        axis === 'z' ? (g as never) : cur.z
+                                        axis === 'x' ? g : cur.x,
+                                        axis === 'y' ? g : cur.y,
+                                        axis === 'z' ? g : cur.z
                                     );
                                 })
                             }
@@ -505,6 +582,7 @@ export function MainModule({binding}: ModuleProps) {
     );
 }
 
+/** The Emission module (Unity's Emission): rate over time and distance, and bursts. */
 export function EmissionModule({binding}: ModuleProps) {
     const system = binding.system;
     const bursts = system.emissionBursts ?? [];
@@ -554,7 +632,7 @@ export function EmissionModule({binding}: ModuleProps) {
                         </Row>
                         <Row label="Count">
                             <NumberField
-                                value={readScalar(burst.count as never).value}
+                                value={readScalar(burst.count).value}
                                 min={0}
                                 step={1}
                                 onChange={(count) =>
@@ -627,6 +705,7 @@ export function EmissionModule({binding}: ModuleProps) {
 // first texture" bug: a control that looks live but does nothing.
 const SHAPES_WITHOUT_MODE_SPREAD = new Set<ShapeType>(['point', 'grid', 'box', 'mesh_surface']);
 
+/** The Shape module (Unity's Shape): the emitter shape and its settings. */
 export function ShapeModule({binding}: ModuleProps) {
     const system = binding.system;
     const type = getShapeType(system.emitterShape);
@@ -726,12 +805,11 @@ export function ShapeModule({binding}: ModuleProps) {
     );
 }
 
+/** The Size over Lifetime module (Unity's Size over Lifetime): size by a curve over the particle's life. */
 export function SizeOverLifeModule({binding}: ModuleProps) {
     const system = binding.system;
     const behavior = findBehavior<SizeOverLife>(system.behaviors, 'SizeOverLife');
-    const curve = behavior
-        ? readScalar(behavior.size as never).curve
-        : ([0.2, 1, 1, 0.4] as [number, number, number, number]);
+    const curve = behavior ? readScalar(behavior.size).curve : ([0.2, 1, 1, 0.4] as [number, number, number, number]);
     return (
         <ModuleSection
             title="Size over Lifetime"
@@ -740,21 +818,19 @@ export function SizeOverLifeModule({binding}: ModuleProps) {
                 binding.apply((s) => {
                     removeBehavior(s, 'SizeOverLife');
                     if (enabled) {
-                        s.addBehavior(
-                            new SizeOverLife(buildScalar({mode: 'curve', value: 1, min: 0, max: 1, curve}) as never)
-                        );
+                        s.addBehavior(new SizeOverLife(buildScalar({mode: 'curve', value: 1, min: 0, max: 1, curve})));
                     }
                 })
             }
         >
             <div style={{marginTop: 6}}>
                 <CurveEditor
-                    pieces={behavior ? readPieces(behavior.size as never) : [{start: 0, p: curve}]}
+                    pieces={behavior ? readPieces(behavior.size) : [{start: 0, p: curve}]}
                     maxValue={2}
                     onChange={(pieces) =>
                         binding.apply((s) => {
                             removeBehavior(s, 'SizeOverLife');
-                            s.addBehavior(new SizeOverLife(buildCurve(pieces) as never));
+                            s.addBehavior(new SizeOverLife(buildCurve(pieces)));
                         })
                     }
                 />
@@ -763,6 +839,7 @@ export function SizeOverLifeModule({binding}: ModuleProps) {
     );
 }
 
+/** The Color over Lifetime module (Unity's Color over Lifetime): a gradient over the particle's life. */
 export function ColorOverLifeModule({binding}: ModuleProps) {
     const system = binding.system;
     const behavior = findBehavior<ColorOverLife>(system.behaviors, 'ColorOverLife');
@@ -793,8 +870,11 @@ export function ColorOverLifeModule({binding}: ModuleProps) {
     );
 }
 
+/** A texture preset the host offers in the Renderer module's texture menus. */
 export interface TextureOption {
+    /** Its label in the menu. */
     label: string;
+    /** The URL the host's texture loader receives. */
     url: string;
 }
 
@@ -804,10 +884,17 @@ export interface TextureOption {
  * them into the system's instancing geometry.
  */
 export interface GeometryOption {
+    /** Its label in the menu. */
     label: string;
+    /** Vertex positions, three values per vertex. */
     positions: Float32Array | number[];
+    /** Triangle indices; without them the vertices are drawn in sequence. */
     indices?: Uint32Array | number[];
+    /** The first UV set, two values per vertex; without it the mesh samples UV (0, 0). */
     uvs?: Float32Array | number[];
+    /** A second UV set (glTF `TEXCOORD_1`), what textures on UV channel 1 read on the mesh. */
+    uvs2?: Float32Array | number[];
+    /** Vertex normals, three values per vertex; without them lighting uses +Z. */
     normals?: Float32Array | number[];
 }
 
@@ -900,6 +987,7 @@ function MeshPreview({
     );
 }
 
+/** The Renderer module (Unity's Renderer): render mode, material, textures, sorting and mesh settings. */
 export function RendererModule({
     binding,
     textureOptions,
@@ -909,13 +997,19 @@ export function RendererModule({
 }: ModuleProps & {
     textureOptions?: TextureOption[];
     geometryOptions?: GeometryOption[];
-    resolveTexture?: (url: string) => unknown;
+    resolveTexture?: (url: string) => Texture | null | undefined;
     resolveGeometry?: (file: File) => Promise<GeometryData>;
 }) {
     const system = binding.system;
-    const currentTextureUrl = (system.texture as {url?: string} | null)?.url ?? '';
-    const [promptingTextureUrl, setPromptingTextureUrl] = useState(false);
     const materialLabel = getMaterialLabel(system.material);
+    const isMesh = system.renderMode === RenderMode.Mesh;
+    const gradientMap = system.gradientMap;
+    const erosion = system.erosion;
+    const distortion = system.uvDistortion;
+    const patchErosion = (patch: ParticleErosionOptions) =>
+        binding.apply((s) => (s.erosion = {...s.erosion, ...patch}));
+    const patchDistortion = (patch: ParticleUVDistortionOptions) =>
+        binding.apply((s) => (s.uvDistortion = {...s.uvDistortion, ...patch}));
     const loadTexture = useMemo(() => {
         return (url: string) => {
             if (resolveTexture) {
@@ -993,18 +1087,112 @@ export function RendererModule({
                             />
                         </Row>
                     ))}
-                    <Row label="Head width scale">
+                    <Row label="Tessellation">
+                        <NumberField
+                            value={(system.rendererEmitterSettings as {tessellation?: number}).tessellation ?? 0}
+                            min={0}
+                            max={16}
+                            step={1}
+                            onChange={(v) =>
+                                binding.apply((s) => {
+                                    (s.rendererEmitterSettings as {tessellation?: number}).tessellation = Math.round(v);
+                                })
+                            }
+                        />
+                    </Row>
+                    <Row label="Curve tension">
+                        <NumberField
+                            value={(system.rendererEmitterSettings as {curveTension?: number}).curveTension ?? 0}
+                            min={0}
+                            max={1}
+                            step={0.05}
+                            onChange={(v) =>
+                                binding.apply((s) => {
+                                    (s.rendererEmitterSettings as {curveTension?: number}).curveTension = v;
+                                })
+                            }
+                        />
+                    </Row>
+                    <Row label="Texture mode">
+                        <SelectField
+                            value={(system.rendererEmitterSettings as TrailSettings).textureMode ?? 'stretch'}
+                            options={[
+                                {value: 'stretch', label: 'Stretch (once, by distance)'},
+                                {value: 'distributePerSegment', label: 'Distribute per segment'},
+                                {value: 'tile', label: 'Tile (per world unit)'},
+                                {value: 'repeatPerSegment', label: 'Repeat per segment'},
+                            ]}
+                            onChange={(mode) =>
+                                binding.apply((s) => {
+                                    (s.rendererEmitterSettings as TrailSettings).textureMode =
+                                        mode === 'stretch' ? undefined : mode;
+                                })
+                            }
+                        />
+                    </Row>
+                    <Row label="Texture scale">
+                        <NumberField
+                            value={(system.rendererEmitterSettings as TrailSettings).textureScale ?? 1}
+                            min={0.01}
+                            step={0.1}
+                            onChange={(v) =>
+                                binding.apply((s) => {
+                                    (s.rendererEmitterSettings as TrailSettings).textureScale = v === 1 ? undefined : v;
+                                })
+                            }
+                        />
+                    </Row>
+                    <Row label="Min vertex distance">
                         <NumberField
-                            value={(system.rendererEmitterSettings as {headWidthScale?: number}).headWidthScale ?? 1}
+                            value={(system.rendererEmitterSettings as TrailSettings).minVertexDistance ?? 0}
+                            min={0}
+                            step={0.05}
+                            onChange={(v) =>
+                                binding.apply((s) => {
+                                    (s.rendererEmitterSettings as TrailSettings).minVertexDistance =
+                                        v > 0 ? v : undefined;
+                                })
+                            }
+                        />
+                    </Row>
+                    <Row label="Trail time">
+                        <NumberField
+                            value={(system.rendererEmitterSettings as TrailSettings).lifetime ?? 0}
                             min={0}
                             step={0.1}
                             onChange={(v) =>
                                 binding.apply((s) => {
-                                    (s.rendererEmitterSettings as {headWidthScale?: number}).headWidthScale = v;
+                                    (s.rendererEmitterSettings as TrailSettings).lifetime = v > 0 ? v : undefined;
+                                })
+                            }
+                        />
+                    </Row>
+                    <Row label="Swept trail">
+                        <CheckboxField
+                            value={!!(system.rendererEmitterSettings as TrailSettings).sideAxis}
+                            onChange={(v) =>
+                                binding.apply((s) => {
+                                    (s.rendererEmitterSettings as TrailSettings).sideAxis = v
+                                        ? new Vector3(0, 1, 0)
+                                        : undefined;
                                 })
                             }
                         />
                     </Row>
+                    {(system.rendererEmitterSettings as TrailSettings).sideAxis && (
+                        <Row label="Side axis">
+                            <AxisField
+                                value={(system.rendererEmitterSettings as TrailSettings).sideAxis!}
+                                onChange={(axis) =>
+                                    binding.apply((s) => {
+                                        // The axis's length scales the width: keep it a unit vector.
+                                        (s.rendererEmitterSettings as TrailSettings).sideAxis =
+                                            axis.length() > 0 ? axis.normalize() : axis;
+                                    })
+                                }
+                            />
+                        </Row>
+                    )}
                 </>
             )}
             {system.renderMode === RenderMode.StretchedBillBoard && (
@@ -1033,26 +1221,7 @@ export function RendererModule({
                     </Row>
                 </>
             )}
-            <div
-                style={{
-                    marginTop: 10,
-                    marginBottom: 2,
-                    fontSize: 11,
-                    fontWeight: 600,
-                    color: '#7c8db5',
-                    textTransform: 'uppercase',
-                    letterSpacing: 0.4,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 5,
-                }}
-            >
-                Material
-                <InspectorInfoIcon
-                    content="Shader and blending settings applied to the particle sprite or mesh."
-                    size={12}
-                />
-            </div>
+            <SubHeader title="Material" hint="Shader and blending settings applied to the particle sprite or mesh." />
             {materialLabel ? (
                 <Row label="Source">
                     <div style={{fontSize: 12, color: theme.textDim, lineHeight: 1.45}}>{materialLabel}</div>
@@ -1077,93 +1246,41 @@ export function RendererModule({
                 />
             </Row>
             <Row label="Texture">
-                <SelectField
-                    value={
-                        !currentTextureUrl
-                            ? '__none'
-                            : (textureOptions ?? []).some((o) => o.url === currentTextureUrl)
-                              ? currentTextureUrl
-                              : '__current'
-                    }
-                    options={[
-                        {value: '__none', label: '(none)'},
-                        ...(currentTextureUrl && !(textureOptions ?? []).some((o) => o.url === currentTextureUrl)
-                            ? [{value: '__current', label: `(current) ${currentTextureUrl.slice(-24)}`}]
-                            : []),
-                        ...(textureOptions ?? []).map((o) => ({value: o.url, label: o.label})),
-                        {value: '__url', label: 'Custom URL…'},
-                        {value: '__file', label: 'Load from file…'},
-                    ]}
-                    onChange={(url) => {
-                        if (url === '__current') {
-                            return;
-                        }
-                        if (url === '__none') {
-                            patchMaterial({texture: null});
-                            return;
-                        }
-                        if (url === '__url') {
-                            setPromptingTextureUrl(true);
-                            return;
-                        }
-                        if (url === '__file') {
-                            const input = document.createElement('input');
-                            input.type = 'file';
-                            input.accept = 'image/*';
-                            input.onchange = () => {
-                                const file = input.files?.[0];
-                                if (!file) {
-                                    return;
-                                }
-                                const reader = new FileReader();
-                                reader.onload = () => {
-                                    const texture = loadTexture(reader.result as string);
-                                    if (texture) {
-                                        patchMaterial({texture});
-                                    }
-                                };
-                                reader.readAsDataURL(file);
-                            };
-                            input.click();
-                            return;
-                        }
-                        const texture = loadTexture(url);
-                        if (texture) {
-                            patchMaterial({texture});
-                        }
-                    }}
+                <TextureSelect
+                    value={system.texture}
+                    textureOptions={textureOptions}
+                    loadTexture={loadTexture}
+                    onChange={(texture) => patchMaterial({texture})}
+                    preview
                 />
-                {promptingTextureUrl && (
-                    <PromptDialog
-                        title="Texture URL"
-                        defaultValue={currentTextureUrl}
-                        placeholder="https://…"
-                        onSubmit={(url) => {
-                            const texture = loadTexture(url);
-                            if (texture) {
-                                patchMaterial({texture});
-                            }
-                            setPromptingTextureUrl(false);
-                        }}
-                        onCancel={() => setPromptingTextureUrl(false)}
-                    />
-                )}
-                {currentTextureUrl && (
-                    <img
-                        src={currentTextureUrl}
-                        alt="texture preview"
-                        style={{
-                            width: 64,
-                            height: 64,
-                            marginTop: 6,
-                            objectFit: 'contain',
-                            borderRadius: 6,
-                            border: '1px solid #2b3761',
-                            background: 'repeating-conic-gradient(#2a3252 0% 25%, #171d33 0% 50%) 0 0 / 12px 12px',
-                        }}
-                    />
-                )}
             </Row>
+            <TextureUVField
+                labelPrefix="Map "
+                value={system.mapUV ?? normalizeTextureUV(undefined)}
+                onChange={(uv) => binding.apply((s) => (s.mapUV = uv))}
+            />
+            {!isMesh && (
+                <Row label="Flip U/V">
+                    <div style={{display: 'flex', gap: 6}}>
+                        {(['x', 'y'] as const).map((axis) => (
+                            <NumberField
+                                key={axis}
+                                value={system.flip?.[axis] ?? 0}
+                                min={0}
+                                max={1}
+                                step={0.1}
+                                onChange={(v) =>
+                                    binding.apply((s) => {
+                                        const next = s.flip?.clone() ?? new Vector2(0, 0);
+                                        next[axis] = Math.min(1, Math.max(0, v));
+                                        s.flip = next.x === 0 && next.y === 0 ? undefined : next;
+                                    })
+                                }
+                            />
+                        ))}
+                    </div>
+                </Row>
+            )}
             <Row label="Alpha test">
                 <NumberField
                     value={system.getRendererSettings().materialAlphaTest ?? 0}
@@ -1184,6 +1301,134 @@ export function RendererModule({
                     onChange={(v) => patchMaterial({depthTest: v})}
                 />
             </Row>
+            <SubHeader
+                title="Gradient map"
+                hint="Recolours the map through a colour ramp: one channel of the map, or its luminance, picks a colour along the ramp."
+            />
+            <Row label="Ramp">
+                <TextureSelect
+                    value={gradientMap?.ramp}
+                    textureOptions={textureOptions}
+                    loadTexture={loadTexture}
+                    promptTitle="Ramp texture URL"
+                    onChange={(ramp) =>
+                        binding.apply((s) => (s.gradientMap = ramp ? {...s.gradientMap, ramp} : undefined))
+                    }
+                />
+            </Row>
+            {gradientMap && (
+                <Row label="Ramp channel">
+                    <SelectField<GradientMapChannel>
+                        value={gradientMap.channel}
+                        options={[
+                            {value: 'r', label: 'Red'},
+                            {value: 'g', label: 'Green'},
+                            {value: 'b', label: 'Blue'},
+                            {value: 'a', label: 'Alpha (ramp alpha replaces)'},
+                            {value: 'luminance', label: 'Luminance'},
+                        ]}
+                        onChange={(channel) => binding.apply((s) => (s.gradientMap = {...s.gradientMap, channel}))}
+                    />
+                </Row>
+            )}
+            <SubHeader
+                title="Erosion"
+                hint="Alpha decides how much of the shape is left instead of how transparent it is, so a fading alpha dissolves or wipes the shape away."
+            />
+            <Row label="Erosion">
+                <CheckboxField
+                    value={!!erosion}
+                    onChange={(v) => binding.apply((s) => (s.erosion = v ? {} : undefined))}
+                />
+            </Row>
+            {erosion && (
+                <>
+                    <Row label="Erosion mask">
+                        <TextureSelect
+                            value={erosion.mask}
+                            textureOptions={textureOptions}
+                            loadTexture={loadTexture}
+                            noneLabel="(map alpha)"
+                            promptTitle="Erosion mask URL"
+                            onChange={(mask) => patchErosion({mask})}
+                        />
+                    </Row>
+                    {erosion.mask && (
+                        <TextureUVField
+                            labelPrefix="Mask "
+                            value={erosion.maskUV}
+                            onChange={(maskUV) => patchErosion({maskUV})}
+                        />
+                    )}
+                    <Row label="Softness">
+                        <NumberField
+                            value={erosion.softness}
+                            min={0.0001}
+                            step={0.01}
+                            onChange={(softness) => patchErosion({softness})}
+                        />
+                    </Row>
+                    <Row label="Edge width">
+                        <NumberField
+                            value={erosion.edgeWidth}
+                            min={0}
+                            step={0.01}
+                            onChange={(edgeWidth) => patchErosion({edgeWidth})}
+                        />
+                    </Row>
+                    {(erosion.edgeWidth > 0 || erosion.edgeColor.some((c) => c !== 1)) && (
+                        <Row label="Edge color">
+                            <div style={{display: 'flex', gap: 6}}>
+                                {[0, 1, 2].map((channel) => (
+                                    <NumberField
+                                        key={channel}
+                                        value={erosion.edgeColor[channel]}
+                                        min={0}
+                                        step={0.05}
+                                        onChange={(v) => {
+                                            const edgeColor: [number, number, number] = [...erosion.edgeColor];
+                                            edgeColor[channel] = v;
+                                            patchErosion({edgeColor});
+                                        }}
+                                    />
+                                ))}
+                            </div>
+                        </Row>
+                    )}
+                </>
+            )}
+            <SubHeader
+                title="UV distortion"
+                hint="A scrolling noise texture pushes the map's UV about, for heat shimmer and licking, breathing shapes."
+            />
+            <Row label="Noise texture">
+                <TextureSelect
+                    value={distortion?.map}
+                    textureOptions={textureOptions}
+                    loadTexture={loadTexture}
+                    promptTitle="Distortion noise URL"
+                    onChange={(map) =>
+                        binding.apply((s) => (s.uvDistortion = map ? {...s.uvDistortion, map} : undefined))
+                    }
+                />
+            </Row>
+            {distortion && (
+                <>
+                    <Row label="Distortion strength">
+                        <NumberField
+                            value={distortion.strength}
+                            min={0}
+                            step={0.01}
+                            onChange={(strength) => patchDistortion({strength})}
+                        />
+                    </Row>
+                    <TextureUVField
+                        labelPrefix="Noise "
+                        value={distortion.mapUV}
+                        onChange={(mapUV) => patchDistortion({mapUV})}
+                    />
+                </>
+            )}
             {system.renderMode === RenderMode.Mesh &&
                 (() => {
                     const preset = detectGeometryPreset(system.instancingGeometry);
@@ -1192,11 +1437,20 @@ export function RendererModule({
                     const hostGeometry = geometryOptions ?? [];
                     const applyGeometry = (g: GeometryData) =>
                         binding.apply((s) => {
+                            // The previous mesh's sets go first, so the positions setter gives
+                            // this mesh the library's own fallback UVs and normals; then every set
+                            // this mesh has. An unindexed mesh draws its vertices in sequence.
                             const settings = s.getRendererSettings();
-                            settings.instancingIndices = (g.indices ? new Uint32Array(g.indices) : undefined) as never;
-                            settings.instancingUVs = (g.uvs ? new Float32Array(g.uvs) : undefined) as never;
-                            settings.instancingNormals = (g.normals ? new Float32Array(g.normals) : undefined) as never;
+                            settings.instancingUVs = undefined;
+                            settings.instancingUVs2 = undefined;
+                            settings.instancingNormals = undefined;
                             s.instancingGeometry = new Float32Array(g.positions);
+                            s.instancingIndices = g.indices
+                                ? new Uint32Array(g.indices)
+                                : Uint32Array.from({length: g.positions.length / 3}, (_, i) => i);
+                            if (g.uvs) s.instancingUVs = new Float32Array(g.uvs);
+                            if (g.uvs2) s.instancingUVs2 = new Float32Array(g.uvs2);
+                            if (g.normals) settings.instancingNormals = new Float32Array(g.normals);
                         });
                     return (
                         <Row label="Geometry">
@@ -1233,6 +1487,7 @@ export function RendererModule({
                                         }
                                         binding.apply((s) => {
                                             const settings = s.getRendererSettings();
+                                            settings.instancingUVs2 = undefined;
                                             if (next === 'cube') {
                                                 settings.instancingIndices = MESH_CUBE_INDICES;
                                                 settings.instancingUVs = undefined;
@@ -1252,7 +1507,9 @@ export function RendererModule({
                                 />
                                 {preset === 'custom' && (
                                     <span style={{fontSize: 10.5, color: '#9eb9ff'}}>
-                                        {vertexCount} verts / {triangleCount} tris — picking a preset replaces this mesh
+                                        {vertexCount} verts / {triangleCount} tris
+                                        {system.getRendererSettings().instancingUVs2 ? ' / 2 UV sets' : ''} — picking a
+                                        preset replaces this mesh
                                     </span>
                                 )}
                             </div>
@@ -1414,6 +1671,19 @@ export function RendererModule({
                     </Row>
                 </>
             )}
+            {isMesh && (
+                <Row label="Render face">
+                    <SelectField
+                        value={system.renderFace}
+                        options={[
+                            {value: 'both', label: 'Both'},
+                            {value: 'front', label: 'Front'},
+                            {value: 'back', label: 'Back'},
+                        ]}
+                        onChange={(face) => binding.apply((s) => (s.renderFace = face as RenderFace))}
+                    />
+                </Row>
+            )}
             <Row label="Sort mode">
                 <SelectField
                     value={system.sortMode}