babylon.quarks 0.25.0 → 0.27.0

package/src/shaders/chunks/soft.ts

@@ -0,0 +1,84 @@
+/**
+ * Soft particles for the particle shaders, in both shader languages.
+ *
+ * The fragment reads the scene depth behind it from `depthTexture`, turns it into view depth with
+ * the coefficients in `projParams` (see `softDepthParams`), and fades out over the distance in
+ * `softParams` as it nears the scene, as Unity's soft particles and Unreal's Depth Fade do. The
+ * fade runs last, after fog, so both languages produce the same colour.
+ *
+ * `SOFT_DEPTH_PACKED` reads a depth packed into four 8-bit channels, as a Babylon
+ * `DepthRenderer` of type `UNSIGNED_BYTE` writes it.
+ */
+
+/** Fragment-side declaration and depth decode, GLSL. */
+export const softFragmentDeclarationGLSL = /* glsl */ `
+#ifdef SOFT_PARTICLES
+uniform sampler2D depthTexture;
+uniform vec2 softParams;
+uniform vec4 projParams;
+varying vec4 projPosition;
+varying float linearDepth;
+
+float quarksSceneDepth(vec4 texel) {
+#ifdef SOFT_DEPTH_PACKED
+    float d = dot(texel, vec4(1.0 / (255.0 * 255.0 * 255.0), 1.0 / (255.0 * 255.0), 1.0 / 255.0, 1.0));
+#else
+    float d = texel.r;
+#endif
+    float denominator = projParams.z * d + projParams.w;
+    float depth = abs(denominator) > 1e-8 ? abs((projParams.x * d + projParams.y) / denominator) : 0.0;
+    // Nothing drawn there reads as infinitely far.
+    return depth > 0.0 ? depth : 1e30;
+}
+#endif
+`;
+
+/** Fades `target` as the fragment nears the scene behind it, GLSL. */
+export function softFragmentGLSL(target: string): string {
+    return /* glsl */ `
+#ifdef SOFT_PARTICLES
+    {
+        vec2 softUV = 0.5 * (projPosition.xy / projPosition.w) + 0.5;
+        float sceneDepth = quarksSceneDepth(texture2D(depthTexture, softUV));
+        ${target} *= clamp(softParams.y * ((sceneDepth - softParams.x) - linearDepth), 0.0, 1.0);
+    }
+#endif
+`;
+}
+
+/** Fragment-side declaration and depth decode, WGSL. */
+export const softFragmentDeclarationWGSL = /* wgsl */ `
+#ifdef SOFT_PARTICLES
+var depthTextureSampler: sampler;
+var depthTexture: texture_2d<f32>;
+uniform softParams: vec2f;
+uniform projParams: vec4f;
+varying projPosition: vec4f;
+varying linearDepth: f32;
+
+fn quarksSceneDepth(texel: vec4f) -> f32 {
+#ifdef SOFT_DEPTH_PACKED
+    let d = dot(texel, vec4f(1.0 / (255.0 * 255.0 * 255.0), 1.0 / (255.0 * 255.0), 1.0 / 255.0, 1.0));
+#else
+    let d = texel.r;
+#endif
+    let denominator = uniforms.projParams.z * d + uniforms.projParams.w;
+    let depth = select(0.0, abs((uniforms.projParams.x * d + uniforms.projParams.y) / denominator), abs(denominator) > 1e-8);
+    // Nothing drawn there reads as infinitely far.
+    return select(1e30, depth, depth > 0.0);
+}
+#endif
+`;
+
+/** Fades `target` as the fragment nears the scene behind it, WGSL. */
+export function softFragmentWGSL(target: string): string {
+    return /* wgsl */ `
+#ifdef SOFT_PARTICLES
+    {
+        let softUV = 0.5 * (fragmentInputs.projPosition.xy / fragmentInputs.projPosition.w) + 0.5;
+        let sceneDepth = quarksSceneDepth(textureSample(depthTexture, depthTextureSampler, softUV));
+        ${target} *= clamp(uniforms.softParams.y * ((sceneDepth - uniforms.softParams.x) - fragmentInputs.linearDepth), 0.0, 1.0);
+    }
+#endif
+`;
+}

package/src/shaders/chunks/surface.ts

@@ -1,43 +1,65 @@
 /**
  * Texture effects shared by the sprite, mesh and trail fragment shaders, in
- * both shader languages: UV scrolling, a gradient map and alpha erosion.
+ * both shader languages: UV scrolling, UV distortion, a gradient map and
+ * alpha erosion.
  *
- * - `UV_SCROLL`: `uvScrollOffset` (already wrapped to 0…1 on the CPU, so it
- *   never loses precision) is added to the map's UV. The texture should wrap
- *   (repeat); scrolling a tile of a sheet runs into its neighbours.
- * - `GRADIENT_MAP`: the map's red channel picks a colour along U of
- *   `gradientMap`, whose alpha multiplies the map's. A greyscale texture is
- *   then recoloured by a ramp, and the particle colour still tints it.
- *   `gradientMapRange` keeps the lookup between the first and last texel
- *   centres. Make the ramp without mipmaps: the lookup's UV jumps with the
- *   map's detail, and the hardware would pick a blurred mip for it.
+ * - `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`, the map's alpha otherwise)
- *   is above the cut that alpha sets: alpha 1 shows everything the map shows,
- *   alpha 0 nothing, and on the way down the shape eats away from its lowest
- *   mask values first — a noise mask dissolves it, a gradient mask wipes it.
- *   `erosionParams` is (softness, edge width, mask offset u, mask offset v),
- *   the edge band just above the cut glows in `erosionEdgeColor`. The mask is
- *   sampled with the particle's UV as drawn, which on a sprite sheet is the
- *   current tile's. Erosion only changes alpha, so blend modes that ignore
- *   alpha (one-one, premultiplied) show a hard cut.
+ *   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 UV_SCROLL
-uniform vec2 uvScrollOffset;
+#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 vec4 erosionParams;
+uniform vec2 erosionParams;
 uniform vec3 erosionEdgeColor;
 #ifdef EROSION_MASK
 uniform sampler2D erosionMask;
+uniform vec4 erosionMaskTransform;
 #endif
 
 vec4 quarksErode(vec4 color, float level, float mask) {
@@ -65,33 +87,58 @@ vec4 quarksErode(vec4 color, float level, float mask) {
 export function surfaceColorGLSL(tileBlend: boolean): string {
     return /* glsl */ `
     vec4 baseColor = vColor;
-#ifdef UV_SCROLL
-    vec2 mapUV = vUV + uvScrollOffset;
+#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
+#if defined(USE_MAP) || defined(GRADIENT_MAP)
 #ifdef USE_MAP
     vec4 texColor = texture2D(map, mapUV);
     ${
         tileBlend
             ? `#ifdef TILE_BLEND
-    #ifdef UV_SCROLL
-        vec4 texColor2 = texture2D(map, vUV2 + uvScrollOffset);
+    #if defined(MAP_TRANSFORM) && defined(MAP_UV1)
+        vec2 mapUV2 = mapUV;
     #else
-        vec4 texColor2 = texture2D(map, vUV2);
+        #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`
             : ''
     }
+#else
+    // No map: the ramp is looked up at white, its far end.
+    vec4 texColor = vec4(1.0);
+#endif
     #ifdef GRADIENT_MAP
-        vec4 ramp = texture2D(gradientMap, vec2(mix(gradientMapRange.x, gradientMapRange.y, clamp(texColor.r, 0.0, 1.0)), 0.5));
-        texColor = vec4(ramp.rgb, ramp.a * texColor.a);
+        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;
@@ -100,7 +147,12 @@ export function surfaceColorGLSL(tileBlend: boolean): string {
 #endif
 #ifdef EROSION
     #ifdef EROSION_MASK
-        erosionMaskValue = texture2D(erosionMask, vUV + erosionParams.zw).r;
+        #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
@@ -109,20 +161,28 @@ export function surfaceColorGLSL(tileBlend: boolean): string {
 
 /** Fragment-side declarations, WGSL. */
 export const surfaceFragmentDeclarationWGSL = /* wgsl */ `
-#ifdef UV_SCROLL
-uniform uvScrollOffset: vec2f;
+#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: vec4f;
+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 {
@@ -145,33 +205,58 @@ fn quarksErode(colorIn: vec4f, level: f32, mask: f32) -> vec4f {
 export function surfaceColorWGSL(tileBlend: boolean): string {
     return /* wgsl */ `
     var baseColor = fragmentInputs.vColor;
-#ifdef UV_SCROLL
-    let mapUV = fragmentInputs.vUV + uniforms.uvScrollOffset;
+#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
-    let mapUV = fragmentInputs.vUV;
+    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
+#if defined(USE_MAP) || defined(GRADIENT_MAP)
 #ifdef USE_MAP
     var texColor = textureSample(map, mapSampler, mapUV);
     ${
         tileBlend
             ? `#ifdef TILE_BLEND
-    #ifdef UV_SCROLL
-        let texColor2 = textureSample(map, mapSampler, fragmentInputs.vUV2 + uniforms.uvScrollOffset);
+    #if defined(MAP_TRANSFORM) && defined(MAP_UV1)
+        let mapUV2 = mapUV;
     #else
-        let texColor2 = textureSample(map, mapSampler, fragmentInputs.vUV2);
+        #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`
             : ''
     }
+#else
+    // No map: the ramp is looked up at white, its far end.
+    var texColor = vec4f(1.0);
+#endif
     #ifdef GRADIENT_MAP
-        let ramp = textureSample(gradientMap, gradientMapSampler, vec2f(mix(uniforms.gradientMapRange.x, uniforms.gradientMapRange.y, clamp(texColor.r, 0.0, 1.0)), 0.5));
-        texColor = vec4f(ramp.rgb, ramp.a * texColor.a);
+        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;
@@ -180,7 +265,12 @@ export function surfaceColorWGSL(tileBlend: boolean): string {
 #endif
 #ifdef EROSION
     #ifdef EROSION_MASK
-        erosionMaskValue = textureSample(erosionMask, erosionMaskSampler, fragmentInputs.vUV + uniforms.erosionParams.zw).r;
+        #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

@@ -1,4 +1,5 @@
 import {fogVertexDeclarationGLSL, fogVertexGLSL} from './chunks/fog';
+import {sheetVertexDeclarationGLSL, sheetVertexGLSL} from './chunks/sheet';
 
 export default /* glsl */ `
 attribute vec3 position;
@@ -13,22 +14,21 @@ attribute float uvTile;
 uniform mat4 world;
 uniform mat4 view;
 uniform mat4 projection;
-
-#ifdef UV_TILE
-uniform float tileCountX;
-uniform float tileCountY;
-#endif
+${sheetVertexDeclarationGLSL}
 
 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;
 
-#ifdef TILE_BLEND
-varying vec2 vUV2;
-varying float vTileBlend;
-#endif
-
 #ifdef SOFT_PARTICLES
 varying vec4 projPosition;
 varying float linearDepth;
@@ -45,7 +45,15 @@ ${fogVertexDeclarationGLSL}
 void main() {
     vec3 scaledPosition = position * size;
     vec3 rotatedPosition = applyQuaternion(scaledPosition, rotation);
-    vec3 rotatedNormal = normalize(applyQuaternion(normal, rotation));
+    // A normal scales by the inverse of the size, so a stretched mesh keeps its normals
+    // perpendicular; a flat size counts as a sliver rather than dividing by zero.
+    vec3 safeSize = vec3(
+        abs(size.x) > 1e-6 ? size.x : 1e-6,
+        abs(size.y) > 1e-6 ? size.y : 1e-6,
+        abs(size.z) > 1e-6 ? size.z : 1e-6);
+    // A mirrored size (an odd number of negative components) turns the winding inside out, so the
+    // normal is turned with it and the fragment's front-face test agrees with the geometry.
+    vec3 rotatedNormal = normalize(applyQuaternion(normal / safeSize, rotation)) * sign(safeSize.x * safeSize.y * safeSize.z);
     vec3 localPos = rotatedPosition + offset;
 
     vec4 worldPos = world * vec4(localPos, 1.0);
@@ -58,26 +66,19 @@ ${fogVertexGLSL('viewPos.xyz')}
 
 #ifdef SOFT_PARTICLES
     projPosition = gl_Position;
-    linearDepth = -viewPos.z;
+    // View depth is +z ahead of a left-handed camera and -z ahead of a right-handed one.
+    linearDepth = abs(viewPos.z);
 #endif
 
-#ifdef UV_TILE
-    vec2 tc = vec2(tileCountX, tileCountY);
-    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);
-    #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);
-        vTileBlend = fract(uvTile);
-    #endif
+${sheetVertexGLSL('uv')}
+
+#ifdef UV1
+#ifdef MESH_UV2
+    vUV1 = uv2;
 #else
-    vUV = uv;
+    vUV1 = uv;
+#endif
 #endif
-
     vColor = color;
 }
 `;

package/src/shaders/local_particle_physics_vert.wgsl.ts

@@ -1,4 +1,5 @@
 import {fogVertexDeclarationWGSL, fogVertexWGSL} from './chunks/fog';
+import {sheetVertexDeclarationWGSL, sheetVertexWGSL} from './chunks/sheet';
 
 export default /* wgsl */ `
 attribute position: vec3f;
@@ -13,22 +14,21 @@ attribute uvTile: f32;
 uniform world: mat4x4f;
 uniform view: mat4x4f;
 uniform projection: mat4x4f;
-
-#ifdef UV_TILE
-uniform tileCountX: f32;
-uniform tileCountY: f32;
-#endif
+${sheetVertexDeclarationWGSL}
 
 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;
 
-#ifdef TILE_BLEND
-varying vUV2: vec2f;
-varying vTileBlend: f32;
-#endif
-
 #ifdef SOFT_PARTICLES
 varying projPosition: vec4f;
 varying linearDepth: f32;
@@ -44,9 +44,18 @@ fn applyQuaternion(v: vec3f, q: vec4f) -> vec3f {
 ${fogVertexDeclarationWGSL}
 @vertex
 fn main(input: VertexInputs) -> FragmentInputs {
-    let scaledPosition = vertexInputs.position * vertexInputs.size;
+    let size = vertexInputs.size;
+    let scaledPosition = vertexInputs.position * size;
     let rotatedPosition = applyQuaternion(scaledPosition, vertexInputs.rotation);
-    let rotatedNormal = normalize(applyQuaternion(vertexInputs.normal, vertexInputs.rotation));
+    // A normal scales by the inverse of the size, so a stretched mesh keeps its normals
+    // perpendicular; a flat size counts as a sliver rather than dividing by zero.
+    let safeSize = vec3f(
+        select(1e-6, size.x, abs(size.x) > 1e-6),
+        select(1e-6, size.y, abs(size.y) > 1e-6),
+        select(1e-6, size.z, abs(size.z) > 1e-6));
+    // A mirrored size (an odd number of negative components) turns the winding inside out, so the
+    // normal is turned with it and the fragment's front-face test agrees with the geometry.
+    let rotatedNormal = normalize(applyQuaternion(vertexInputs.normal / safeSize, vertexInputs.rotation)) * sign(safeSize.x * safeSize.y * safeSize.z);
     let localPos = rotatedPosition + vertexInputs.offset;
 
     let worldPos = uniforms.world * vec4f(localPos, 1.0);
@@ -60,26 +69,19 @@ ${fogVertexWGSL('viewPos.xyz')}
 
 #ifdef SOFT_PARTICLES
     vertexOutputs.projPosition = clipPosition;
-    vertexOutputs.linearDepth = -viewPos.z;
+    // View depth is +z ahead of a left-handed camera and -z ahead of a right-handed one.
+    vertexOutputs.linearDepth = abs(viewPos.z);
 #endif
 
-#ifdef UV_TILE
-    let tc = vec2f(uniforms.tileCountX, uniforms.tileCountY);
-    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);
-    #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.vTileBlend = fract(vertexInputs.uvTile);
-    #endif
+${sheetVertexWGSL('vertexInputs.uv')}
+
+#ifdef UV1
+#ifdef MESH_UV2
+    vertexOutputs.vUV1 = vertexInputs.uv2;
 #else
-    vertexOutputs.vUV = vertexInputs.uv;
+    vertexOutputs.vUV1 = vertexInputs.uv;
+#endif
 #endif
-
     vertexOutputs.vColor = vertexInputs.color;
 }
 `;

package/src/shaders/particle_frag.glsl.ts

@@ -1,9 +1,13 @@
 import {fogFragmentDeclarationGLSL, fogFragmentGLSL} from './chunks/fog';
+import {softFragmentDeclarationGLSL, softFragmentGLSL} from './chunks/soft';
 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;
@@ -14,26 +18,16 @@ varying float vTileBlend;
 uniform sampler2D map;
 #endif
 
-#ifdef SOFT_PARTICLES
-uniform sampler2D depthTexture;
-uniform vec2 softParams;
-uniform vec4 projParams;
-varying vec4 projPosition;
-varying float linearDepth;
-#endif
 
 #ifdef USE_ALPHATEST
 uniform float alphaTest;
 #endif
 
 ${fogFragmentDeclarationGLSL}
+${softFragmentDeclarationGLSL}
 ${surfaceFragmentDeclarationGLSL}
 void main() {
 ${surfaceColorGLSL(true)}
-#ifdef USE_COLOR_AS_ALPHA
-    baseColor.a *= (baseColor.r + baseColor.g + baseColor.b) / 3.0;
-#endif
-
 #ifdef USE_ALPHATEST
     if (baseColor.a < alphaTest) discard;
 #else
@@ -42,16 +36,6 @@ ${surfaceColorGLSL(true)}
 
 ${fogFragmentGLSL('baseColor.rgb')}
     gl_FragColor = baseColor;
-
-#ifdef SOFT_PARTICLES
-    vec2 p2 = projPosition.xy / projPosition.w;
-    p2 = 0.5 * p2 + 0.5;
-    float readDepth = texture2D(depthTexture, p2.xy).r;
-    float zNear = projParams.x;
-    float zFar = projParams.y;
-    float viewDepth = (zFar * zNear) / (zFar - readDepth * (zFar - zNear));
-    float fade = clamp(softParams.y * ((viewDepth - softParams.x) - linearDepth), 0.0, 1.0);
-    gl_FragColor *= fade;
-#endif
+${softFragmentGLSL('gl_FragColor')}
 }
 `;

package/src/shaders/particle_frag.wgsl.ts

@@ -1,9 +1,13 @@
 import {fogFragmentDeclarationWGSL, fogFragmentWGSL} from './chunks/fog';
+import {softFragmentDeclarationWGSL, softFragmentWGSL} from './chunks/soft';
 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;
@@ -15,46 +19,25 @@ var mapSampler: sampler;
 var map: texture_2d<f32>;
 #endif
 
-#ifdef SOFT_PARTICLES
-var depthTextureSampler: sampler;
-var depthTexture: texture_2d<f32>;
-uniform softParams: vec2f;
-uniform projParams: vec4f;
-varying projPosition: vec4f;
-varying linearDepth: f32;
-#endif
 
 #ifdef USE_ALPHATEST
 uniform alphaTest: f32;
 #endif
 
 ${fogFragmentDeclarationWGSL}
+${softFragmentDeclarationWGSL}
 ${surfaceFragmentDeclarationWGSL}
 @fragment
 fn main(input: FragmentInputs) -> FragmentOutputs {
 ${surfaceColorWGSL(true)}
-#ifdef USE_COLOR_AS_ALPHA
-    baseColor.a *= (baseColor.r + baseColor.g + baseColor.b) / 3.0;
-#endif
-
 #ifdef USE_ALPHATEST
     if (baseColor.a < uniforms.alphaTest) { discard; }
 #else
     if (baseColor.a < 0.01) { discard; }
 #endif
 
-#ifdef SOFT_PARTICLES
-    var p2 = fragmentInputs.projPosition.xy / fragmentInputs.projPosition.w;
-    p2 = 0.5 * p2 + 0.5;
-    let readDepth = textureSample(depthTexture, depthTextureSampler, p2).r;
-    let zNear = uniforms.projParams.x;
-    let zFar = uniforms.projParams.y;
-    let viewDepth = (zFar * zNear) / (zFar - readDepth * (zFar - zNear));
-    let fade = clamp(uniforms.softParams.y * ((viewDepth - uniforms.softParams.x) - fragmentInputs.linearDepth), 0.0, 1.0);
-    baseColor *= fade;
-#endif
-
 ${fogFragmentWGSL('baseColor')}
+${softFragmentWGSL('baseColor')}
     fragmentOutputs.color = baseColor;
 }
 `;