babylon.quarks 0.24.0 → 0.25.0

package/src/SpriteBatch.ts

@@ -18,6 +18,7 @@ import {
 } from 'quarks.core';
 import {VFXBatchSettings} from './BatchedRenderer';
 import {gather, sortByKey, SortScratch} from './instanceSort';
+import type {ParticleSystem} from './ParticleSystem';
 import local_particle_physics_vert from './shaders/local_particle_physics_vert.glsl';
 import local_particle_physics_vert_wgsl from './shaders/local_particle_physics_vert.wgsl';
 import particle_frag from './shaders/particle_frag.glsl';
@@ -138,7 +139,7 @@ export class SpriteBatch extends VFXBatch {
         }
         this.mesh.setVerticesBuffer(this.rotationVB);
 
-        if (this.settings.renderMode === RenderMode.StretchedBillBoard) {
+        if (SpriteBatch.drawsAlongVelocity(this.settings.renderMode)) {
             this.velocityBuffer = new Float32Array(this.maxParticles * 4);
             this.velocityVB = new VertexBuffer(engine, this.velocityBuffer, 'velocity', true, false, 4, true);
             this.mesh.setVerticesBuffer(this.velocityVB);
@@ -276,7 +277,7 @@ export class SpriteBatch extends VFXBatch {
         if (this.settings.renderMode === RenderMode.Mesh) {
             vertexShader = {glsl: local_particle_physics_vert, wgsl: local_particle_physics_vert_wgsl};
             fragmentShader = {glsl: particle_physics_frag, wgsl: particle_physics_frag_wgsl};
-        } else if (this.settings.renderMode === RenderMode.StretchedBillBoard) {
+        } else if (SpriteBatch.drawsAlongVelocity(this.settings.renderMode)) {
             vertexShader = {glsl: stretched_bb_particle_vert, wgsl: stretched_bb_particle_vert_wgsl};
             fragmentShader = {glsl: particle_frag, wgsl: particle_frag_wgsl};
         } else {
@@ -322,6 +323,9 @@ export class SpriteBatch extends VFXBatch {
         if (this.settings.renderMode === RenderMode.HorizontalBillBoard) {
             defines.push('HORIZONTAL');
         }
+        if (this.settings.renderMode === RenderMode.Beam) {
+            defines.push('BEAM');
+        }
         const pivot = SpriteBatch.takesPivotAndFlip(this.settings.renderMode) ? this.settings.pivot : undefined;
         if (pivot) {
             defines.push('PIVOT');
@@ -344,6 +348,7 @@ export class SpriteBatch extends VFXBatch {
             }
         }
         const needsEyePosition = useEnvAtlas || !!rim;
+        defines.push(...this.surfaceDefines());
 
         const shaderLanguage = shaderLanguageFor(this.scene.getEngine());
         registerShaders(shaderName, vertexShader, fragmentShader, shaderLanguage);
@@ -352,7 +357,7 @@ export class SpriteBatch extends VFXBatch {
         if (this.settings.renderMode === RenderMode.Mesh) {
             attributes.push('normal');
         }
-        if (this.settings.renderMode === RenderMode.StretchedBillBoard) {
+        if (SpriteBatch.drawsAlongVelocity(this.settings.renderMode)) {
             attributes.push('velocity');
         }
 
@@ -377,7 +382,8 @@ export class SpriteBatch extends VFXBatch {
             uniforms.push('rimColor');
             uniforms.push('rimParams');
         }
-        if (this.settings.renderMode === RenderMode.StretchedBillBoard) {
+        this.surfaceUniforms(uniforms, samplers);
+        if (SpriteBatch.drawsAlongVelocity(this.settings.renderMode)) {
             uniforms.push('speedFactor');
         }
         if (this.settings.softParticles) {
@@ -441,7 +447,7 @@ export class SpriteBatch extends VFXBatch {
             mat.setFloat('tileCountX', this.settings.uTileCount);
             mat.setFloat('tileCountY', this.settings.vTileCount);
         }
-        if (this.settings.renderMode === RenderMode.StretchedBillBoard) {
+        if (SpriteBatch.drawsAlongVelocity(this.settings.renderMode)) {
             mat.setFloat('speedFactor', this.settings.softNearFade > 0 ? this.settings.softNearFade : 1.0);
         }
         if (this.settings.softParticles) {
@@ -491,6 +497,7 @@ export class SpriteBatch extends VFXBatch {
         }
 
         this.bindFog(mat);
+        this.bindSurface(mat);
         mat.backFaceCulling = false;
 
         if (this.settings.materialTransparent) {
@@ -584,6 +591,8 @@ export class SpriteBatch extends VFXBatch {
         const renderMode = this.settings.renderMode;
         const isMeshRender = renderMode === RenderMode.Mesh;
         const isStretchedRender = renderMode === RenderMode.StretchedBillBoard;
+        const isBeamRender = renderMode === RenderMode.Beam;
+        const usesVelocity = isStretchedRender || isBeamRender;
         const flipsSprites = SpriteBatch.takesPivotAndFlip(renderMode);
 
         const visibleSystems = this.getVisibleSystems();
@@ -911,6 +920,9 @@ export class SpriteBatch extends VFXBatch {
                     SpriteBatch.applyFlipFromParticles(this.sizeBuffer, firstIndex * 3, particles, particleNum);
                 }
             }
+            if (isBeamRender && this.velocityBuffer) {
+                this.writeBeams(system as ParticleSystem, firstIndex, index - firstIndex);
+            }
         }
 
         if (isStretchedRender && visibleSystems.length > 0) {
@@ -926,7 +938,7 @@ export class SpriteBatch extends VFXBatch {
             // Slot 0 only needs clearing once per stretch of empty frames; re-uploading it every
             // frame cost five buffer uploads per idle batch per frame.
             if (!this.clearedInstanceUploaded) {
-                this.uploadClearedInstance(isMeshRender, isStretchedRender);
+                this.uploadClearedInstance(isMeshRender, usesVelocity);
                 this.clearedInstanceUploaded = true;
             }
             return;
@@ -934,7 +946,7 @@ export class SpriteBatch extends VFXBatch {
         this.clearedInstanceUploaded = false;
 
         if (this.settings.sortMode !== 'none') {
-            this.sortInstances(index, isMeshRender, isStretchedRender);
+            this.sortInstances(index, isMeshRender, usesVelocity);
         }
 
         // Upload only the slots actually filled this frame: the buffers are sized
@@ -944,7 +956,7 @@ export class SpriteBatch extends VFXBatch {
         this.colorVB.update(this.colorBuffer.subarray(0, index * 4));
         this.uvTileVB.update(this.uvTileBuffer.subarray(0, index));
         this.rotationVB.update(this.rotationBuffer.subarray(0, isMeshRender ? index * 4 : index));
-        if (isStretchedRender && this.velocityVB && this.velocityBuffer) {
+        if (usesVelocity && this.velocityVB && this.velocityBuffer) {
             this.velocityVB.update(this.velocityBuffer.subarray(0, index * 4));
         }
     }
@@ -970,7 +982,35 @@ export class SpriteBatch extends VFXBatch {
         }
     }
 
-    /** The quads that take a pivot and flip: every billboard kind, stretched included, but not meshes. */
+    /** Stretched billboards and beams: drawn along a per-instance vector, by the stretched shader. */
+    private static drawsAlongVelocity(renderMode: RenderMode): boolean {
+        return renderMode === RenderMode.StretchedBillBoard || renderMode === RenderMode.Beam;
+    }
+
+    private readonly beamEnd_ = new Vector3();
+
+    /**
+     * Writes, for the `count` instances from `first`, the world vector from
+     * each one's drawn position to the system's beam end into the velocity
+     * buffer, which the stretched shader under `BEAM` lays the quad along. A
+     * beam without an end gets no length.
+     */
+    private writeBeams(system: ParticleSystem, first: number, count: number): void {
+        const velocities = this.velocityBuffer!;
+        const offsets = this.offsetBuffer;
+        const end = this.beamEnd_;
+        const hasEnd = typeof system.getBeamEnd === 'function' && system.getBeamEnd(end);
+        for (let i = first; i < first + count; i++) {
+            const o = i * 3;
+            const v = i * 4;
+            velocities[v] = hasEnd ? end.x - offsets[o] : 0;
+            velocities[v + 1] = hasEnd ? end.y - offsets[o + 1] : 0;
+            velocities[v + 2] = hasEnd ? end.z - offsets[o + 2] : 0;
+            velocities[v + 3] = 0;
+        }
+    }
+
+    /** The quads that take a pivot and flip: every billboard kind, stretched included, but not meshes or beams. */
     private static takesPivotAndFlip(renderMode: RenderMode): boolean {
         return (
             renderMode === RenderMode.BillBoard ||

package/src/TrailBatch.ts

@@ -139,6 +139,7 @@ export class TrailBatch extends VFXBatch {
         if (this.settings.texture) {
             defines.push('USE_MAP');
         }
+        defines.push(...this.surfaceDefines());
 
         const shaderLanguage = shaderLanguageFor(this.scene.getEngine());
         registerShaders(
@@ -164,6 +165,7 @@ export class TrailBatch extends VFXBatch {
         if (this.settings.texture) {
             samplers.push('map');
         }
+        this.surfaceUniforms(uniforms, samplers);
 
         const mat = new ShaderMaterial(
             shaderName,
@@ -200,6 +202,7 @@ export class TrailBatch extends VFXBatch {
         });
 
         this.bindFog(mat);
+        this.bindSurface(mat);
         mat.backFaceCulling = false;
 
         if (this.settings.materialTransparent) {

package/src/VFXBatch.ts

@@ -3,7 +3,7 @@ import {Constants} from '@babylonjs/core/Engines/constants';
 import {BaseTexture} from '@babylonjs/core/Materials/Textures/baseTexture';
 import {ShaderMaterial} from '@babylonjs/core/Materials/shaderMaterial';
 import {Color3} from '@babylonjs/core/Maths/math.color';
-import {Vector3 as BVector3} from '@babylonjs/core/Maths/math.vector';
+import {Vector2 as BVector2, Vector3 as BVector3, Vector4 as BVector4} from '@babylonjs/core/Maths/math.vector';
 import {Mesh} from '@babylonjs/core/Meshes/mesh';
 import {Scene} from '@babylonjs/core/scene';
 import {IParticleSystem, Vector3} from 'quarks.core';
@@ -30,6 +30,13 @@ export enum RenderMode {
     Trail = 3,
     HorizontalBillBoard = 4,
     VerticalBillBoard = 5,
+    /**
+     * A quad laid from each particle to the system's {@link ParticleSystem.beamEnd}
+     * and turned about its length to face the camera (a line renderer): U runs
+     * from the particle (0) to the end (1), V across, the particle's size is
+     * the width. Lightning, tethers, lasers.
+     */
+    Beam = 6,
 }
 
 /**
@@ -122,6 +129,87 @@ export function meshRimEqual(a: MeshRim | undefined, b: MeshRim | undefined): bo
     );
 }
 
+/**
+ * Alpha erosion: the particle's alpha decides how much of its shape is left
+ * instead of how transparent it is, so `ColorOverLife` fading alpha out
+ * dissolves (noise mask) or wipes (gradient mask) the shape away. See
+ * {@link VFXBatchSettings.erosion}.
+ */
+export interface ParticleErosion {
+    /**
+     * Mask whose red channel orders what goes first, sampled with the
+     * particle's UV (the quad, mesh or trail UV, unscrolled). Null: the map's
+     * own alpha, so a soft shape shrinks from its edges.
+     */
+    mask: BaseTexture | null;
+    /** Width of the soft transition at the cut, in mask units. Default 0.05. */
+    softness: number;
+    /** Width of the glowing band above the cut, in mask units; 0 (default) draws none. */
+    edgeWidth: number;
+    /** Colour added in the edge band, linear RGB, may exceed 1. Default `[1, 1, 1]`. */
+    edgeColor: [number, number, number];
+    /** Mask UV scroll, UV units per second. Default `[0, 0]`. */
+    maskScroll: [number, number];
+}
+// Limits worth knowing: the mask is sampled with the UV as drawn (on a sheet,
+// the current tile's), erosion only changes alpha (one-one and premultiplied
+// blending show a hard cut), and with neither a mask nor a map there is
+// nothing to order the cut by, so the shape goes all at once near alpha 0.
+// Scrolling runs on the renderer's clock, not a system's playback speed.
+
+/** A complete erosion from a partial one, every field defaulted, or undefined when `erosion` is unset. */
+export function normalizeErosion(erosion: Partial<ParticleErosion> | null | undefined): ParticleErosion | undefined {
+    if (!erosion || typeof erosion !== 'object') {
+        return undefined;
+    }
+    const num = (value: unknown, fallback: number) =>
+        typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+    const color = Array.isArray(erosion.edgeColor) ? erosion.edgeColor : [1, 1, 1];
+    const scroll = Array.isArray(erosion.maskScroll) ? erosion.maskScroll : [0, 0];
+    return {
+        mask: erosion.mask ?? null,
+        softness: Math.max(0.0001, num(erosion.softness, 0.05)),
+        edgeWidth: Math.max(0, num(erosion.edgeWidth, 0)),
+        edgeColor: [num(color[0], 1), num(color[1], 1), num(color[2], 1)],
+        maskScroll: [num(scroll[0], 0), num(scroll[1], 0)],
+    };
+}
+
+/** True when both describe the same erosion (or both none). */
+export function erosionEqual(a: ParticleErosion | undefined, b: ParticleErosion | undefined): boolean {
+    if (a === b) {
+        return true;
+    }
+    if (!a || !b) {
+        return false;
+    }
+    return (
+        a.mask === b.mask &&
+        a.softness === b.softness &&
+        a.edgeWidth === b.edgeWidth &&
+        a.edgeColor[0] === b.edgeColor[0] &&
+        a.edgeColor[1] === b.edgeColor[1] &&
+        a.edgeColor[2] === b.edgeColor[2] &&
+        a.maskScroll[0] === b.maskScroll[0] &&
+        a.maskScroll[1] === b.maskScroll[1]
+    );
+}
+
+/** A UV scroll speed, or undefined when unset or zero. */
+export function normalizeUVScroll(scroll: ArrayLike<number> | null | undefined): [number, number] | undefined {
+    if (!scroll || typeof scroll !== 'object') {
+        return undefined;
+    }
+    const u = Number.isFinite(scroll[0]) ? scroll[0] : 0;
+    const v = Number.isFinite(scroll[1]) ? scroll[1] : 0;
+    return u === 0 && v === 0 ? undefined : [u, v];
+}
+
+/** True when both scroll the same way (or both not at all). */
+export function uvScrollEqual(a: [number, number] | undefined, b: [number, number] | undefined): boolean {
+    return a === b || (!!a && !!b && a[0] === b[0] && a[1] === b[1]);
+}
+
 export interface StoredBatchSettings {
     instancingGeometry: Float32Array;
     instancingIndices: Uint32Array | Uint16Array;
@@ -162,6 +250,12 @@ export interface StoredBatchSettings {
     lighting?: MeshLighting;
     /** Mesh particle rim, see {@link VFXBatchSettings.rim}. */
     rim?: MeshRim;
+    /** Map UV scroll, see {@link VFXBatchSettings.uvScroll}. */
+    uvScroll?: [number, number];
+    /** Colour ramp for the map, see {@link VFXBatchSettings.gradientMap}. */
+    gradientMap: BaseTexture | null;
+    /** Alpha erosion, see {@link VFXBatchSettings.erosion}. */
+    erosion?: ParticleErosion;
 }
 
 export abstract class VFXBatch {
@@ -208,6 +302,9 @@ export abstract class VFXBatch {
             applyFog: settings.applyFog ?? true,
             lighting: settings.lighting,
             rim: normalizeMeshRim(settings.rim),
+            uvScroll: normalizeUVScroll(settings.uvScroll),
+            gradientMap: settings.gradientMap ?? null,
+            erosion: normalizeErosion(settings.erosion),
         };
         this.mesh = new Mesh('vfxBatch', scene);
         this.configureMesh();
@@ -331,6 +428,106 @@ export abstract class VFXBatch {
         });
     }
 
+    /**
+     * Seconds of renderer time, set by the renderer before each fill; what UV
+     * and erosion mask scrolling advance by.
+     */
+    time = 0;
+
+    /** Defines of the texture effects (see `shaders/chunks/surface.ts`) this batch uses. */
+    protected surfaceDefines(): string[] {
+        const defines: string[] = [];
+        if (this.settings.uvScroll) {
+            defines.push('UV_SCROLL');
+        }
+        if (this.settings.gradientMap) {
+            defines.push('GRADIENT_MAP');
+        }
+        const erosion = this.settings.erosion;
+        if (erosion) {
+            defines.push('EROSION');
+            if (erosion.mask) {
+                defines.push('EROSION_MASK');
+            }
+        }
+        return defines;
+    }
+
+    /** Adds the uniforms and samplers of the texture effects this batch uses. */
+    protected surfaceUniforms(uniforms: string[], samplers: string[]): void {
+        if (this.settings.uvScroll) {
+            uniforms.push('uvScrollOffset');
+        }
+        if (this.settings.gradientMap) {
+            samplers.push('gradientMap');
+            uniforms.push('gradientMapRange');
+        }
+        const erosion = this.settings.erosion;
+        if (erosion) {
+            uniforms.push('erosionParams', 'erosionEdgeColor');
+            if (erosion.mask) {
+                samplers.push('erosionMask');
+            }
+        }
+    }
+
+    /** Sets the texture effects' textures and constants, and advances their scrolling on every bind. */
+    protected bindSurface(material: ShaderMaterial): void {
+        const {uvScroll, gradientMap, erosion} = this.settings;
+        if (gradientMap) {
+            material.setTexture('gradientMap', gradientMap);
+        }
+        if (erosion) {
+            if (erosion.mask) {
+                material.setTexture('erosionMask', erosion.mask);
+            }
+            material.setVector3(
+                'erosionEdgeColor',
+                new BVector3(erosion.edgeColor[0], erosion.edgeColor[1], erosion.edgeColor[2])
+            );
+        }
+        if (!uvScroll && !erosion && !gradientMap) {
+            return;
+        }
+        // Wrapped on the CPU: a raw speed × time grows until float32 UVs lose their fraction.
+        const wrap = (value: number) => value - Math.floor(value);
+        const scrollOffset = new BVector2();
+        const erosionParams = new BVector4();
+        const gradientRange = new BVector2(0, 1);
+        // Written to the material for the next bind and to the bound effect for
+        // this one: ShaderMaterial uploads its values before the bind observers run.
+        const write = () => {
+            const time = this.time;
+            const effect = material.getEffect();
+            if (uvScroll) {
+                scrollOffset.set(wrap(uvScroll[0] * time), wrap(uvScroll[1] * time));
+                material.setVector2('uvScrollOffset', scrollOffset);
+                effect?.setVector2('uvScrollOffset', scrollOffset);
+            }
+            if (erosion) {
+                erosionParams.set(
+                    erosion.softness,
+                    erosion.edgeWidth,
+                    wrap(erosion.maskScroll[0] * time),
+                    wrap(erosion.maskScroll[1] * time)
+                );
+                material.setVector4('erosionParams', erosionParams);
+                effect?.setVector4('erosionParams', erosionParams);
+            }
+            if (gradientMap) {
+                // Texel centres of the first and last texel, so a repeating
+                // ramp does not blend its two ends at black and white.
+                const width = gradientMap.getSize().width;
+                const half = width > 0 ? 0.5 / width : 0;
+                gradientRange.set(half, 1 - half);
+                material.setVector2('gradientMapRange', gradientRange);
+                effect?.setVector2('gradientMapRange', gradientRange);
+            }
+        };
+        write();
+        material.onBindObservable.add(write);
+    }
+
     addSystem(system: IParticleSystem) {
         this.systems.add(system);
     }

package/src/index.ts

@@ -21,11 +21,13 @@ export {ParticleEmitter} from './ParticleEmitter';
 export {ParticleSystem} from './ParticleSystem';
 export type {
     BabylonMetaData,
+    BeamEnd,
     BurstParameters,
     BurstParametersJSON,
     CullingMode,
     ParticleSystemJSONParameters,
     ParticleSystemParameters,
+    ScalingMode,
 } from './ParticleSystem';
 export {QuarksLoader} from './QuarksLoader';
 export type {
@@ -41,8 +43,25 @@ export {QuarksUtil} from './QuarksUtil';
 export * from './shaders/';
 export {SpriteBatch} from './SpriteBatch';
 export {TrailBatch} from './TrailBatch';
-export {defaultMeshLighting, meshRimEqual, normalizeMeshRim, RenderMode, VFXBatch} from './VFXBatch';
-export type {MeshLighting, MeshLightingSettings, MeshRim, SortMode, StoredBatchSettings} from './VFXBatch';
+export {
+    defaultMeshLighting,
+    erosionEqual,
+    meshRimEqual,
+    normalizeErosion,
+    normalizeMeshRim,
+    normalizeUVScroll,
+    RenderMode,
+    uvScrollEqual,
+    VFXBatch,
+} from './VFXBatch';
+export type {
+    MeshLighting,
+    MeshLightingSettings,
+    MeshRim,
+    ParticleErosion,
+    SortMode,
+    StoredBatchSettings,
+} from './VFXBatch';
 
 // Re-export quarks.core types (interfaces - type-only)
 export type {

package/src/shaders/chunks/surface.ts

@@ -0,0 +1,188 @@
+/**
+ * Texture effects shared by the sprite, mesh and trail fragment shaders, in
+ * both shader languages: UV scrolling, a gradient map and alpha erosion.
+ *
+ * - `UV_SCROLL`: `uvScrollOffset` (already wrapped to 0…1 on the CPU, so it
+ *   never loses precision) is added to the map's UV. The texture should wrap
+ *   (repeat); scrolling a tile of a sheet runs into its neighbours.
+ * - `GRADIENT_MAP`: the map's red channel picks a colour along U of
+ *   `gradientMap`, whose alpha multiplies the map's. A greyscale texture is
+ *   then recoloured by a ramp, and the particle colour still tints it.
+ *   `gradientMapRange` keeps the lookup between the first and last texel
+ *   centres. Make the ramp without mipmaps: the lookup's UV jumps with the
+ *   map's detail, and the hardware would pick a blurred mip for it.
+ * - `EROSION`: the particle's alpha stops being a transparency and becomes how
+ *   much of the shape is left. A fragment shows where the mask (the red
+ *   channel of `erosionMask` under `EROSION_MASK`, the map's alpha otherwise)
+ *   is above the cut that alpha sets: alpha 1 shows everything the map shows,
+ *   alpha 0 nothing, and on the way down the shape eats away from its lowest
+ *   mask values first — a noise mask dissolves it, a gradient mask wipes it.
+ *   `erosionParams` is (softness, edge width, mask offset u, mask offset v),
+ *   the edge band just above the cut glows in `erosionEdgeColor`. The mask is
+ *   sampled with the particle's UV as drawn, which on a sprite sheet is the
+ *   current tile's. Erosion only changes alpha, so blend modes that ignore
+ *   alpha (one-one, premultiplied) show a hard cut.
+ */
+
+/** Fragment-side declarations, GLSL. */
+export const surfaceFragmentDeclarationGLSL = /* glsl */ `
+#ifdef UV_SCROLL
+uniform vec2 uvScrollOffset;
+#endif
+#ifdef GRADIENT_MAP
+uniform sampler2D gradientMap;
+uniform vec2 gradientMapRange;
+#endif
+#ifdef EROSION
+uniform vec4 erosionParams;
+uniform vec3 erosionEdgeColor;
+#ifdef EROSION_MASK
+uniform sampler2D erosionMask;
+#endif
+
+vec4 quarksErode(vec4 color, float level, float mask) {
+    float softness = erosionParams.x;
+    float edgeWidth = erosionParams.y;
+    // At level 1 the cut sits below the lowest mask value by the soft band
+    // and the edge band, so nothing is cut and no edge shows; at level 0 above
+    // the highest. The edge then grows in as the cut rises, rather than popping.
+    float cut = mix(-(softness + edgeWidth), 1.0, 1.0 - level);
+    float visible = smoothstep(cut, cut + softness, mask);
+    if (edgeWidth > 0.0) {
+        float edge = 1.0 - smoothstep(cut + softness, cut + softness + edgeWidth, mask);
+        color.rgb += erosionEdgeColor * edge;
+    }
+    color.a *= visible;
+    return color;
+}
+#endif
+`;
+
+/**
+ * Declares `baseColor` from `vColor` and the map, with the effects applied,
+ * GLSL. `tileBlend` adds the second tile of `TILE_BLEND`.
+ */
+export function surfaceColorGLSL(tileBlend: boolean): string {
+    return /* glsl */ `
+    vec4 baseColor = vColor;
+#ifdef UV_SCROLL
+    vec2 mapUV = vUV + uvScrollOffset;
+#else
+    vec2 mapUV = vUV;
+#endif
+#ifdef EROSION
+    float erosionLevel = baseColor.a;
+    baseColor.a = 1.0;
+    float erosionMaskValue = 1.0;
+#endif
+#ifdef USE_MAP
+    vec4 texColor = texture2D(map, mapUV);
+    ${
+        tileBlend
+            ? `#ifdef TILE_BLEND
+    #ifdef UV_SCROLL
+        vec4 texColor2 = texture2D(map, vUV2 + uvScrollOffset);
+    #else
+        vec4 texColor2 = texture2D(map, vUV2);
+    #endif
+        texColor = mix(texColor, texColor2, vTileBlend);
+    #endif`
+            : ''
+    }
+    #ifdef GRADIENT_MAP
+        vec4 ramp = texture2D(gradientMap, vec2(mix(gradientMapRange.x, gradientMapRange.y, clamp(texColor.r, 0.0, 1.0)), 0.5));
+        texColor = vec4(ramp.rgb, ramp.a * texColor.a);
+    #endif
+    #ifdef EROSION
+        erosionMaskValue = texColor.a;
+    #endif
+    baseColor *= texColor;
+#endif
+#ifdef EROSION
+    #ifdef EROSION_MASK
+        erosionMaskValue = texture2D(erosionMask, vUV + erosionParams.zw).r;
+    #endif
+    baseColor = quarksErode(baseColor, erosionLevel, erosionMaskValue);
+#endif
+`;
+}
+
+/** Fragment-side declarations, WGSL. */
+export const surfaceFragmentDeclarationWGSL = /* wgsl */ `
+#ifdef UV_SCROLL
+uniform uvScrollOffset: vec2f;
+#endif
+#ifdef GRADIENT_MAP
+var gradientMapSampler: sampler;
+var gradientMap: texture_2d<f32>;
+uniform gradientMapRange: vec2f;
+#endif
+#ifdef EROSION
+uniform erosionParams: vec4f;
+uniform erosionEdgeColor: vec3f;
+#ifdef EROSION_MASK
+var erosionMaskSampler: sampler;
+var erosionMask: texture_2d<f32>;
+#endif
+
+fn quarksErode(colorIn: vec4f, level: f32, mask: f32) -> vec4f {
+    var color = colorIn;
+    let softness = uniforms.erosionParams.x;
+    let edgeWidth = uniforms.erosionParams.y;
+    let cut = mix(-(softness + edgeWidth), 1.0, 1.0 - level);
+    let visible = smoothstep(cut, cut + softness, mask);
+    if (edgeWidth > 0.0) {
+        let edge = 1.0 - smoothstep(cut + softness, cut + softness + edgeWidth, mask);
+        color = vec4f(color.rgb + uniforms.erosionEdgeColor * edge, color.a);
+    }
+    color.a *= visible;
+    return color;
+}
+#endif
+`;
+
+/** Declares `baseColor` from `vColor` and the map, with the effects applied, WGSL. */
+export function surfaceColorWGSL(tileBlend: boolean): string {
+    return /* wgsl */ `
+    var baseColor = fragmentInputs.vColor;
+#ifdef UV_SCROLL
+    let mapUV = fragmentInputs.vUV + uniforms.uvScrollOffset;
+#else
+    let mapUV = fragmentInputs.vUV;
+#endif
+#ifdef EROSION
+    let erosionLevel = baseColor.a;
+    baseColor.a = 1.0;
+    var erosionMaskValue = 1.0;
+#endif
+#ifdef USE_MAP
+    var texColor = textureSample(map, mapSampler, mapUV);
+    ${
+        tileBlend
+            ? `#ifdef TILE_BLEND
+    #ifdef UV_SCROLL
+        let texColor2 = textureSample(map, mapSampler, fragmentInputs.vUV2 + uniforms.uvScrollOffset);
+    #else
+        let texColor2 = textureSample(map, mapSampler, fragmentInputs.vUV2);
+    #endif
+        texColor = mix(texColor, texColor2, fragmentInputs.vTileBlend);
+    #endif`
+            : ''
+    }
+    #ifdef GRADIENT_MAP
+        let ramp = textureSample(gradientMap, gradientMapSampler, vec2f(mix(uniforms.gradientMapRange.x, uniforms.gradientMapRange.y, clamp(texColor.r, 0.0, 1.0)), 0.5));
+        texColor = vec4f(ramp.rgb, ramp.a * texColor.a);
+    #endif
+    #ifdef EROSION
+        erosionMaskValue = texColor.a;
+    #endif
+    baseColor *= texColor;
+#endif
+#ifdef EROSION
+    #ifdef EROSION_MASK
+        erosionMaskValue = textureSample(erosionMask, erosionMaskSampler, fragmentInputs.vUV + uniforms.erosionParams.zw).r;
+    #endif
+    baseColor = quarksErode(baseColor, erosionLevel, erosionMaskValue);
+#endif
+`;
+}

package/src/shaders/particle_frag.glsl.ts

@@ -1,4 +1,5 @@
 import {fogFragmentDeclarationGLSL, fogFragmentGLSL} from './chunks/fog';
+import {surfaceColorGLSL, surfaceFragmentDeclarationGLSL} from './chunks/surface';
 
 export default /* glsl */ `
 varying vec2 vUV;
@@ -26,18 +27,9 @@ uniform float alphaTest;
 #endif
 
 ${fogFragmentDeclarationGLSL}
+${surfaceFragmentDeclarationGLSL}
 void main() {
-    vec4 baseColor = vColor;
-
-#ifdef USE_MAP
-    vec4 texColor = texture2D(map, vUV);
-    #ifdef TILE_BLEND
-        vec4 texColor2 = texture2D(map, vUV2);
-        texColor = mix(texColor, texColor2, vTileBlend);
-    #endif
-    baseColor *= texColor;
-#endif
-
+${surfaceColorGLSL(true)}
 #ifdef USE_COLOR_AS_ALPHA
     baseColor.a *= (baseColor.r + baseColor.g + baseColor.b) / 3.0;
 #endif