babylon.quarks 0.25.0 → 0.27.0

package/src/TrailBatch.ts

@@ -1,24 +1,110 @@
 import {VertexBuffer} from '@babylonjs/core/Buffers/buffer';
 import {Constants} from '@babylonjs/core/Engines/constants';
 import {ShaderMaterial} from '@babylonjs/core/Materials/shaderMaterial';
-import {Vector2 as BVector2} from '@babylonjs/core/Maths/math.vector';
 import {Mesh} from '@babylonjs/core/Meshes/mesh';
 import {Scene} from '@babylonjs/core/scene';
 import {IParticleSystem, Matrix4, Quaternion, TrailParticle, TrailSettings, Vector3} from 'quarks.core';
 import {VFXBatchSettings} from './BatchedRenderer';
 import type {ParticleSystem} from './ParticleSystem';
+import {shaderProgram} from './shaderProgram';
+import {sheetCell} from './shaders/chunks/sheet';
 import {registerShaders, shaderLanguageFor} from './shaders/shaderLanguageSupport';
-import trail_frag from './shaders/trail_frag.glsl';
-import trail_frag_wgsl from './shaders/trail_frag.wgsl';
-import trail_vert from './shaders/trail_vert.glsl';
-import trail_vert_wgsl from './shaders/trail_vert.wgsl';
+import type {DepthBinding} from './softDepth';
+import {
+    trailCurveTension,
+    trailMinVertexDistance,
+    trailTessellation,
+    trailTextureMode,
+    trailTextureScale,
+} from './trailSettings';
 import {VFXBatch} from './VFXBatch';
 
+/** The texture modes as the vertex loop tells them apart, see `TrailSettings.textureMode`. */
+const enum TextureMode {
+    Stretch,
+    Tile,
+    DistributePerSegment,
+    RepeatPerSegment,
+}
+
+/**
+ * One trail's points for a frame, in world space: where each lies, its side
+ * when the trail is swept, its width, its color and its distance along the
+ * trail. Grown as needed and kept, so drawing a trail allocates nothing.
+ */
+class TrailSamples {
+    position = new Float32Array(0);
+    side = new Float32Array(0);
+    size = new Float32Array(0);
+    color = new Float32Array(0);
+    /** Distance along the trail, as recorded (`TrailParticle.historyDistances`). */
+    distance = new Float32Array(0);
+
+    reserve(count: number): this {
+        if (count > this.size.length) {
+            const capacity = Math.max(count, this.size.length * 2, 64);
+            this.position = new Float32Array(capacity * 3);
+            this.side = new Float32Array(capacity * 3);
+            this.size = new Float32Array(capacity);
+            this.color = new Float32Array(capacity * 4);
+            this.distance = new Float32Array(capacity);
+        }
+        return this;
+    }
+
+    /** Sample `i` at the point, carried by the matrix `m` (column-major elements) when given. */
+    writePoint(i: number, x: number, y: number, z: number, m: ArrayLike<number> | null): void {
+        const o = i * 3;
+        if (m) {
+            const w = 1 / (m[3] * x + m[7] * y + m[11] * z + m[15]);
+            this.position[o] = (m[0] * x + m[4] * y + m[8] * z + m[12]) * w;
+            this.position[o + 1] = (m[1] * x + m[5] * y + m[9] * z + m[13]) * w;
+            this.position[o + 2] = (m[2] * x + m[6] * y + m[10] * z + m[14]) * w;
+        } else {
+            this.position[o] = x;
+            this.position[o + 1] = y;
+            this.position[o + 2] = z;
+        }
+    }
+
+    /** Sample `i`'s side, a direction turned (and scaled) by `m` when given. */
+    writeSide(i: number, x: number, y: number, z: number, m: ArrayLike<number> | null): void {
+        const o = i * 3;
+        if (m) {
+            this.side[o] = m[0] * x + m[4] * y + m[8] * z;
+            this.side[o + 1] = m[1] * x + m[5] * y + m[9] * z;
+            this.side[o + 2] = m[2] * x + m[6] * y + m[10] * z;
+        } else {
+            this.side[o] = x;
+            this.side[o + 1] = y;
+            this.side[o + 2] = z;
+        }
+    }
+
+    writeColor(i: number, r: number, g: number, b: number, a: number): void {
+        const o = i * 4;
+        this.color[o] = r;
+        this.color[o + 1] = g;
+        this.color[o + 2] = b;
+        this.color[o + 3] = a;
+    }
+}
+
+/** Knot spacing of a centripetal spline: the square root of the length between two points of `p`. */
+function knot(p: Float32Array, from: number, to: number): number {
+    return Math.sqrt(
+        Math.sqrt((p[to] - p[from]) ** 2 + (p[to + 1] - p[from + 1]) ** 2 + (p[to + 2] - p[from + 2]) ** 2)
+    );
+}
+
+/** The batch of trail particles. @internal */
 export class TrailBatch extends VFXBatch {
     private positionBuffer!: Float32Array;
     private previousBuffer!: Float32Array;
     private nextBuffer!: Float32Array;
     private uvBuffer!: Float32Array;
+    /** UV channel 1: along the trail and across it, without the sheet's cell; only when a texture reads it. */
+    private uv1Buffer: Float32Array | null = null;
     private sideBuffer!: Float32Array;
     private widthBuffer!: Float32Array;
     private colorBuffer!: Float32Array;
@@ -30,16 +116,17 @@ export class TrailBatch extends VFXBatch {
     private sideVB!: VertexBuffer;
     private widthVB!: VertexBuffer;
 
-    constructor(settings: VFXBatchSettings, scene: Scene) {
-        super(settings, scene);
-        // Trail buffers hold two vertices per recorded sample and are the largest
-        // per-batch allocation in the library, so start small and let
-        // expandBuffers grow to whatever the batch actually needs.
+    constructor(settings: VFXBatchSettings, scene: Scene, depth: DepthBinding | null = null) {
+        super(settings, scene, depth);
+        // For a trail batch `maxParticles` counts vertices, two per drawn point: the buffers are
+        // the largest per-batch allocation in the library, so start small and let expandBuffers
+        // grow to whatever the batch actually needs.
         this.maxParticles = 1024;
         this.setupBuffers();
         this.rebuildMaterial();
     }
 
+    /** @internal */
     setupBuffers(): void {
         this.mesh.dispose();
         this.mesh = new Mesh('trailBatch', this.scene);
@@ -48,14 +135,17 @@ export class TrailBatch extends VFXBatch {
     }
 
     private buildGeometryBuffers(): void {
-        this.positionBuffer = new Float32Array(this.maxParticles * 6);
-        this.previousBuffer = new Float32Array(this.maxParticles * 6);
-        this.nextBuffer = new Float32Array(this.maxParticles * 6);
-        this.uvBuffer = new Float32Array(this.maxParticles * 4);
-        this.sideBuffer = new Float32Array(this.maxParticles * 2);
-        this.widthBuffer = new Float32Array(this.maxParticles * 2);
-        this.colorBuffer = new Float32Array(this.maxParticles * 8);
-        this.indexBuffer = new Uint32Array(this.maxParticles * 6);
+        // `maxParticles` vertices; a ribbon of n points is 2n vertices and 6(n - 1) indices.
+        const vertices = this.maxParticles;
+        this.positionBuffer = new Float32Array(vertices * 3);
+        this.previousBuffer = new Float32Array(vertices * 3);
+        this.nextBuffer = new Float32Array(vertices * 3);
+        this.uvBuffer = new Float32Array(vertices * 2);
+        this.uv1Buffer = this.usesUV1() ? new Float32Array(vertices * 2) : null;
+        this.sideBuffer = new Float32Array(vertices);
+        this.widthBuffer = new Float32Array(vertices);
+        this.colorBuffer = new Float32Array(vertices * 4);
+        this.indexBuffer = new Uint32Array(vertices * 3);
         // Vertices come in pairs, one per side of the ribbon, so the side never
         // changes: written once here and never uploaded again.
         for (let i = 0; i < this.sideBuffer.length; i += 2) {
@@ -86,6 +176,9 @@ export class TrailBatch extends VFXBatch {
         // Set standard vertex data with full buffer capacity (updatable)
         this.mesh.setVerticesData(VertexBuffer.PositionKind, this.positionBuffer, true);
         this.mesh.setVerticesData(VertexBuffer.UVKind, this.uvBuffer, true);
+        if (this.uv1Buffer) {
+            this.mesh.setVerticesData(VertexBuffer.UV2Kind, this.uv1Buffer, true);
+        }
         this.mesh.setVerticesData(VertexBuffer.ColorKind, this.colorBuffer, true, 4);
         // The whole array, not just the dummy triangle: this call is what sizes
         // the GPU index buffer, and updateIndices later writes into it without
@@ -117,12 +210,13 @@ export class TrailBatch extends VFXBatch {
         }
     }
 
+    /** Grows the buffers to hold more than `target` vertices. @internal */
     expandBuffers(target: number): void {
         while (target >= this.maxParticles) {
             this.maxParticles *= 2;
         }
-        // Release the previous custom attribute buffers; setVerticesBuffer only
-        // replaces the reference, so skipping this leaks GPU memory on every grow.
+        // `Geometry.setVerticesBuffer` disposes the buffer it replaces; these custom attributes
+        // are not in the geometry's map, so they are released here.
         this.previousVB?.dispose();
         this.nextVB?.dispose();
         this.sideVB?.dispose();
@@ -130,42 +224,15 @@ export class TrailBatch extends VFXBatch {
         this.buildGeometryBuffers();
     }
 
+    /** @internal */
     rebuildMaterial(): void {
+        const program = shaderProgram(this.settings, {depth: this.depth, envAtlasReady: false, meshUV2: false});
+        const {defines, attributes, uniforms, samplers} = program;
         // Stable name: the trail shader source never varies, so registering it once
         // keeps Effect.ShadersStore bounded and lets Babylon reuse compiled effects.
-        const shaderName = 'quarksTrail';
-        const defines: string[] = this.fogDefines();
-
-        if (this.settings.texture) {
-            defines.push('USE_MAP');
-        }
-        defines.push(...this.surfaceDefines());
-
+        const shaderName = program.name;
         const shaderLanguage = shaderLanguageFor(this.scene.getEngine());
-        registerShaders(
-            shaderName,
-            {glsl: trail_vert, wgsl: trail_vert_wgsl},
-            {glsl: trail_frag, wgsl: trail_frag_wgsl},
-            shaderLanguage
-        );
-
-        const attributes = ['position', 'previous', 'next', 'side', 'width', 'uv', 'color'];
-        const uniforms = [
-            'world',
-            'view',
-            'projection',
-            'worldViewProjection',
-            'lineWidth',
-            'resolution',
-            'sizeAttenuation',
-            ...VFXBatch.FOG_UNIFORMS,
-        ];
-        const samplers: string[] = [];
-
-        if (this.settings.texture) {
-            samplers.push('map');
-        }
-        this.surfaceUniforms(uniforms, samplers);
+        registerShaders(shaderName, program.vertex, program.fragment, shaderLanguage);
 
         const mat = new ShaderMaterial(
             shaderName,
@@ -184,24 +251,8 @@ export class TrailBatch extends VFXBatch {
         if (this.settings.texture) {
             mat.setTexture('map', this.settings.texture);
         }
-        const engine = this.scene.getEngine();
-        mat.setFloat('lineWidth', 1);
-        // Reused across binds, and only re-uploaded when the render target resizes.
-        const resolution = new BVector2(engine.getRenderWidth(), engine.getRenderHeight());
-        mat.setVector2('resolution', resolution);
-        mat.setFloat('sizeAttenuation', 1);
-        mat.onBindObservable.add(() => {
-            const renderEngine = this.scene.getEngine();
-            const width = renderEngine.getRenderWidth();
-            const height = renderEngine.getRenderHeight();
-            if (resolution.x !== width || resolution.y !== height) {
-                resolution.x = width;
-                resolution.y = height;
-                mat.setVector2('resolution', resolution);
-            }
-        });
-
         this.bindFog(mat);
+        this.bindSoft(mat);
         this.bindSurface(mat);
         mat.backFaceCulling = false;
 
@@ -210,18 +261,222 @@ export class TrailBatch extends VFXBatch {
         } else {
             mat.alphaMode = Constants.ALPHA_DISABLE;
         }
-        mat.needDepthPrePass = this.settings.materialDepthWrite;
+        // A transparent surface that writes depth is drawn into the depth buffer first, so its own
+        // overlapping pieces do not fight; an opaque one writes depth as it draws.
+        mat.needDepthPrePass = this.settings.materialDepthWrite && this.settings.materialTransparent;
         mat.forceDepthWrite = this.settings.materialDepthWrite;
         mat.disableDepthWrite = !this.settings.materialDepthWrite;
+        // 0 keeps the engine's depth function (LEQUAL); ALWAYS draws over everything, like ZTest Always.
+        mat.depthFunction = this.settings.materialDepthTest ? 0 : Constants.ALWAYS;
 
+        // A rebuild (a depth texture attached or removed) replaces the material and its bind
+        // observers. Textures belong to the settings, so they stay.
+        (this.mesh.material as ShaderMaterial | null)?.dispose(false, false);
         this.mesh.material = mat;
     }
 
-    private vector_ = new Vector3();
     private vector2_ = new Vector3();
     private vector3_ = new Vector3();
     private quaternion_ = new Quaternion();
 
+    private readonly samples_ = new TrailSamples();
+    private readonly curve_ = new TrailSamples();
+
+    /** The scratch a trail's samples are gathered into, room for `count`. */
+    private trailSamples(count: number): TrailSamples {
+        return this.samples_.reserve(count);
+    }
+
+    /**
+     * Shortens the last segment of a drawn ribbon to `keep` of its length, along the points already
+     * drawn for it, so it stays a prefix of that same curve. Every channel follows.
+     */
+    private cutLastSegment(drawn: TrailSamples, count: number, perSegment: number, keep: number, swept: boolean): void {
+        const first = count - 1 - perSegment;
+        const scratch = this.cutScratch_.reserve(perSegment + 1);
+        scratch.position.set(drawn.position.subarray(first * 3, count * 3));
+        scratch.side.set(drawn.side.subarray(first * 3, count * 3));
+        scratch.size.set(drawn.size.subarray(first, count));
+        scratch.color.set(drawn.color.subarray(first * 4, count * 4));
+        scratch.distance.set(drawn.distance.subarray(first, count));
+        for (let j = 1; j <= perSegment; j++) {
+            const at = keep * j;
+            const i = Math.min(perSegment - 1, Math.floor(at));
+            const t = at - i;
+            const d = first + j;
+            for (let c = 0; c < 3; c++) {
+                drawn.position[d * 3 + c] = scratch.position[i * 3 + c] * (1 - t) + scratch.position[i * 3 + 3 + c] * t;
+                if (swept) {
+                    drawn.side[d * 3 + c] = scratch.side[i * 3 + c] * (1 - t) + scratch.side[i * 3 + 3 + c] * t;
+                }
+            }
+            drawn.size[d] = scratch.size[i] * (1 - t) + scratch.size[i + 1] * t;
+            drawn.distance[d] = scratch.distance[i] * (1 - t) + scratch.distance[i + 1] * t;
+            for (let c = 0; c < 4; c++) {
+                drawn.color[d * 4 + c] = scratch.color[i * 4 + c] * (1 - t) + scratch.color[i * 4 + 4 + c] * t;
+            }
+        }
+    }
+
+    private readonly cutScratch_ = new TrailSamples();
+
+    /**
+     * The curve through a trail's `count` samples, each segment drawn as
+     * `steps + 1`: through the first `curved` (the recorded samples) a
+     * centripetal cardinal spline (Catmull-Rom at tension 0, straight at 1),
+     * the same through the sides of a swept trail with each side's length
+     * eased between its ends'; past them (the live tip) a straight segment,
+     * so the recorded part does not move as the tip does. Widths, colors and
+     * distances are eased along. The curve passes through every sample, so
+     * the trail keeps its shape and only loses its corners; centripetal
+     * spacing keeps it from overshooting where samples lie unevenly apart.
+     */
+    private tessellate(
+        samples: TrailSamples,
+        curved: number,
+        count: number,
+        steps: number,
+        tension: number,
+        swept: boolean
+    ): TrailSamples {
+        const out = this.curve_.reserve((count - 1) * (steps + 1) + 1);
+        const p = samples.position;
+        const sd = samples.side;
+        const op = out.position;
+        const os = out.side;
+        const tangent = 1 - tension;
+        let k = 0;
+        for (let i = 0; i + 1 < count; i++) {
+            const a = i * 3;
+            const b = a + 3;
+            // Each end's tangent, as weights of the neighbouring differences
+            // (Yuksel et al., parameterization of Catmull-Rom curves).
+            let w1a = 0;
+            let w1b = 0;
+            let w1c = 0;
+            let w2a = 0;
+            let w2b = 0;
+            let w2c = 0;
+            let before = a;
+            let after = b;
+            if (i + 1 < curved) {
+                before = (i > 0 ? i - 1 : i) * 3;
+                after = (i + 2 < curved ? i + 2 : i + 1) * 3;
+                const t12 = knot(p, a, b);
+                if (t12 > 1e-6) {
+                    const t01 = knot(p, before, a);
+                    const t23 = knot(p, b, after);
+                    w1c = tangent;
+                    w2a = tangent;
+                    if (t01 > 1e-6) {
+                        w1a = (tangent * t12) / t01;
+                        w1b = (-tangent * t12) / (t01 + t12);
+                    }
+                    if (t23 > 1e-6) {
+                        w2b = (-tangent * t12) / (t12 + t23);
+                        w2c = (tangent * t12) / t23;
+                    }
+                }
+            }
+            // m1 = w1a (A - Before) + w1b (B - Before) + w1c (B - A);
+            // m2 = w2a (B - A) + w2b (After - A) + w2c (After - B).
+            // With no tangents (the tip's segment, or tension 1) the curve is the straight segment
+            // itself: walk it evenly, as the widths, colors and distances are, rather than easing.
+            const straight = w1a === 0 && w1b === 0 && w1c === 0 && w2a === 0 && w2b === 0 && w2c === 0;
+            const la = swept ? Math.sqrt(sd[a] * sd[a] + sd[a + 1] * sd[a + 1] + sd[a + 2] * sd[a + 2]) : 0;
+            const lb = swept ? Math.sqrt(sd[b] * sd[b] + sd[b + 1] * sd[b + 1] + sd[b + 2] * sd[b + 2]) : 0;
+            for (let step = 0; step <= steps; step++, k++) {
+                const t = step / (steps + 1);
+                const t2 = t * t;
+                const t3 = t2 * t;
+                const h00 = straight ? 1 - t : 2 * t3 - 3 * t2 + 1;
+                const h10 = t3 - 2 * t2 + t;
+                const h01 = straight ? t : -2 * t3 + 3 * t2;
+                const h11 = t3 - t2;
+                const o = k * 3;
+                for (let c = 0; c < 3; c++) {
+                    const A = p[a + c];
+                    const B = p[b + c];
+                    const m1 = w1a * (A - p[before + c]) + w1b * (B - p[before + c]) + w1c * (B - A);
+                    const m2 = w2a * (B - A) + w2b * (p[after + c] - A) + w2c * (p[after + c] - B);
+                    op[o + c] = h00 * A + h10 * m1 + h01 * B + h11 * m2;
+                }
+                if (swept) {
+                    let x = 0;
+                    let y = 0;
+                    let z = 0;
+                    for (let c = 0; c < 3; c++) {
+                        const A = sd[a + c];
+                        const B = sd[b + c];
+                        const m1 = w1a * (A - sd[before + c]) + w1b * (B - sd[before + c]) + w1c * (B - A);
+                        const m2 = w2a * (B - A) + w2b * (sd[after + c] - A) + w2c * (sd[after + c] - B);
+                        const v = h00 * A + h10 * m1 + h01 * B + h11 * m2;
+                        if (c === 0) x = v;
+                        else if (c === 1) y = v;
+                        else z = v;
+                    }
+                    // A side turning with the blade keeps its length on the way round.
+                    let length = Math.sqrt(x * x + y * y + z * z);
+                    if (length <= 1e-6 * Math.max(la, lb, 1e-6)) {
+                        // Turned half round in one step: no way round to follow, so
+                        // hold the nearer end's side rather than pinch to nothing.
+                        const from = t < 0.5 ? a : b;
+                        x = sd[from];
+                        y = sd[from + 1];
+                        z = sd[from + 2];
+                        length = t < 0.5 ? la : lb;
+                    }
+                    const fit = length > 0 ? (la + (lb - la) * t) / length : 0;
+                    os[o] = x * fit;
+                    os[o + 1] = y * fit;
+                    os[o + 2] = z * fit;
+                }
+                out.size[k] = samples.size[i] + (samples.size[i + 1] - samples.size[i]) * t;
+                out.distance[k] = samples.distance[i] + (samples.distance[i + 1] - samples.distance[i]) * t;
+                const ca = i * 4;
+                const co = k * 4;
+                for (let c = 0; c < 4; c++) {
+                    out.color[co + c] = samples.color[ca + c] + (samples.color[ca + 4 + c] - samples.color[ca + c]) * t;
+                }
+            }
+        }
+        // The last sample, as it is.
+        const last = (count - 1) * 3;
+        const o = k * 3;
+        for (let c = 0; c < 3; c++) {
+            op[o + c] = p[last + c];
+            os[o + c] = sd[last + c];
+        }
+        out.size[k] = samples.size[count - 1];
+        out.distance[k] = samples.distance[count - 1];
+        for (let c = 0; c < 4; c++) out.color[k * 4 + c] = samples.color[(count - 1) * 4 + c];
+        return out;
+    }
+
+    /**
+     * Writes a swept ribbon's vertex pair at `pi`: the sample at (x, y, z)
+     * pushed `half` widths along its side (sx, sy, sz) one way for the first
+     * vertex and the other way for the second.
+     */
+    private writeSweptPair(
+        pi: number,
+        x: number,
+        y: number,
+        z: number,
+        sx: number,
+        sy: number,
+        sz: number,
+        half: number
+    ): void {
+        const positions = this.positionBuffer;
+        positions[pi] = x + sx * half;
+        positions[pi + 1] = y + sy * half;
+        positions[pi + 2] = z + sz * half;
+        positions[pi + 3] = x - sx * half;
+        positions[pi + 4] = y - sy * half;
+        positions[pi + 5] = z - sz * half;
+    }
+
     /**
      * Brings the emitter's world matrix up to date when its transform changed.
      *
@@ -241,6 +496,7 @@ export class TrailBatch extends VFXBatch {
         }
     }
 
+    /** @internal */
     update(): void {
         let index = 0;
         let triangles = 0;
@@ -250,14 +506,16 @@ export class TrailBatch extends VFXBatch {
         for (let s = 0; s < visibleSystems.length; s++) {
             const system = visibleSystems[s];
             const particles = system.particles;
+            const tessellation = trailTessellation(system.rendererEmitterSettings as TrailSettings);
             for (let j = 0; j < system.particleNum; j++) {
                 const historyCount = (particles[j] as TrailParticle).historyCount;
                 if (historyCount === 0) {
                     continue;
                 }
-                // +2 reserves the live tip vertex pair that frames between
-                // simulation steps append ahead of the recorded head.
-                particleCount += historyCount * 2 + 2;
+                // +1 reserves the live tip that frames between simulation
+                // steps append ahead of the recorded head; a tessellated trail
+                // draws each segment as several.
+                particleCount += (historyCount * (tessellation + 1) + 1) * 2;
             }
         }
         if (particleCount > this.maxParticles) {
@@ -296,15 +554,38 @@ export class TrailBatch extends VFXBatch {
             // rather than by the particle's velocity, so it is left alone.
             const trailSettings = system.rendererEmitterSettings as TrailSettings;
             const uvFromHead = Boolean(trailSettings.uvFromHead);
+            const uv1 = this.uv1Buffer;
             const colorFromParticle = Boolean(trailSettings.colorFromParticle);
             // Recorded samples already sit in world space; the live tip still comes
             // from the particle's own (local) position.
             const samplesInWorld = systemWorldSpace || Boolean(trailSettings.recordWorldSpace);
+            // A swept trail spans each sample's recorded side instead of facing
+            // the camera: its vertices are laid out here, and a zero width
+            // keeps the shader from pushing them.
+            const sideAxis = trailSettings.sideAxis;
             const residual = trailSettings.followLocalOrigin ? 0 : (system.simulationResidual ?? 0);
             // Measured from the step the particle just took, not from its
             // velocity: a trail pulled along by an orbit or by a plugin's own
             // behavior has motion no velocity term describes.
-            const stepFraction = residual === 0 ? 0 : residual / (system.simulationStep ?? residual);
+            const rawFraction = residual === 0 ? 0 : residual / (system.simulationStep ?? residual);
+            // A few ten-thousandths of a step are float noise left in the accumulator, not time: a
+            // tip there would sit on the head as a segment of no length.
+            const stepFraction = Math.abs(rawFraction) < 1e-4 ? 0 : rawFraction;
+
+            const tessellation = trailTessellation(trailSettings);
+            const curveTension = trailCurveTension(trailSettings);
+            const textureModeName = trailTextureMode(trailSettings);
+            const textureMode =
+                textureModeName === 'stretch'
+                    ? TextureMode.Stretch
+                    : textureModeName === 'tile'
+                      ? TextureMode.Tile
+                      : textureModeName === 'repeatPerSegment'
+                        ? TextureMode.RepeatPerSegment
+                        : TextureMode.DistributePerSegment;
+            const textureScale = trailTextureScale(trailSettings);
+            // With a minimum vertex distance the last recorded segment is not one step of travel.
+            const samplesFollow = trailMinVertexDistance(trailSettings) > 0;
 
             for (let j = 0; j < particleNum; j++) {
                 const particle = particles[j] as TrailParticle;
@@ -315,133 +596,239 @@ export class TrailBatch extends VFXBatch {
                 const historyCapacity = particle.historyCapacity;
                 const historyPositions = particle.historyPositions;
                 const historySizes = particle.historySizes;
+                const historyDistances = particle.historyDistances;
+                const historySides = particle.historySides;
+                const swept = sideAxis !== undefined && historySides.length >= historyCapacity * 3;
                 // Every sample takes its color from one place: its own recorded slot, or
                 // the particle's current row in the store.
                 const colors = colorFromParticle ? particle.store.color : particle.historyColors;
                 const particleColorIndex = particle.storeIndex * 4;
-                const col = particle.uvTile % vTileCount;
-                const row = Math.floor(particle.uvTile / vTileCount + 0.001);
+                // The same cell as the sprite shader, wrapped into the sheet the same way.
+                const {column: col, row} = sheetCell(particle.uvTile, uTileCount, vTileCount);
                 const particleMatrix = particle.parentMatrix as unknown as Matrix4 | undefined;
                 const me = (particleMatrix ?? emitterMatrix).elements;
-                const m00 = me[0],
-                    m01 = me[1],
-                    m02 = me[2],
-                    m03 = me[3];
-                const m10 = me[4],
-                    m11 = me[5],
-                    m12 = me[6],
-                    m13 = me[7];
-                const m20 = me[8],
-                    m21 = me[9],
-                    m22 = me[10],
-                    m23 = me[11];
-                const m30 = me[12],
-                    m31 = me[13],
-                    m32 = me[14],
-                    m33 = me[15];
-                // The texture spans the ribbon end to end: up to the live tip when one is
-                // drawn, otherwise up to the newest recorded sample.
-                const invHistoryLength =
-                    1 / (stepFraction !== 0 ? particleHistoryLength : Math.max(1, particleHistoryLength - 1));
-
-                // Walk the ring buffer oldest-first with hand-rolled wrapping so the
-                // inner loop stays free of modulo operations. Each sample is brought
-                // into world space once: the point written as `next` on one
-                // iteration is `current` on the following one and `previous` on
-                // the one after that.
-                let currentSlot = particle.getHistoryIndex(0);
-                let currentX = historyPositions[currentSlot * 3];
-                let currentY = historyPositions[currentSlot * 3 + 1];
-                let currentZ = historyPositions[currentSlot * 3 + 2];
-                if (!samplesInWorld) {
-                    const w = 1 / (m03 * currentX + m13 * currentY + m23 * currentZ + m33);
-                    const tx = (m00 * currentX + m10 * currentY + m20 * currentZ + m30) * w;
-                    const ty = (m01 * currentX + m11 * currentY + m21 * currentZ + m31) * w;
-                    currentZ = (m02 * currentX + m12 * currentY + m22 * currentZ + m32) * w;
-                    currentX = tx;
-                    currentY = ty;
+                const widthScale = systemWorldSpace || particle.parentMatrix ? 1 : objectScale;
+                // Recorded distances are world lengths once the samples are, a local trail's scale with the emitter.
+                const distanceScale = samplesInWorld || particle.parentMatrix ? 1 : objectScale;
+                // A particle at the end of its life records nothing more (TrailParticle.update), so
+                // its trail ends at the last sample: a tip would follow the particle on as a growing spike.
+                const recording = particle.age < particle.life;
+                // The display runs ahead of the last step: draw a tip that far past the head.
+                const tipAhead = recording && stepFraction > 0;
+                const sampleCount = particleHistoryLength + (tipAhead ? 1 : 0);
+                const samples = this.trailSamples(sampleCount);
+
+                // The recorded samples, oldest first, brought into world space once.
+                let slot = particle.getHistoryIndex(0);
+                for (let i = 0; i < particleHistoryLength; i++) {
+                    const p = historyPositions;
+                    samples.writePoint(i, p[slot * 3], p[slot * 3 + 1], p[slot * 3 + 2], samplesInWorld ? null : me);
+                    if (swept) {
+                        const s = historySides;
+                        samples.writeSide(i, s[slot * 3], s[slot * 3 + 1], s[slot * 3 + 2], samplesInWorld ? null : me);
+                    }
+                    samples.size[i] = historySizes[slot];
+                    samples.distance[i] = historyDistances[slot];
+                    const ci = colorFromParticle ? particleColorIndex : slot * 4;
+                    samples.writeColor(i, colors[ci], colors[ci + 1], colors[ci + 2], colors[ci + 3]);
+                    slot = slot + 1 === historyCapacity ? 0 : slot + 1;
                 }
-                let previousX = currentX;
-                let previousY = currentY;
-                let previousZ = currentZ;
-
-                for (let i = 0; i < particleHistoryLength; i++, index += 2) {
-                    let nextX = currentX;
-                    let nextY = currentY;
-                    let nextZ = currentZ;
-                    let nextSlot = currentSlot;
-                    if (i + 1 < particleHistoryLength) {
-                        nextSlot = currentSlot + 1 === historyCapacity ? 0 : currentSlot + 1;
-                        const nextPosIndex = nextSlot * 3;
-                        nextX = historyPositions[nextPosIndex];
-                        nextY = historyPositions[nextPosIndex + 1];
-                        nextZ = historyPositions[nextPosIndex + 2];
-                        if (!samplesInWorld) {
-                            const w = 1 / (m03 * nextX + m13 * nextY + m23 * nextZ + m33);
-                            const tx = (m00 * nextX + m10 * nextY + m20 * nextZ + m30) * w;
-                            const ty = (m01 * nextX + m11 * nextY + m21 * nextZ + m31) * w;
-                            nextZ = (m02 * nextX + m12 * nextY + m22 * nextZ + m32) * w;
-                            nextX = tx;
-                            nextY = ty;
-                        }
+
+                // Live tip: same place a sprite would be drawn this frame, past
+                // the last recorded sample. The recorded ribbon stays put.
+                if (tipAhead) {
+                    const previousHead = particle.previousPosition;
+                    const position = particle.position;
+                    const tip = particleHistoryLength;
+                    let tx = position.x + (position.x - previousHead.x) * stepFraction;
+                    let ty = position.y + (position.y - previousHead.y) * stepFraction;
+                    let tz = position.z + (position.z - previousHead.z) * stepFraction;
+                    samples.writePoint(tip, tx, ty, tz, systemWorldSpace ? null : me);
+                    // The tip's distance along the trail, measured in the space the samples are
+                    // recorded in, as theirs are.
+                    if (samplesInWorld && !systemWorldSpace) {
+                        const w = 1 / (me[3] * tx + me[7] * ty + me[11] * tz + me[15]);
+                        const wx = (me[0] * tx + me[4] * ty + me[8] * tz + me[12]) * w;
+                        const wy = (me[1] * tx + me[5] * ty + me[9] * tz + me[13]) * w;
+                        tz = (me[2] * tx + me[6] * ty + me[10] * tz + me[14]) * w;
+                        tx = wx;
+                        ty = wy;
+                    }
+                    const headSlot = particle.getHistoryIndex(particleHistoryLength - 1) * 3;
+                    const hx = tx - historyPositions[headSlot];
+                    const hy = ty - historyPositions[headSlot + 1];
+                    const hz = tz - historyPositions[headSlot + 2];
+                    samples.distance[tip] = samples.distance[tip - 1] + Math.sqrt(hx * hx + hy * hy + hz * hz);
+                    if (swept) {
+                        // The side as the emitter holds it now.
+                        samples.writeSide(tip, sideAxis!.x, sideAxis!.y, sideAxis!.z, me);
                     }
+                    // As wide as the recorded head, which WidthOverLength has already scaled.
+                    samples.size[tip] = samples.size[tip - 1];
+                    const tipColor = particle.color;
+                    samples.writeColor(tip, tipColor.x, tipColor.y, tipColor.z, tipColor.w);
+                }
 
-                    const currentSize = historySizes[currentSlot];
-                    const currentColorIndex = colorFromParticle ? particleColorIndex : currentSlot * 4;
-                    const currentColorX = colors[currentColorIndex];
-                    const currentColorY = colors[currentColorIndex + 1];
-                    const currentColorZ = colors[currentColorIndex + 2];
-                    const currentColorW = colors[currentColorIndex + 3];
+                // Curved through the samples (see TrailSettings.tessellation),
+                // or drawn through them as they are.
+                const drawn =
+                    tessellation > 0
+                        ? this.tessellate(
+                              samples,
+                              particleHistoryLength,
+                              sampleCount,
+                              tessellation,
+                              curveTension,
+                              swept
+                          )
+                        : samples;
+                const drawnCount = tessellation > 0 ? (sampleCount - 1) * (tessellation + 1) + 1 : sampleCount;
+                const perSegment = tessellation + 1;
+                // The last step ran ahead of the display: the head is drawn where it was at display
+                // time, back along the drawn last segment, rather than a tip folding back over it.
+                // Cut from the drawn curve, so the rest of the ribbon is the same as on any frame.
+                const pullBack = recording && stepFraction < 0 && particleHistoryLength > 1;
+                // How much of the last drawn segment is kept: all but the step's share that ran
+                // ahead. The segment is one step of travel, unless the head has been following the
+                // particle (minVertexDistance), when it is that step's share of its length.
+                let keep = 1 + stepFraction;
+                if (pullBack && samplesFollow) {
+                    const dd = drawn.distance;
+                    const segmentLength = dd[drawnCount - 1] - dd[drawnCount - 1 - perSegment];
+                    if (segmentLength > 1e-9) {
+                        const previousHead = particle.previousPosition;
+                        const position = particle.position;
+                        let sx = position.x - previousHead.x;
+                        let sy = position.y - previousHead.y;
+                        let sz = position.z - previousHead.z;
+                        if (samplesInWorld && !systemWorldSpace) {
+                            const wx = me[0] * sx + me[4] * sy + me[8] * sz;
+                            const wy = me[1] * sx + me[5] * sy + me[9] * sz;
+                            sz = me[2] * sx + me[6] * sy + me[10] * sz;
+                            sx = wx;
+                            sy = wy;
+                        }
+                        const stepTravel = Math.sqrt(sx * sx + sy * sy + sz * sz);
+                        keep = 1 + stepFraction * Math.min(1, stepTravel / segmentLength);
+                    }
+                }
+                if (pullBack) {
+                    this.cutLastSegment(drawn, drawnCount, perSegment, keep, swept);
+                }
+                // The per-segment texture modes span the ribbon in samples: the recorded ones, plus
+                // the part of a step the tip runs ahead or the head was drawn back, so a sample's U
+                // changes smoothly from frame to frame whichever way the residual falls. The others
+                // read each point's distance along the trail, tile mode in world units.
+                const spanFraction = tipAhead ? stepFraction : pullBack ? keep - 1 : 0;
+                const spanSamples = particleHistoryLength - 1 + spanFraction;
+                const invLength = 1 / Math.max(1e-3, spanSamples);
+                const lastSegment = (sampleCount - 2) * perSegment;
+                const dp = drawn.position;
+                const dd = drawn.distance;
+                const tailDistance = dd[0];
+                const headDistance = dd[drawnCount - 1];
+                // A ribbon that has not gone anywhere has no distance to stretch over: lay the
+                // texture out per segment instead, which at least keeps its ends where they belong.
+                const stretch = textureMode === TextureMode.Stretch && headDistance - tailDistance > 1e-6;
+                const invSpanDistance = 1 / Math.max(1e-6, headDistance - tailDistance);
+                // Tile mode: U in repeats of the texture along the trail, anchored where the particle
+                // was born, less the whole repeats behind the tail so U stays small (a texture that
+                // wraps cannot tell) however far the particle has travelled.
+                const tileScale = distanceScale * textureScale;
+                const tileOffset = Math.floor(tailDistance * tileScale);
+                const vTop = (vTileCount - row - 1) * tileHeight;
+                const vBottom = (vTileCount - row) * tileHeight;
+
+                for (let k = 0; k < drawnCount; k++, index += 2) {
+                    const o = k * 3;
+                    const prev = k > 0 ? o - 3 : o;
+                    const next = k + 1 < drawnCount ? o + 3 : o;
+                    const x = dp[o];
+                    const y = dp[o + 1];
+                    const z = dp[o + 2];
+                    const size = drawn.size[k];
 
                     const pi = index * 3;
-                    this.positionBuffer[pi] = currentX;
-                    this.positionBuffer[pi + 1] = currentY;
-                    this.positionBuffer[pi + 2] = currentZ;
-                    this.positionBuffer[pi + 3] = currentX;
-                    this.positionBuffer[pi + 4] = currentY;
-                    this.positionBuffer[pi + 5] = currentZ;
-
-                    this.previousBuffer[pi] = previousX;
-                    this.previousBuffer[pi + 1] = previousY;
-                    this.previousBuffer[pi + 2] = previousZ;
-                    this.previousBuffer[pi + 3] = previousX;
-                    this.previousBuffer[pi + 4] = previousY;
-                    this.previousBuffer[pi + 5] = previousZ;
-
-                    this.nextBuffer[pi] = nextX;
-                    this.nextBuffer[pi + 1] = nextY;
-                    this.nextBuffer[pi + 2] = nextZ;
-                    this.nextBuffer[pi + 3] = nextX;
-                    this.nextBuffer[pi + 4] = nextY;
-                    this.nextBuffer[pi + 5] = nextZ;
-
-                    if (systemWorldSpace || particle.parentMatrix) {
-                        this.widthBuffer[index] = currentSize;
-                        this.widthBuffer[index + 1] = currentSize;
+                    if (swept) {
+                        const ds = drawn.side;
+                        this.writeSweptPair(pi, x, y, z, ds[o], ds[o + 1], ds[o + 2], size * 0.5);
+                        // A zero width keeps the shader from pushing the pair.
+                        this.widthBuffer[index] = 0;
+                        this.widthBuffer[index + 1] = 0;
                     } else {
-                        this.widthBuffer[index] = currentSize * objectScale;
-                        this.widthBuffer[index + 1] = currentSize * objectScale;
+                        this.positionBuffer[pi] = x;
+                        this.positionBuffer[pi + 1] = y;
+                        this.positionBuffer[pi + 2] = z;
+                        this.positionBuffer[pi + 3] = x;
+                        this.positionBuffer[pi + 4] = y;
+                        this.positionBuffer[pi + 5] = z;
+                        this.widthBuffer[index] = size * widthScale;
+                        this.widthBuffer[index + 1] = size * widthScale;
                     }
 
+                    this.previousBuffer[pi] = dp[prev];
+                    this.previousBuffer[pi + 1] = dp[prev + 1];
+                    this.previousBuffer[pi + 2] = dp[prev + 2];
+                    this.previousBuffer[pi + 3] = dp[prev];
+                    this.previousBuffer[pi + 4] = dp[prev + 1];
+                    this.previousBuffer[pi + 5] = dp[prev + 2];
+
+                    this.nextBuffer[pi] = dp[next];
+                    this.nextBuffer[pi + 1] = dp[next + 1];
+                    this.nextBuffer[pi + 2] = dp[next + 2];
+                    this.nextBuffer[pi + 3] = dp[next];
+                    this.nextBuffer[pi + 4] = dp[next + 1];
+                    this.nextBuffer[pi + 5] = dp[next + 2];
+
                     const ui = index * 2;
-                    const along = i * invHistoryLength;
-                    const u = ((uvFromHead ? 1 - along : along) + col) * tileWidth;
+                    let u1: number;
+                    if (stretch) {
+                        const along = (dd[k] - tailDistance) * invSpanDistance;
+                        u1 = (uvFromHead ? 1 - along : along) * textureScale;
+                    } else if (textureMode === TextureMode.Tile) {
+                        // A sample's U holds while it lives; from the particle back with uvFromHead.
+                        u1 = uvFromHead ? (headDistance - dd[k]) * tileScale : dd[k] * tileScale - tileOffset;
+                    } else {
+                        // Where this point sits along the ribbon, in samples.
+                        let at = k / perSegment;
+                        if (k > lastSegment && (tipAhead || pullBack)) {
+                            const into = (k - lastSegment) / perSegment;
+                            at = tipAhead
+                                ? particleHistoryLength - 1 + stepFraction * into
+                                : particleHistoryLength - 2 + keep * into;
+                        }
+                        if (textureMode !== TextureMode.RepeatPerSegment) {
+                            const along = Math.min(1, at * invLength);
+                            u1 = (uvFromHead ? 1 - along : along) * textureScale;
+                        } else {
+                            u1 = (uvFromHead ? spanSamples - at : at) * textureScale;
+                        }
+                    }
+                    const u = (u1 + col) * tileWidth;
                     this.uvBuffer[ui] = u;
-                    this.uvBuffer[ui + 1] = (vTileCount - row - 1) * tileHeight;
+                    this.uvBuffer[ui + 1] = vTop;
                     this.uvBuffer[ui + 2] = u;
-                    this.uvBuffer[ui + 3] = (vTileCount - row) * tileHeight;
+                    this.uvBuffer[ui + 3] = vBottom;
+                    if (uv1) {
+                        uv1[ui] = u1;
+                        uv1[ui + 1] = 0;
+                        uv1[ui + 2] = u1;
+                        uv1[ui + 3] = 1;
+                    }
 
+                    const dc = drawn.color;
+                    const c = k * 4;
                     const cci = index * 4;
-                    this.colorBuffer[cci] = currentColorX;
-                    this.colorBuffer[cci + 1] = currentColorY;
-                    this.colorBuffer[cci + 2] = currentColorZ;
-                    this.colorBuffer[cci + 3] = currentColorW;
-                    this.colorBuffer[cci + 4] = currentColorX;
-                    this.colorBuffer[cci + 5] = currentColorY;
-                    this.colorBuffer[cci + 6] = currentColorZ;
-                    this.colorBuffer[cci + 7] = currentColorW;
-
-                    if (i + 1 < particleHistoryLength) {
+                    this.colorBuffer[cci] = dc[c];
+                    this.colorBuffer[cci + 1] = dc[c + 1];
+                    this.colorBuffer[cci + 2] = dc[c + 2];
+                    this.colorBuffer[cci + 3] = dc[c + 3];
+                    this.colorBuffer[cci + 4] = dc[c];
+                    this.colorBuffer[cci + 5] = dc[c + 1];
+                    this.colorBuffer[cci + 6] = dc[c + 2];
+                    this.colorBuffer[cci + 7] = dc[c + 3];
+
+                    if (k + 1 < drawnCount) {
                         this.indexBuffer[triangles * 3] = index;
                         this.indexBuffer[triangles * 3 + 1] = index + 1;
                         this.indexBuffer[triangles * 3 + 2] = index + 2;
@@ -451,108 +838,17 @@ export class TrailBatch extends VFXBatch {
                         this.indexBuffer[triangles * 3 + 2] = index + 3;
                         triangles++;
                     }
-
-                    previousX = currentX;
-                    previousY = currentY;
-                    previousZ = currentZ;
-                    currentX = nextX;
-                    currentY = nextY;
-                    currentZ = nextZ;
-                    currentSlot = nextSlot;
                 }
-
-                // Live tip: same place a sprite would be drawn this frame, past
-                // the last recorded sample. The recorded ribbon stays put.
-                if (stepFraction !== 0) {
-                    const previousHead = particle.previousPosition;
-                    const position = particle.position;
-                    let tipX = position.x + (position.x - previousHead.x) * stepFraction;
-                    let tipY = position.y + (position.y - previousHead.y) * stepFraction;
-                    let tipZ = position.z + (position.z - previousHead.z) * stepFraction;
-                    const headIndex = index - 2;
-                    const headX = this.positionBuffer[headIndex * 3];
-                    const headY = this.positionBuffer[headIndex * 3 + 1];
-                    const headZ = this.positionBuffer[headIndex * 3 + 2];
-
-                    if (!systemWorldSpace) {
-                        const w = 1 / (m03 * tipX + m13 * tipY + m23 * tipZ + m33);
-                        const tx = (m00 * tipX + m10 * tipY + m20 * tipZ + m30) * w;
-                        const ty = (m01 * tipX + m11 * tipY + m21 * tipZ + m31) * w;
-                        tipZ = (m02 * tipX + m12 * tipY + m22 * tipZ + m32) * w;
-                        tipX = tx;
-                        tipY = ty;
-                    }
-
-                    const tipPi = index * 3;
-                    this.positionBuffer[tipPi] = tipX;
-                    this.positionBuffer[tipPi + 1] = tipY;
-                    this.positionBuffer[tipPi + 2] = tipZ;
-                    this.positionBuffer[tipPi + 3] = tipX;
-                    this.positionBuffer[tipPi + 4] = tipY;
-                    this.positionBuffer[tipPi + 5] = tipZ;
-
-                    this.previousBuffer[tipPi] = headX;
-                    this.previousBuffer[tipPi + 1] = headY;
-                    this.previousBuffer[tipPi + 2] = headZ;
-                    this.previousBuffer[tipPi + 3] = headX;
-                    this.previousBuffer[tipPi + 4] = headY;
-                    this.previousBuffer[tipPi + 5] = headZ;
-
-                    this.nextBuffer[tipPi] = tipX;
-                    this.nextBuffer[tipPi + 1] = tipY;
-                    this.nextBuffer[tipPi + 2] = tipZ;
-                    this.nextBuffer[tipPi + 3] = tipX;
-                    this.nextBuffer[tipPi + 4] = tipY;
-                    this.nextBuffer[tipPi + 5] = tipZ;
-
-                    // The recorded head's `next` was itself; point it at the tip
-                    // so the shader builds the live segment from one version of
-                    // each endpoint.
-                    const headPi = headIndex * 3;
-                    this.nextBuffer[headPi] = tipX;
-                    this.nextBuffer[headPi + 1] = tipY;
-                    this.nextBuffer[headPi + 2] = tipZ;
-                    this.nextBuffer[headPi + 3] = tipX;
-                    this.nextBuffer[headPi + 4] = tipY;
-                    this.nextBuffer[headPi + 5] = tipZ;
-
-                    const tipSize = particle.size.x;
-                    if (systemWorldSpace || particle.parentMatrix) {
-                        this.widthBuffer[index] = tipSize;
-                        this.widthBuffer[index + 1] = tipSize;
-                    } else {
-                        this.widthBuffer[index] = tipSize * objectScale;
-                        this.widthBuffer[index + 1] = tipSize * objectScale;
-                    }
-
-                    const tipUi = index * 2;
-                    const tipU = ((uvFromHead ? 0 : 1) + col) * tileWidth;
-                    this.uvBuffer[tipUi] = tipU;
-                    this.uvBuffer[tipUi + 1] = (vTileCount - row - 1) * tileHeight;
-                    this.uvBuffer[tipUi + 2] = tipU;
-                    this.uvBuffer[tipUi + 3] = (vTileCount - row) * tileHeight;
-
-                    const tipColor = particle.color;
-                    const tipCi = index * 4;
-                    this.colorBuffer[tipCi] = tipColor.x;
-                    this.colorBuffer[tipCi + 1] = tipColor.y;
-                    this.colorBuffer[tipCi + 2] = tipColor.z;
-                    this.colorBuffer[tipCi + 3] = tipColor.w;
-                    this.colorBuffer[tipCi + 4] = tipColor.x;
-                    this.colorBuffer[tipCi + 5] = tipColor.y;
-                    this.colorBuffer[tipCi + 6] = tipColor.z;
-                    this.colorBuffer[tipCi + 7] = tipColor.w;
-
-                    this.indexBuffer[triangles * 3] = headIndex;
-                    this.indexBuffer[triangles * 3 + 1] = headIndex + 1;
-                    this.indexBuffer[triangles * 3 + 2] = index;
-                    triangles++;
-                    this.indexBuffer[triangles * 3] = index;
-                    this.indexBuffer[triangles * 3 + 1] = headIndex + 1;
-                    this.indexBuffer[triangles * 3 + 2] = index + 1;
-                    triangles++;
-
-                    index += 2;
+            }
+            const tint = (system as ParticleSystem).tint;
+            if (tint !== undefined) {
+                // As SpriteBatch does: the system's tint over its ribbons' vertices.
+                const colors = this.colorBuffer;
+                for (let o = firstVertex * 4, end = index * 4; o < end; o += 4) {
+                    colors[o] *= tint.x;
+                    colors[o + 1] *= tint.y;
+                    colors[o + 2] *= tint.z;
+                    colors[o + 3] *= tint.w;
                 }
             }
             this.measureSystemBounds(system as ParticleSystem, firstVertex, index);
@@ -578,8 +874,8 @@ export class TrailBatch extends VFXBatch {
         let maxX = -Infinity;
         let maxY = -Infinity;
         let maxZ = -Infinity;
-        // Each sample writes its position twice (both ribbon edges); one of the pair is enough.
-        for (let o = fromVertex * 3, end = toVertex * 3; o < end; o += 6) {
+        // Both of each pair: a swept ribbon's edges lie apart, a facing one's coincide.
+        for (let o = fromVertex * 3, end = toVertex * 3; o < end; o += 3) {
             const x = positions[o];
             const y = positions[o + 1];
             const z = positions[o + 2];
@@ -614,6 +910,9 @@ export class TrailBatch extends VFXBatch {
             // the high-water mark of every system in the batch.
             this.mesh.updateVerticesData(VertexBuffer.PositionKind, this.positionBuffer.subarray(0, index * 3));
             this.mesh.updateVerticesData(VertexBuffer.UVKind, this.uvBuffer.subarray(0, index * 2));
+            if (this.uv1Buffer) {
+                this.mesh.updateVerticesData(VertexBuffer.UV2Kind, this.uv1Buffer.subarray(0, index * 2));
+            }
             // Straight to the GPU buffer. Going through `mesh.updateIndices` with a
             // range whose length changes every frame makes Babylon copy the
             // indices, rebuild the sub mesh and recompute its bounds from the
@@ -674,6 +973,7 @@ export class TrailBatch extends VFXBatch {
         }
     }
 
+    /** @internal */
     dispose(): void {
         if (this.mesh.material) {
             this.mesh.material.dispose();