babylon.quarks 0.24.1 → 0.26.0

package/src/shaders/chunks/surface.ts

@@ -0,0 +1,268 @@
+/**
+ * Texture effects shared by the sprite, mesh and trail fragment shaders, in
+ * both shader languages: UV scrolling, UV distortion, a gradient map and
+ * alpha erosion.
+ *
+ * - `UV1`: the vertex shader passes `vUV1`, the particle's own UV that the
+ *   sprite sheet never moves (see `UVChannel`). The distortion noise and the
+ *   erosion mask read it under `UV_DISTORTION_UV1` / `EROSION_MASK_UV1`, the
+ *   map's UV (`vUV`) otherwise.
+ * - Each texture can be laid by a transform, `(tiling u, tiling v, offset u,
+ *   offset v)`: sampled at `uv * transform.xy + transform.zw`, the offset
+ *   holding its scroll, wrapped on the CPU so it never loses precision (see
+ *   `TextureUV`).
+ * - `MAP_TRANSFORM`: the map is laid by `mapTransform`, on `vUV1` under
+ *   `MAP_UV1` (where the sheet's second tile is not blended, the sheet not
+ *   applying), on the sheet's UV otherwise, where a scroll runs into the
+ *   neighbouring tiles.
+ * - `UV_DISTORTION`: the map's UV is pushed about by a noise texture
+ *   (`distortionMap`, red and green around 0.5, laid by `distortionTransform`)
+ *   by up to `distortionStrength` UV units: the heat shimmer, licking and
+ *   breathing of fire and auras. On a sprite sheet the pushed UV can reach
+ *   the neighbouring tile.
+ * - `GRADIENT_MAP`: the map's texel dotted with `gradientMapChannel` (one
+ *   channel, or luminance weights) picks a colour along U of `gradientMap`.
+ *   The ramp's alpha multiplies the map's, or replaces it when the lookup is
+ *   by alpha (`gradientMapChannel.a` 1). The particle colour still tints the
+ *   result. `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`, laid by
+ *   `erosionMaskTransform`; 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); the edge band just above the cut glows in
+ *   `erosionEdgeColor`. 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 MAP_TRANSFORM
+uniform vec4 mapTransform;
+#endif
+#ifdef UV_DISTORTION
+uniform sampler2D distortionMap;
+uniform vec4 distortionTransform;
+uniform float distortionStrength;
+#endif
+#ifdef GRADIENT_MAP
+uniform sampler2D gradientMap;
+uniform vec2 gradientMapRange;
+uniform vec4 gradientMapChannel;
+#endif
+#ifdef EROSION
+uniform vec2 erosionParams;
+uniform vec3 erosionEdgeColor;
+#ifdef EROSION_MASK
+uniform sampler2D erosionMask;
+uniform vec4 erosionMaskTransform;
+#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;
+#if defined(MAP_TRANSFORM) && defined(MAP_UV1)
+    vec2 mapUV = vUV1 * mapTransform.xy + mapTransform.zw;
+#elif defined(MAP_TRANSFORM)
+    vec2 mapUV = vUV * mapTransform.xy + mapTransform.zw;
+#else
+    vec2 mapUV = vUV;
+#endif
+#ifdef UV_DISTORTION
+    #ifdef UV_DISTORTION_UV1
+        vec2 distortionUV = vUV1;
+    #else
+        vec2 distortionUV = vUV;
+    #endif
+    vec2 distortion = (texture2D(distortionMap, distortionUV * distortionTransform.xy + distortionTransform.zw).rg - 0.5) * 2.0 * distortionStrength;
+    mapUV += distortion;
+#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
+    #if defined(MAP_TRANSFORM) && defined(MAP_UV1)
+        vec2 mapUV2 = mapUV;
+    #else
+        #ifdef MAP_TRANSFORM
+            vec2 mapUV2 = vUV2 * mapTransform.xy + mapTransform.zw;
+        #else
+            vec2 mapUV2 = vUV2;
+        #endif
+        #ifdef UV_DISTORTION
+            mapUV2 += distortion;
+        #endif
+    #endif
+        vec4 texColor2 = texture2D(map, mapUV2);
+        texColor = mix(texColor, texColor2, vTileBlend);
+    #endif`
+            : ''
+    }
+    #ifdef GRADIENT_MAP
+        float rampAt = clamp(dot(texColor, gradientMapChannel), 0.0, 1.0);
+        vec4 ramp = texture2D(gradientMap, vec2(mix(gradientMapRange.x, gradientMapRange.y, rampAt), 0.5));
+        texColor = vec4(ramp.rgb, ramp.a * mix(texColor.a, 1.0, gradientMapChannel.a));
+    #endif
+    #ifdef EROSION
+        erosionMaskValue = texColor.a;
+    #endif
+    baseColor *= texColor;
+#endif
+#ifdef EROSION
+    #ifdef EROSION_MASK
+        #ifdef EROSION_MASK_UV1
+            vec2 erosionUV = vUV1;
+        #else
+            vec2 erosionUV = vUV;
+        #endif
+        erosionMaskValue = texture2D(erosionMask, erosionUV * erosionMaskTransform.xy + erosionMaskTransform.zw).r;
+    #endif
+    baseColor = quarksErode(baseColor, erosionLevel, erosionMaskValue);
+#endif
+`;
+}
+
+/** Fragment-side declarations, WGSL. */
+export const surfaceFragmentDeclarationWGSL = /* wgsl */ `
+#ifdef MAP_TRANSFORM
+uniform mapTransform: vec4f;
+#endif
+#ifdef UV_DISTORTION
+var distortionMapSampler: sampler;
+var distortionMap: texture_2d<f32>;
+uniform distortionTransform: vec4f;
+uniform distortionStrength: f32;
+#endif
+#ifdef GRADIENT_MAP
+var gradientMapSampler: sampler;
+var gradientMap: texture_2d<f32>;
+uniform gradientMapRange: vec2f;
+uniform gradientMapChannel: vec4f;
+#endif
+#ifdef EROSION
+uniform erosionParams: vec2f;
+uniform erosionEdgeColor: vec3f;
+#ifdef EROSION_MASK
+var erosionMaskSampler: sampler;
+var erosionMask: texture_2d<f32>;
+uniform erosionMaskTransform: vec4f;
+#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;
+#if defined(MAP_TRANSFORM) && defined(MAP_UV1)
+    var mapUV = fragmentInputs.vUV1 * uniforms.mapTransform.xy + uniforms.mapTransform.zw;
+#elif defined(MAP_TRANSFORM)
+    var mapUV = fragmentInputs.vUV * uniforms.mapTransform.xy + uniforms.mapTransform.zw;
+#else
+    var mapUV = fragmentInputs.vUV;
+#endif
+#ifdef UV_DISTORTION
+    #ifdef UV_DISTORTION_UV1
+        let distortionUV = fragmentInputs.vUV1;
+    #else
+        let distortionUV = fragmentInputs.vUV;
+    #endif
+    let distortion = (textureSample(distortionMap, distortionMapSampler, distortionUV * uniforms.distortionTransform.xy + uniforms.distortionTransform.zw).rg - 0.5) * 2.0 * uniforms.distortionStrength;
+    mapUV += distortion;
+#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
+    #if defined(MAP_TRANSFORM) && defined(MAP_UV1)
+        let mapUV2 = mapUV;
+    #else
+        #ifdef MAP_TRANSFORM
+            var mapUV2 = fragmentInputs.vUV2 * uniforms.mapTransform.xy + uniforms.mapTransform.zw;
+        #else
+            var mapUV2 = fragmentInputs.vUV2;
+        #endif
+        #ifdef UV_DISTORTION
+            mapUV2 += distortion;
+        #endif
+    #endif
+        let texColor2 = textureSample(map, mapSampler, mapUV2);
+        texColor = mix(texColor, texColor2, fragmentInputs.vTileBlend);
+    #endif`
+            : ''
+    }
+    #ifdef GRADIENT_MAP
+        let rampAt = clamp(dot(texColor, uniforms.gradientMapChannel), 0.0, 1.0);
+        let ramp = textureSample(gradientMap, gradientMapSampler, vec2f(mix(uniforms.gradientMapRange.x, uniforms.gradientMapRange.y, rampAt), 0.5));
+        texColor = vec4f(ramp.rgb, ramp.a * mix(texColor.a, 1.0, uniforms.gradientMapChannel.a));
+    #endif
+    #ifdef EROSION
+        erosionMaskValue = texColor.a;
+    #endif
+    baseColor *= texColor;
+#endif
+#ifdef EROSION
+    #ifdef EROSION_MASK
+        #ifdef EROSION_MASK_UV1
+            let erosionUV = fragmentInputs.vUV1;
+        #else
+            let erosionUV = fragmentInputs.vUV;
+        #endif
+        erosionMaskValue = textureSample(erosionMask, erosionMaskSampler, erosionUV * uniforms.erosionMaskTransform.xy + uniforms.erosionMaskTransform.zw).r;
+    #endif
+    baseColor = quarksErode(baseColor, erosionLevel, erosionMaskValue);
+#endif
+`;
+}

package/src/shaders/local_particle_physics_vert.glsl.ts

@@ -21,6 +21,14 @@ uniform float tileCountY;
 
 varying vec2 vUV;
 varying vec4 vColor;
+#ifdef UV1
+#ifdef MESH_UV2
+// The mesh's second UV set.
+attribute vec2 uv2;
+#endif
+// UV channel 1: the mesh's second UV set, or its first when it has none.
+varying vec2 vUV1;
+#endif
 varying vec3 vNormal;
 varying vec3 vWorldPos;
 
@@ -78,6 +86,13 @@ ${fogVertexGLSL('viewPos.xyz')}
     vUV = uv;
 #endif
 
+#ifdef UV1
+#ifdef MESH_UV2
+    vUV1 = uv2;
+#else
+    vUV1 = uv;
+#endif
+#endif
     vColor = color;
 }
 `;

package/src/shaders/local_particle_physics_vert.wgsl.ts

@@ -21,6 +21,14 @@ uniform tileCountY: f32;
 
 varying vUV: vec2f;
 varying vColor: vec4f;
+#ifdef UV1
+#ifdef MESH_UV2
+// The mesh's second UV set.
+attribute uv2: vec2f;
+#endif
+// UV channel 1: the mesh's second UV set, or its first when it has none.
+varying vUV1: vec2f;
+#endif
 varying vNormal: vec3f;
 varying vWorldPos: vec3f;
 
@@ -80,6 +88,13 @@ ${fogVertexWGSL('viewPos.xyz')}
     vertexOutputs.vUV = vertexInputs.uv;
 #endif
 
+#ifdef UV1
+#ifdef MESH_UV2
+    vertexOutputs.vUV1 = vertexInputs.uv2;
+#else
+    vertexOutputs.vUV1 = vertexInputs.uv;
+#endif
+#endif
     vertexOutputs.vColor = vertexInputs.color;
 }
 `;

package/src/shaders/particle_frag.glsl.ts

@@ -1,8 +1,12 @@
 import {fogFragmentDeclarationGLSL, fogFragmentGLSL} from './chunks/fog';
+import {surfaceColorGLSL, surfaceFragmentDeclarationGLSL} from './chunks/surface';
 
 export default /* glsl */ `
 varying vec2 vUV;
 varying vec4 vColor;
+#ifdef UV1
+varying vec2 vUV1;
+#endif
 
 #ifdef TILE_BLEND
 varying vec2 vUV2;
@@ -26,18 +30,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

package/src/shaders/particle_frag.wgsl.ts

@@ -1,8 +1,12 @@
 import {fogFragmentDeclarationWGSL, fogFragmentWGSL} from './chunks/fog';
+import {surfaceColorWGSL, surfaceFragmentDeclarationWGSL} from './chunks/surface';
 
 export default /* wgsl */ `
 varying vUV: vec2f;
 varying vColor: vec4f;
+#ifdef UV1
+varying vUV1: vec2f;
+#endif
 
 #ifdef TILE_BLEND
 varying vUV2: vec2f;
@@ -28,19 +32,10 @@ uniform alphaTest: f32;
 #endif
 
 ${fogFragmentDeclarationWGSL}
+${surfaceFragmentDeclarationWGSL}
 @fragment
 fn main(input: FragmentInputs) -> FragmentOutputs {
-    var baseColor = fragmentInputs.vColor;
-
-#ifdef USE_MAP
-    var texColor = textureSample(map, mapSampler, fragmentInputs.vUV);
-    #ifdef TILE_BLEND
-        let texColor2 = textureSample(map, mapSampler, fragmentInputs.vUV2);
-        texColor = mix(texColor, texColor2, fragmentInputs.vTileBlend);
-    #endif
-    baseColor *= texColor;
-#endif
-
+${surfaceColorWGSL(true)}
 #ifdef USE_COLOR_AS_ALPHA
     baseColor.a *= (baseColor.r + baseColor.g + baseColor.b) / 3.0;
 #endif

package/src/shaders/particle_physics_frag.glsl.ts

@@ -1,8 +1,12 @@
 import {fogFragmentDeclarationGLSL, fogFragmentGLSL} from './chunks/fog';
+import {surfaceColorGLSL, surfaceFragmentDeclarationGLSL} from './chunks/surface';
 
 export default /* glsl */ `
 varying vec2 vUV;
 varying vec4 vColor;
+#ifdef UV1
+varying vec2 vUV1;
+#endif
 varying vec3 vNormal;
 varying vec3 vWorldPos;
 
@@ -88,18 +92,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_ALPHATEST
     if (baseColor.a < alphaTest) discard;
 #else
@@ -126,11 +121,14 @@ void main() {
 #ifdef MESH_RIM
     // Fresnel: strongest where the surface turns away from the camera.
     vec3 V = normalize(eyePosition - vWorldPos);
-    float rim = pow(1.0 - abs(dot(N, V)), rimParams.x) * rimParams.y;
-    #ifdef MESH_RIM_MIX
-    color = mix(color, rimColor, clamp(rim, 0.0, 1.0));
+    float edgeTerm = pow(1.0 - abs(dot(N, V)), rimParams.x);
+    #if defined(MESH_RIM_FADE)
+    // Faces turned to the camera fade by the strength; edges stay.
+    baseColor.a *= clamp(1.0 - rimParams.y * (1.0 - edgeTerm), 0.0, 1.0);
+    #elif defined(MESH_RIM_MIX)
+    color = mix(color, rimColor, clamp(edgeTerm * rimParams.y, 0.0, 1.0));
     #else
-    color += rimColor * rim;
+    color += rimColor * edgeTerm * rimParams.y;
     #endif
 #endif
 

package/src/shaders/particle_physics_frag.wgsl.ts

@@ -1,8 +1,12 @@
 import {fogFragmentDeclarationWGSL, fogFragmentWGSL} from './chunks/fog';
+import {surfaceColorWGSL, surfaceFragmentDeclarationWGSL} from './chunks/surface';
 
 export default /* wgsl */ `
 varying vUV: vec2f;
 varying vColor: vec4f;
+#ifdef UV1
+varying vUV1: vec2f;
+#endif
 varying vNormal: vec3f;
 varying vWorldPos: vec3f;
 
@@ -88,19 +92,10 @@ uniform alphaTest: f32;
 #endif
 
 ${fogFragmentDeclarationWGSL}
+${surfaceFragmentDeclarationWGSL}
 @fragment
 fn main(input: FragmentInputs) -> FragmentOutputs {
-    var baseColor = fragmentInputs.vColor;
-
-#ifdef USE_MAP
-    var texColor = textureSample(map, mapSampler, fragmentInputs.vUV);
-    #ifdef TILE_BLEND
-        let texColor2 = textureSample(map, mapSampler, fragmentInputs.vUV2);
-        texColor = mix(texColor, texColor2, fragmentInputs.vTileBlend);
-    #endif
-    baseColor *= texColor;
-#endif
-
+${surfaceColorWGSL(true)}
 #ifdef USE_ALPHATEST
     if (baseColor.a < uniforms.alphaTest) { discard; }
 #else
@@ -127,11 +122,14 @@ fn main(input: FragmentInputs) -> FragmentOutputs {
 #ifdef MESH_RIM
     // Fresnel: strongest where the surface turns away from the camera.
     let V = normalize(uniforms.eyePosition - fragmentInputs.vWorldPos);
-    let rimTerm = pow(1.0 - abs(dot(N, V)), uniforms.rimParams.x) * uniforms.rimParams.y;
-    #ifdef MESH_RIM_MIX
-    color = mix(color, uniforms.rimColor, clamp(rimTerm, 0.0, 1.0));
+    let edgeTerm = pow(1.0 - abs(dot(N, V)), uniforms.rimParams.x);
+    #if defined(MESH_RIM_FADE)
+    // Faces turned to the camera fade by the strength; edges stay.
+    baseColor.a *= clamp(1.0 - uniforms.rimParams.y * (1.0 - edgeTerm), 0.0, 1.0);
+    #elif defined(MESH_RIM_MIX)
+    color = mix(color, uniforms.rimColor, clamp(edgeTerm * uniforms.rimParams.y, 0.0, 1.0));
     #else
-    color += uniforms.rimColor * rimTerm;
+    color += uniforms.rimColor * edgeTerm * uniforms.rimParams.y;
     #endif
 #endif
 

package/src/shaders/particle_vert.glsl.ts

@@ -31,6 +31,10 @@ uniform vec3 pivot;
 // Varyings
 varying vec2 vUV;
 varying vec4 vColor;
+#ifdef UV1
+// The particle's own UV, never moved by the sheet (UV channel 1).
+varying vec2 vUV1;
+#endif
 #ifdef TILE_BLEND
 varying vec2 vUV2;
 varying float vTileBlend;
@@ -119,6 +123,9 @@ ${fogVertexGLSL('mvPosition.xyz')}
         vUV = uv;
     #endif
 
+#ifdef UV1
+    vUV1 = uv;
+#endif
     vColor = color;
 }
 `;

package/src/shaders/particle_vert.wgsl.ts

@@ -30,6 +30,10 @@ uniform pivot: vec3f;
 // Varyings
 varying vUV: vec2f;
 varying vColor: vec4f;
+#ifdef UV1
+// The particle's own UV, never moved by the sheet (UV channel 1).
+varying vUV1: vec2f;
+#endif
 #ifdef TILE_BLEND
 varying vUV2: vec2f;
 varying vTileBlend: f32;
@@ -121,6 +125,9 @@ ${fogVertexWGSL('mvPosition.xyz')}
         vertexOutputs.vUV = vertexInputs.uv;
     #endif
 
+#ifdef UV1
+    vertexOutputs.vUV1 = vertexInputs.uv;
+#endif
     vertexOutputs.vColor = vertexInputs.color;
 }
 `;

package/src/shaders/stretched_bb_particle_vert.glsl.ts

@@ -32,6 +32,10 @@ uniform vec3 pivot;
 // Varyings
 varying vec2 vUV;
 varying vec4 vColor;
+#ifdef UV1
+// The particle's own UV, never moved by the sheet (UV channel 1).
+varying vec2 vUV1;
+#endif
 #ifdef TILE_BLEND
 varying vec2 vUV2;
 varying float vTileBlend;
@@ -45,6 +49,7 @@ varying float linearDepth;
 // Smallest and largest size a particle may have on screen, as fractions of the viewport height.
 uniform vec2 sizeLimits;
 #endif
+
 ${fogVertexDeclarationGLSL}
 void main() {
     float lengthFactor = velocity.w;
@@ -52,6 +57,19 @@ void main() {
     // 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);
+    // Stretch direction is the velocity direction; only a genuinely motionless particle has none.
+    // 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);
+#ifdef BEAM
+    // Seen straight along its length a beam has no side to face; any will do.
+    vec3 sideRaw = cross(mvPosition.xyz, vdir);
+    vec3 side = dot(sideRaw, sideRaw) > 1e-12 ? normalize(sideRaw) : vec3(1.0, 0.0, 0.0);
+#else
+    vec3 side = normalize(cross(mvPosition.xyz, vdir));
+#endif
 #ifdef SIZE_LIMITS
     // The streak's width on screen as a fraction of the viewport height, held
     // between the limits; a perspective projection divides by the view depth.
@@ -61,17 +79,16 @@ void main() {
         avgSize *= clamp(screenSize, sizeLimits.x, sizeLimits.y) / screenSize;
     }
 #endif
-    vec3 viewVelocity = mat3(view * world) * velocity.xyz;
-    float vlength = length(viewVelocity);
-    // Stretch direction is the velocity direction; only a genuinely motionless particle has none.
-    // 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);
-    vec3 side = normalize(cross(mvPosition.xyz, vdir));
     mvPosition.xyz += position.y * side * avgSize;
+#ifdef BEAM
+    // The vector runs from the particle to the beam's end: the quad spans it
+    // exactly, U from the particle (0) to the end (1), as wide as the size.
+    mvPosition.xyz += (position.x + 0.5) * viewVelocity;
+#else
     // 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;
+#endif
 #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;
@@ -101,6 +118,9 @@ ${fogVertexGLSL('mvPosition.xyz')}
         vUV = quadUV;
     #endif
 
+#ifdef UV1
+    vUV1 = quadUV;
+#endif
     vColor = color;
 }
 `;