babylon.quarks 0.19.0 → 0.20.0

package/src/SpriteBatch.ts

@@ -7,6 +7,7 @@ import {Mesh} from '@babylonjs/core/Meshes/mesh';
 import {VertexData} from '@babylonjs/core/Meshes/mesh.vertexData';
 import {Scene} from '@babylonjs/core/scene';
 import {
+    IParticle,
     IParticleSystem,
     Matrix3,
     ParticleStore,
@@ -208,6 +209,10 @@ export class SpriteBatch extends VFXBatch {
         if (this.settings.renderMode === RenderMode.HorizontalBillBoard) {
             defines.push('HORIZONTAL');
         }
+        const pivot = SpriteBatch.takesPivotAndFlip(this.settings.renderMode) ? this.settings.pivot : undefined;
+        if (pivot) {
+            defines.push('PIVOT');
+        }
 
         const shaderLanguage = shaderLanguageFor(this.scene.getEngine());
         registerShaders(shaderName, vertexShader, fragmentShader, shaderLanguage);
@@ -246,6 +251,9 @@ export class SpriteBatch extends VFXBatch {
         if (this.settings.materialAlphaTest > 0) {
             uniforms.push('alphaTest');
         }
+        if (pivot) {
+            uniforms.push('pivot');
+        }
         if (this.settings.renderMode === RenderMode.Mesh) {
             uniforms.push('lightDirection');
             uniforms.push('lightColor');
@@ -311,6 +319,9 @@ export class SpriteBatch extends VFXBatch {
         if (this.settings.materialAlphaTest > 0) {
             mat.setFloat('alphaTest', this.settings.materialAlphaTest);
         }
+        if (pivot) {
+            mat.setVector3('pivot', new BVector3(pivot.x, pivot.y, pivot.z));
+        }
         if (this.settings.renderMode === RenderMode.Mesh) {
             mat.setVector3('lightDirection', new BVector3(0.4, -1, 0.6));
             mat.setVector3('lightColor', new BVector3(1, 1, 1));
@@ -343,6 +354,8 @@ export class SpriteBatch extends VFXBatch {
     private rotationMat_ = new Matrix3();
     private rotationMat2_ = new Matrix3();
     private lastStretchedSpeedFactor = Number.NaN;
+    /** Slot 0 holds the zero-alpha instance since the batch last went empty. */
+    private clearedInstanceUploaded = false;
 
     update(): void {
         let index = 0;
@@ -350,6 +363,7 @@ export class SpriteBatch extends VFXBatch {
         const renderMode = this.settings.renderMode;
         const isMeshRender = renderMode === RenderMode.Mesh;
         const isStretchedRender = renderMode === RenderMode.StretchedBillBoard;
+        const flipsSprites = SpriteBatch.takesPivotAndFlip(renderMode);
 
         const visibleSystems = this.getVisibleSystems();
         for (let i = 0; i < visibleSystems.length; i++) {
@@ -361,15 +375,34 @@ export class SpriteBatch extends VFXBatch {
 
         for (let s = 0; s < visibleSystems.length; s++) {
             const system = visibleSystems[s];
-            const particles = system.particles;
             const particleNum = system.particleNum;
+            // A finished or between-bursts system adds nothing to the batch. With many effects
+            // loaded most systems are idle at any moment, so skip their per-system setup.
+            if (particleNum === 0) {
+                continue;
+            }
+            const particles = system.particles;
             const rotation = this.quaternion2_;
             const translation = this.vector2_;
             const scale = this.vector3_;
             const systemWorldSpace = system.worldSpace;
             const emitterMatrix = system.emitter.matrixWorld;
-            emitterMatrix.decompose(translation, rotation, scale);
-            this.rotationMat_.setFromMatrix4(emitterMatrix);
+            // Only a local-space mesh needs the emitter's turn as a quaternion, and only a
+            // local-space stretched billboard its rotation matrix. Everything else needs at most
+            // the scale, which the basis column lengths give without a full decompose.
+            if (isMeshRender && !systemWorldSpace) {
+                emitterMatrix.decompose(translation, rotation, scale);
+            } else {
+                const e = emitterMatrix.elements;
+                scale.set(
+                    Math.sqrt(e[0] * e[0] + e[1] * e[1] + e[2] * e[2]),
+                    Math.sqrt(e[4] * e[4] + e[5] * e[5] + e[6] * e[6]),
+                    Math.sqrt(e[8] * e[8] + e[9] * e[9] + e[10] * e[10])
+                );
+            }
+            if (isStretchedRender && !systemWorldSpace) {
+                this.rotationMat_.setFromMatrix4(emitterMatrix);
+            }
             const absScaleX = Math.abs(scale.x);
             const absScaleY = Math.abs(scale.y);
             const absScaleZ = Math.abs(scale.z);
@@ -487,6 +520,7 @@ export class SpriteBatch extends VFXBatch {
                 copiedPositionAndSize = true;
             }
 
+            const firstIndex = index;
             for (let j = 0; j < particleNum; j++, index++) {
                 const particle = particles[j] as SpriteParticle;
 
@@ -600,6 +634,10 @@ export class SpriteBatch extends VFXBatch {
                     this.velocityBuffer[vi + 3] = lengthFactor;
                 }
             }
+
+            if (flipsSprites && system.flip !== undefined) {
+                SpriteBatch.applyFlip(this.sizeBuffer, firstIndex * 3, particles, particleNum);
+            }
         }
 
         if (isStretchedRender && visibleSystems.length > 0) {
@@ -611,9 +649,15 @@ export class SpriteBatch extends VFXBatch {
         this.mesh.forcedInstanceCount = index;
 
         if (index === 0) {
-            this.uploadClearedInstance(isMeshRender, isStretchedRender);
+            // 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.clearedInstanceUploaded = true;
+            }
             return;
         }
+        this.clearedInstanceUploaded = false;
 
         // Upload only the slots actually filled this frame: the buffers are sized
         // for the high-water mark and are usually far larger than the live count.
@@ -648,6 +692,33 @@ export class SpriteBatch extends VFXBatch {
         }
     }
 
+    /** The quads that take a pivot and flip: every billboard kind, stretched included, but not meshes. */
+    private static takesPivotAndFlip(renderMode: RenderMode): boolean {
+        return (
+            renderMode === RenderMode.BillBoard ||
+            renderMode === RenderMode.StretchedBillBoard ||
+            renderMode === RenderMode.VerticalBillBoard ||
+            renderMode === RenderMode.HorizontalBillBoard
+        );
+    }
+
+    /**
+     * Negates the size of each flipped particle along the axes it flips on,
+     * starting at `base` in `sizes`. The billboard shader scales the quad by
+     * the size, so a negative one mirrors it — and with it the texture, the
+     * quad being centred — the way Unity's renderer Flip mirrors U and V. The
+     * stretched shader reads the sign and mirrors the texture coordinates.
+     */
+    private static applyFlip(sizes: Float32Array, base: number, particles: IParticle[], count: number): void {
+        for (let j = 0, o = base; j < count; j++, o += 3) {
+            const flip = (particles[j] as SpriteParticle).flip;
+            if (flip !== 0) {
+                if (flip & 1) sizes[o] = -sizes[o];
+                if (flip & 2) sizes[o + 1] = -sizes[o + 1];
+            }
+        }
+    }
+
     /**
      * The fraction `f` of a turn, as a normalised lerp from no rotation toward
      * `step`, written into `out`.

package/src/TrailBatch.ts

@@ -276,9 +276,13 @@ export class TrailBatch extends VFXBatch {
             // body still and the tip moving without that pulse. A trail pinned
             // to the emitter's origin is driven by the emitter's transform
             // rather than by the particle's velocity, so it is left alone.
-            const residual = (system.rendererEmitterSettings as TrailSettings).followLocalOrigin
-                ? 0
-                : (system.simulationResidual ?? 0);
+            const trailSettings = system.rendererEmitterSettings as TrailSettings;
+            const uvFromHead = Boolean(trailSettings.uvFromHead);
+            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);
+            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.
@@ -293,7 +297,10 @@ export class TrailBatch extends VFXBatch {
                 const historyCapacity = particle.historyCapacity;
                 const historyPositions = particle.historyPositions;
                 const historySizes = particle.historySizes;
-                const historyColors = particle.historyColors;
+                // 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);
                 const particleMatrix = particle.parentMatrix as unknown as Matrix4 | undefined;
@@ -314,7 +321,10 @@ export class TrailBatch extends VFXBatch {
                     m31 = me[13],
                     m32 = me[14],
                     m33 = me[15];
-                const invHistoryLength = 1 / particleHistoryLength;
+                // 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.
@@ -344,16 +354,16 @@ export class TrailBatch extends VFXBatch {
                     let nextZ = historyPositions[nextPosIndex + 2];
 
                     const currentSize = historySizes[currentSlot];
-                    const currentColorIndex = currentSlot * 4;
-                    const currentColorX = historyColors[currentColorIndex];
-                    const currentColorY = historyColors[currentColorIndex + 1];
-                    const currentColorZ = historyColors[currentColorIndex + 2];
-                    const currentColorW = historyColors[currentColorIndex + 3];
+                    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];
 
                     previousSlot = currentSlot;
                     currentSlot = nextSlot;
 
-                    if (!systemWorldSpace) {
+                    if (!samplesInWorld) {
                         // Inlined point transforms — three per trail sample.
                         let w = 1 / (m03 * currentX + m13 * currentY + m23 * currentZ + m33);
                         let tx = (m00 * currentX + m10 * currentY + m20 * currentZ + m30) * w;
@@ -411,7 +421,8 @@ export class TrailBatch extends VFXBatch {
                     }
 
                     const ui = index * 2;
-                    const u = (i * invHistoryLength + col) * tileWidth;
+                    const along = i * invHistoryLength;
+                    const u = ((uvFromHead ? 1 - along : along) + col) * tileWidth;
                     this.uvBuffer[ui] = u;
                     this.uvBuffer[ui + 1] = (vTileCount - row - 1) * tileHeight;
                     this.uvBuffer[ui + 2] = u;
@@ -507,7 +518,7 @@ export class TrailBatch extends VFXBatch {
                     }
 
                     const tipUi = index * 2;
-                    const tipU = (1 + col) * tileWidth;
+                    const tipU = ((uvFromHead ? 0 : 1) + col) * tileWidth;
                     this.uvBuffer[tipUi] = tipU;
                     this.uvBuffer[tipUi + 1] = (vTileCount - row - 1) * tileHeight;
                     this.uvBuffer[tipUi + 2] = tipU;

package/src/VFXBatch.ts

@@ -2,7 +2,7 @@ import {BaseTexture} from '@babylonjs/core/Materials/Textures/baseTexture';
 import {ShaderMaterial} from '@babylonjs/core/Materials/shaderMaterial';
 import {Mesh} from '@babylonjs/core/Meshes/mesh';
 import {Scene} from '@babylonjs/core/scene';
-import {IParticleSystem} from 'quarks.core';
+import {IParticleSystem, Vector3} from 'quarks.core';
 import {VFXBatchSettings} from './BatchedRenderer';
 
 export enum RenderMode {
@@ -38,6 +38,8 @@ export interface StoredBatchSettings {
     reflectionFaces: BaseTexture[] | null;
     reflectionAtlas: BaseTexture | null;
     layerMask: number;
+    /** Billboard pivot in particle-size units, see {@link VFXBatchSettings.pivot}. */
+    pivot?: Vector3;
 }
 
 export abstract class VFXBatch {
@@ -75,6 +77,7 @@ export abstract class VFXBatch {
             reflectionLevel: settings.reflectionLevel ?? 1,
             reflectionFaces: settings.reflectionFaces ?? null,
             reflectionAtlas: settings.reflectionAtlas ?? null,
+            pivot: settings.pivot?.clone(),
             layerMask: settings.layerMask,
         };
         this.mesh = new Mesh('vfxBatch', scene);

package/src/shaders/particle_vert.glsl.ts

@@ -21,6 +21,11 @@ uniform float tileCountX;
 uniform float tileCountY;
 #endif
 
+#ifdef PIVOT
+// Quad offset in particle-size units: xy in the quad's plane, z toward the camera.
+uniform vec3 pivot;
+#endif
+
 // Varyings
 varying vec2 vUV;
 varying vec4 vColor;
@@ -37,7 +42,12 @@ void main() {
     float c = cos(rotation);
     float s = sin(rotation);
 
+    // A negative size mirrors the quad, which is how flipped particles arrive.
     vec2 alignedPosition = position.xy * size.xy;
+#ifdef PIVOT
+    // The pivot turns with the particle but is not mirrored with it.
+    alignedPosition += pivot.xy * abs(size.xy);
+#endif
     vec2 rotatedPosition;
     rotatedPosition.x = c * alignedPosition.x - s * alignedPosition.y;
     rotatedPosition.y = s * alignedPosition.x + c * alignedPosition.y;
@@ -46,6 +56,9 @@ void main() {
     vec4 mvPosition = world * vec4(offset, 1.0);
     mvPosition.x += rotatedPosition.x;
     mvPosition.z -= rotatedPosition.y;
+#ifdef PIVOT
+    mvPosition.y += pivot.z * abs(size.x);
+#endif
     mvPosition = view * mvPosition;
 #elif defined(VERTICAL)
     vec4 mvPosition = world * vec4(offset, 1.0);
@@ -55,6 +68,13 @@ void main() {
 #else
     vec4 mvPosition = view * world * vec4(offset, 1.0);
     mvPosition.xy += rotatedPosition;
+#endif
+#ifdef PIVOT
+#ifndef HORIZONTAL
+    // Toward the camera along its view axis, whichever way the view space
+    // faces: anything in front of the camera has the sign of the far side.
+    mvPosition.z -= sign(mvPosition.z) * pivot.z * abs(size.x);
+#endif
 #endif
 
     gl_Position = projection * mvPosition;

package/src/shaders/particle_vert.wgsl.ts

@@ -20,6 +20,11 @@ uniform tileCountX: f32;
 uniform tileCountY: f32;
 #endif
 
+#ifdef PIVOT
+// Quad offset in particle-size units: xy in the quad's plane, z toward the camera.
+uniform pivot: vec3f;
+#endif
+
 // Varyings
 varying vUV: vec2f;
 varying vColor: vec4f;
@@ -37,7 +42,12 @@ fn main(input: VertexInputs) -> FragmentInputs {
     let c = cos(vertexInputs.rotation);
     let s = sin(vertexInputs.rotation);
 
-    let alignedPosition = vertexInputs.position.xy * vertexInputs.size.xy;
+    // A negative size mirrors the quad, which is how flipped particles arrive.
+    var alignedPosition = vertexInputs.position.xy * vertexInputs.size.xy;
+#ifdef PIVOT
+    // The pivot turns with the particle but is not mirrored with it.
+    alignedPosition += uniforms.pivot.xy * abs(vertexInputs.size.xy);
+#endif
     let rotatedPosition = vec2f(
         c * alignedPosition.x - s * alignedPosition.y,
         s * alignedPosition.x + c * alignedPosition.y);
@@ -46,6 +56,9 @@ fn main(input: VertexInputs) -> FragmentInputs {
     var mvPosition = uniforms.world * vec4f(vertexInputs.offset, 1.0);
     mvPosition.x += rotatedPosition.x;
     mvPosition.z -= rotatedPosition.y;
+#ifdef PIVOT
+    mvPosition.y += uniforms.pivot.z * abs(vertexInputs.size.x);
+#endif
     mvPosition = uniforms.view * mvPosition;
 #elif defined(VERTICAL)
     var mvPosition = uniforms.world * vec4f(vertexInputs.offset, 1.0);
@@ -56,6 +69,13 @@ fn main(input: VertexInputs) -> FragmentInputs {
     var mvPosition = uniforms.view * uniforms.world * vec4f(vertexInputs.offset, 1.0);
     mvPosition.x += rotatedPosition.x;
     mvPosition.y += rotatedPosition.y;
+#endif
+#ifdef PIVOT
+#ifndef HORIZONTAL
+    // Toward the camera along its view axis, whichever way the view space
+    // faces: anything in front of the camera has the sign of the far side.
+    mvPosition.z -= sign(mvPosition.z) * uniforms.pivot.z * abs(vertexInputs.size.x);
+#endif
 #endif
 
     let clipPosition = uniforms.projection * mvPosition;

package/src/shaders/stretched_bb_particle_vert.glsl.ts

@@ -22,6 +22,11 @@ uniform float tileCountX;
 uniform float tileCountY;
 #endif
 
+#ifdef PIVOT
+// Streak offset in particle-size units: x from head to tail, y across.
+uniform vec3 pivot;
+#endif
+
 // Varyings
 varying vec2 vUV;
 varying vec4 vColor;
@@ -36,7 +41,9 @@ varying float linearDepth;
 
 void main() {
     float lengthFactor = velocity.w;
-    float avgSize = (size.x + size.y) * 0.5;
+    // A flipped particle arrives with a negative size: the streak keeps its
+    // extent and mirrors its texture instead (see quadUV below).
+    float avgSize = (abs(size.x) + abs(size.y)) * 0.5;
     vec4 mvPosition = view * world * vec4(offset, 1.0);
     vec3 viewVelocity = mat3(view * world) * velocity.xyz;
     float vlength = length(viewVelocity);
@@ -44,11 +51,17 @@ void main() {
     // Deriving it via normalize keeps the stretch aligned even when the speed contribution is ~0
     // (e.g. speedFactor 0), instead of collapsing the whole burst onto a fixed screen axis.
     vec3 vdir = vlength > 0.000001 ? viewVelocity / vlength : vec3(0.0, 0.0, 1.0);
-    mvPosition.xyz += position.y * normalize(cross(mvPosition.xyz, vdir)) * avgSize;
+    vec3 side = normalize(cross(mvPosition.xyz, vdir));
+    mvPosition.xyz += position.y * side * avgSize;
     // Equivalent to viewVelocity * (1.0 + lengthFactor / vlength) for moving particles, but the
     // size-based term (vdir * lengthFactor) survives when the velocity contribution vanishes.
     mvPosition.xyz -= (position.x + 0.5) * (viewVelocity + vdir * lengthFactor) * avgSize;
+#ifdef PIVOT
+    // In particle-size units along the quad's own axes: x from head to tail, y across.
+    mvPosition.xyz += (pivot.y * side - pivot.x * vdir) * avgSize;
+#endif
     gl_Position = projection * mvPosition;
+    vec2 quadUV = vec2(size.x < 0.0 ? 1.0 - uv.x : uv.x, size.y < 0.0 ? 1.0 - uv.y : uv.y);
 #ifdef SOFT_PARTICLES
     projPosition = gl_Position;
     linearDepth = -mvPosition.z;
@@ -59,16 +72,16 @@ void main() {
         float baseTile = floor(uvTile);
         float tileU = mod(baseTile, tc.x) / tc.x;
         float tileV = 1.0 - floor(baseTile / tc.x) / tc.y - 1.0 / tc.y;
-        vUV = uv / tc + vec2(tileU, tileV);
+        vUV = quadUV / tc + vec2(tileU, tileV);
         #ifdef TILE_BLEND
             float nextTile = ceil(uvTile);
             float nextU = mod(nextTile, tc.x) / tc.x;
             float nextV = 1.0 - floor(nextTile / tc.x) / tc.y - 1.0 / tc.y;
-            vUV2 = uv / tc + vec2(nextU, nextV);
+            vUV2 = quadUV / tc + vec2(nextU, nextV);
             vTileBlend = fract(uvTile);
         #endif
     #else
-        vUV = uv;
+        vUV = quadUV;
     #endif
 
     vColor = color;

package/src/shaders/stretched_bb_particle_vert.wgsl.ts

@@ -22,6 +22,11 @@ uniform tileCountX: f32;
 uniform tileCountY: f32;
 #endif
 
+#ifdef PIVOT
+// Streak offset in particle-size units: x from head to tail, y across.
+uniform pivot: vec3f;
+#endif
+
 // Varyings
 varying vUV: vec2f;
 varying vColor: vec4f;
@@ -37,7 +42,9 @@ varying linearDepth: f32;
 @vertex
 fn main(input: VertexInputs) -> FragmentInputs {
     let lengthFactor = vertexInputs.velocity.w;
-    let avgSize = (vertexInputs.size.x + vertexInputs.size.y) * 0.5;
+    // A flipped particle arrives with a negative size: the streak keeps its
+    // extent and mirrors its texture instead (see quadUV below).
+    let avgSize = (abs(vertexInputs.size.x) + abs(vertexInputs.size.y)) * 0.5;
     var mvPosition = uniforms.view * uniforms.world * vec4f(vertexInputs.offset, 1.0);
     let viewWorld = uniforms.view * uniforms.world;
     let viewWorld3 = mat3x3f(viewWorld[0].xyz, viewWorld[1].xyz, viewWorld[2].xyz);
@@ -50,17 +57,23 @@ fn main(input: VertexInputs) -> FragmentInputs {
     if (vlength > 0.000001) {
         vdir = viewVelocity / vlength;
     }
-    let widthOffset = vertexInputs.position.y * normalize(cross(mvPosition.xyz, vdir)) * avgSize;
+    let side = normalize(cross(mvPosition.xyz, vdir));
+    let widthOffset = vertexInputs.position.y * side * avgSize;
     // Equivalent to viewVelocity * (1.0 + lengthFactor / vlength) for moving particles, but the
     // size-based term (vdir * lengthFactor) survives when the velocity contribution vanishes.
     let lengthOffset = (vertexInputs.position.x + 0.5) * (viewVelocity + vdir * lengthFactor) * avgSize;
-    let stretched = mvPosition.xyz + widthOffset - lengthOffset;
+    var stretched = mvPosition.xyz + widthOffset - lengthOffset;
+#ifdef PIVOT
+    // In particle-size units along the quad's own axes: x from head to tail, y across.
+    stretched += (uniforms.pivot.y * side - uniforms.pivot.x * vdir) * avgSize;
+#endif
     mvPosition.x = stretched.x;
     mvPosition.y = stretched.y;
     mvPosition.z = stretched.z;
 
     let clipPosition = uniforms.projection * mvPosition;
     vertexOutputs.position = clipPosition;
+    let quadUV = select(vertexInputs.uv, 1.0 - vertexInputs.uv, vertexInputs.size.xy < vec2f(0.0));
 #ifdef SOFT_PARTICLES
     vertexOutputs.projPosition = clipPosition;
     vertexOutputs.linearDepth = -mvPosition.z;
@@ -71,16 +84,16 @@ fn main(input: VertexInputs) -> FragmentInputs {
         let baseTile = floor(vertexInputs.uvTile);
         let tileU = (baseTile % tc.x) / tc.x;
         let tileV = 1.0 - floor(baseTile / tc.x) / tc.y - 1.0 / tc.y;
-        vertexOutputs.vUV = vertexInputs.uv / tc + vec2f(tileU, tileV);
+        vertexOutputs.vUV = quadUV / tc + vec2f(tileU, tileV);
         #ifdef TILE_BLEND
             let nextTile = ceil(vertexInputs.uvTile);
             let nextU = (nextTile % tc.x) / tc.x;
             let nextV = 1.0 - floor(nextTile / tc.x) / tc.y - 1.0 / tc.y;
-            vertexOutputs.vUV2 = vertexInputs.uv / tc + vec2f(nextU, nextV);
+            vertexOutputs.vUV2 = quadUV / tc + vec2f(nextU, nextV);
             vertexOutputs.vTileBlend = fract(vertexInputs.uvTile);
         #endif
     #else
-        vertexOutputs.vUV = vertexInputs.uv;
+        vertexOutputs.vUV = quadUV;
     #endif
 
     vertexOutputs.vColor = vertexInputs.color;