babylon.quarks-editor 0.26.0 → 0.27.0

package/src/react/modules.tsx

@@ -1,7 +1,19 @@
-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,
+    ScalingMode,
+    SortMode,
+    TrailSettings,
+} from 'babylon.quarks';
 import {
     AxisAngleGenerator,
     BoxEmitFrom,
@@ -17,12 +29,14 @@ 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 {EffectBinding} from '../core/binding.js';
 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,17 +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';
+} 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} 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';
 
 interface ModuleProps {
     binding: EffectBinding;
@@ -105,6 +120,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 (
@@ -205,9 +263,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}
@@ -808,6 +888,8 @@ export interface GeometryOption {
     positions: Float32Array | number[];
     indices?: Uint32Array | number[];
     uvs?: Float32Array | number[];
+    /** A second UV set (glTF `TEXCOORD_1`), what textures on UV channel 1 read on the mesh. */
+    uvs2?: Float32Array | number[];
     normals?: Float32Array | number[];
 }
 
@@ -913,9 +995,15 @@ export function RendererModule({
     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 +1081,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 +1215,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 +1240,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 +1295,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);
@@ -1193,10 +1432,12 @@ export function RendererModule({
                     const applyGeometry = (g: GeometryData) =>
                         binding.apply((s) => {
                             const settings = s.getRendererSettings();
+                            // Positions first: the setter keeps or drops the other sets by vertex count.
+                            s.instancingGeometry = new Float32Array(g.positions);
                             settings.instancingIndices = (g.indices ? new Uint32Array(g.indices) : undefined) as never;
                             settings.instancingUVs = (g.uvs ? new Float32Array(g.uvs) : undefined) as never;
+                            settings.instancingUVs2 = (g.uvs2 ? new Float32Array(g.uvs2) : undefined) as never;
                             settings.instancingNormals = (g.normals ? new Float32Array(g.normals) : undefined) as never;
-                            s.instancingGeometry = new Float32Array(g.positions);
                         });
                     return (
                         <Row label="Geometry">
@@ -1233,6 +1474,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 +1494,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>