@newkrok/three-particles 2.16.0 → 3.0.0

package/dist/webgpu.js

@@ -1,7 +1,7 @@
 import { registerTSLMaterialFactory } from '@newkrok/three-particles';
-import { Fn, mod, float, floor, dot, vec3, step, min, max, vec4, vec2, abs, round, If, texture, screenUV, smoothstep, length, Discard, sRGBTransferEOTF, cross, attribute, modelViewMatrix, positionLocal, varyingProperty, pointUV, cos, sin, normalLocal, cameraProjectionMatrix, uv, uniform, normalize, cameraPosition, cameraViewMatrix, mix, storage, instanceIndex, compute, fract, Loop, Continue } from 'three/tsl';
+import { Fn, mod, float, floor, dot, vec3, step, min, max, vec4, vec2, abs, round, If, texture, screenUV, smoothstep, cross, attribute, modelViewMatrix, positionLocal, length, varyingProperty, pointUV, cos, sin, Discard, normalLocal, cameraProjectionMatrix, uv, uniform, normalize, cameraPosition, cameraViewMatrix, mix, storage, instanceIndex, compute, fract, Loop, Continue } from 'three/tsl';
 import * as THREE from 'three';
-import { DoubleSide, Vector3, NoColorSpace, DataTexture } from 'three';
+import { DoubleSide, Vector3, DataTexture } from 'three';
 import { PointsNodeMaterial, MeshBasicNodeMaterial, StorageBufferAttribute, StorageInstancedBufferAttribute } from 'three/webgpu';
 
 // src/webgpu.ts
@@ -76,15 +76,13 @@ function createCollisionPlaneTSL(sCurveData, collisionPlaneOffset, collisionPlan
         If(signedDist.lessThan(0), () => {
           If(mode.lessThan(0.5), () => {
             ps.x.assign(startLife.add(float(1)));
-          });
-          If(mode.greaterThanEqual(0.5).and(mode.lessThan(1.5)), () => {
+          }).ElseIf(mode.lessThan(1.5), () => {
             pos.assign(pos.sub(planeNormal.mul(signedDist)));
             const velDotN = dot(vel, planeNormal);
             If(velDotN.lessThan(0), () => {
               vel.assign(vel.sub(planeNormal.mul(velDotN)));
             });
-          });
-          If(mode.greaterThanEqual(1.5), () => {
+          }).Else(() => {
             pos.assign(pos.sub(planeNormal.mul(signedDist)));
             const vDotN = dot(vel, planeNormal);
             const reflected = vel.sub(planeNormal.mul(vDotN.mul(2)));
@@ -658,11 +656,19 @@ function flushEmitQueue(buffers) {
         const flagOffset = curveLen + p * INIT_STRIDE + 3;
         if (arr[flagOffset] > 0.5) {
           arr[flagOffset] = 0;
+          buffers.curveData.addUpdateRange(flagOffset, 1);
           clearedAny = true;
         }
       }
     }
   }
+  if (current && current.length > 0) {
+    for (let i = 0; i < current.length; i++) {
+      const p = current[i];
+      const slotStart = curveLen + p * INIT_STRIDE;
+      buffers.curveData.addUpdateRange(slotStart, INIT_STRIDE);
+    }
+  }
   if (count > 0 || clearedAny) {
     buffers.curveData.needsUpdate = true;
   }
@@ -685,7 +691,21 @@ function flushEmitQueue(buffers) {
   _emitCounts.set(buffers.curveData, 0);
   return count;
 }
-function deactivateParticleInModifierBuffers(_buffers, _index) {
+function deactivateParticleInModifierBuffers(buffers, index) {
+  const oiaArr = buffers.orbitalIsActive.array;
+  const oiaWOffset = index * 4 + 3;
+  if (oiaArr[oiaWOffset] !== 0) {
+    oiaArr[oiaWOffset] = 0;
+    buffers.orbitalIsActive.addUpdateRange(oiaWOffset, 1);
+    buffers.orbitalIsActive.needsUpdate = true;
+  }
+  const colorArr = buffers.color.array;
+  const colorAOffset = index * 4 + 3;
+  if (colorArr[colorAOffset] !== 0) {
+    colorArr[colorAOffset] = 0;
+    buffers.color.addUpdateRange(colorAOffset, 1);
+    buffers.color.needsUpdate = true;
+  }
 }
 function createCurveLookup(sCurveData) {
   return Fn(
@@ -710,8 +730,6 @@ function createModifierComputeUpdate(buffers, maxParticles, curveMap, flags, for
   const uDelta = uniform(float(0));
   const uDeltaMs = uniform(float(0));
   const uGravityVelocity = uniform(new Vector3(0, 0, 0));
-  const uWorldPositionChange = uniform(new Vector3(0, 0, 0));
-  const uSimSpaceWorld = uniform(float(0));
   const uNoiseStrength = uniform(float(0));
   const uNoisePower = uniform(float(0));
   const uNoiseFrequency = uniform(float(1));
@@ -747,228 +765,229 @@ function createModifierComputeUpdate(buffers, maxParticles, curveMap, flags, for
   ) : null;
   const computeKernel = Fn(() => {
     const i = instanceIndex;
-    const initBase = i.mul(INIT_STRIDE).add(curveLen);
-    const initFlag = sCurveData.element(initBase.add(3));
-    If(initFlag.greaterThan(0.5), () => {
-      sPosition.element(i).assign(
-        vec4(
-          sCurveData.element(initBase),
-          sCurveData.element(initBase.add(1)),
-          sCurveData.element(initBase.add(2)),
-          0
-        )
-      );
-      sVelocity.element(i).assign(
-        vec4(
-          sCurveData.element(initBase.add(4)),
-          sCurveData.element(initBase.add(5)),
-          sCurveData.element(initBase.add(6)),
-          0
-        )
-      );
-      sColor.element(i).assign(
-        vec4(
-          sCurveData.element(initBase.add(8)),
-          sCurveData.element(initBase.add(9)),
-          sCurveData.element(initBase.add(10)),
-          sCurveData.element(initBase.add(11))
-        )
-      );
-      sParticleState.element(i).assign(
-        vec4(
-          sCurveData.element(initBase.add(12)),
-          sCurveData.element(initBase.add(13)),
-          sCurveData.element(initBase.add(14)),
-          sCurveData.element(initBase.add(15))
-        )
-      );
-      sOrbitalIsActive.element(i).assign(
-        vec4(
-          sCurveData.element(initBase.add(16)),
-          sCurveData.element(initBase.add(17)),
-          sCurveData.element(initBase.add(18)),
-          sCurveData.element(initBase.add(19))
-        )
-      );
-      sStartValues.element(i).assign(
-        vec4(
-          sCurveData.element(initBase.add(20)),
-          sCurveData.element(initBase.add(21)),
-          sCurveData.element(initBase.add(22)),
-          sCurveData.element(initBase.add(23))
-        )
-      );
-      sStartColorsExt.element(i).assign(
-        vec4(
-          sCurveData.element(initBase.add(24)),
-          sCurveData.element(initBase.add(25)),
-          sCurveData.element(initBase.add(26)),
-          sCurveData.element(initBase.add(27))
-        )
-      );
-      sCurveData.element(initBase.add(3)).assign(float(0));
-    });
-    const oiaVec = sOrbitalIsActive.element(i).toVar();
-    If(oiaVec.w.greaterThanEqual(float(0.5)), () => {
-      const pos = sPosition.element(i).xyz.toVar();
-      const vel = sVelocity.element(i).xyz.toVar();
-      const ps = sParticleState.element(i).toVar();
-      const sv = sStartValues.element(i);
-      ps.x;
-      const startLife = sv.x;
-      vel.assign(vel.sub(vec3(uGravityVelocity).mul(uDelta)));
-      if (forceFieldNodes) {
-        forceFieldNodes.apply({ pos, vel, delta: uDelta });
-      }
-      If(uSimSpaceWorld.greaterThan(0.5), () => {
-        pos.assign(pos.sub(vec3(uWorldPositionChange)));
+    If(i.lessThan(float(maxParticles)), () => {
+      const initBase = i.mul(INIT_STRIDE).add(curveLen);
+      const initFlag = sCurveData.element(initBase.add(3));
+      If(initFlag.greaterThan(0.5), () => {
+        sPosition.element(i).assign(
+          vec4(
+            sCurveData.element(initBase),
+            sCurveData.element(initBase.add(1)),
+            sCurveData.element(initBase.add(2)),
+            0
+          )
+        );
+        sVelocity.element(i).assign(
+          vec4(
+            sCurveData.element(initBase.add(4)),
+            sCurveData.element(initBase.add(5)),
+            sCurveData.element(initBase.add(6)),
+            0
+          )
+        );
+        sColor.element(i).assign(
+          vec4(
+            sCurveData.element(initBase.add(8)),
+            sCurveData.element(initBase.add(9)),
+            sCurveData.element(initBase.add(10)),
+            sCurveData.element(initBase.add(11))
+          )
+        );
+        sParticleState.element(i).assign(
+          vec4(
+            sCurveData.element(initBase.add(12)),
+            sCurveData.element(initBase.add(13)),
+            sCurveData.element(initBase.add(14)),
+            sCurveData.element(initBase.add(15))
+          )
+        );
+        sOrbitalIsActive.element(i).assign(
+          vec4(
+            sCurveData.element(initBase.add(16)),
+            sCurveData.element(initBase.add(17)),
+            sCurveData.element(initBase.add(18)),
+            sCurveData.element(initBase.add(19))
+          )
+        );
+        sStartValues.element(i).assign(
+          vec4(
+            sCurveData.element(initBase.add(20)),
+            sCurveData.element(initBase.add(21)),
+            sCurveData.element(initBase.add(22)),
+            sCurveData.element(initBase.add(23))
+          )
+        );
+        sStartColorsExt.element(i).assign(
+          vec4(
+            sCurveData.element(initBase.add(24)),
+            sCurveData.element(initBase.add(25)),
+            sCurveData.element(initBase.add(26)),
+            sCurveData.element(initBase.add(27))
+          )
+        );
+        sCurveData.element(initBase.add(3)).assign(float(0));
       });
-      pos.assign(pos.add(vel.mul(uDelta)));
-      if (collisionPlaneNodes) {
-        collisionPlaneNodes.apply({
-          pos,
-          vel,
-          oiaVec,
-          sColorNode: sColor,
-          ps,
-          startLife,
-          particleIdx: i,
-          sOrbitalIsActiveNode: sOrbitalIsActive
-        });
-      }
-      const lifePct = min(ps.x.div(startLife), float(1));
-      ps.x.assign(ps.x.add(uDeltaMs));
-      if (flags.linearVelocity) {
-        const lvx = curveMap.linearVelX >= 0 ? lookupCurve({
-          curveIndex: float(curveMap.linearVelX),
-          t: lifePct
-        }) : float(0);
-        const lvy = curveMap.linearVelY >= 0 ? lookupCurve({
-          curveIndex: float(curveMap.linearVelY),
-          t: lifePct
-        }) : float(0);
-        const lvz = curveMap.linearVelZ >= 0 ? lookupCurve({
-          curveIndex: float(curveMap.linearVelZ),
-          t: lifePct
-        }) : float(0);
-        pos.assign(pos.add(vec3(lvx, lvy, lvz).mul(uDelta)));
-      }
-      if (flags.orbitalVelocity) {
-        const offset = vec3(oiaVec.x, oiaVec.y, oiaVec.z).toVar();
-        pos.assign(pos.sub(offset));
-        const ovx = curveMap.orbitalVelX >= 0 ? lookupCurve({
-          curveIndex: float(curveMap.orbitalVelX),
-          t: lifePct
-        }) : float(0);
-        const ovy = curveMap.orbitalVelY >= 0 ? lookupCurve({
-          curveIndex: float(curveMap.orbitalVelY),
-          t: lifePct
-        }) : float(0);
-        const ovz = curveMap.orbitalVelZ >= 0 ? lookupCurve({
-          curveIndex: float(curveMap.orbitalVelZ),
-          t: lifePct
-        }) : float(0);
-        const ax = ovx.mul(uDelta);
-        const ay = ovz.mul(uDelta);
-        const az = ovy.mul(uDelta);
-        const cosAz = cos(az);
-        const sinAz = sin(az);
-        const zx = offset.x.mul(cosAz).sub(offset.y.mul(sinAz));
-        const zy = offset.x.mul(sinAz).add(offset.y.mul(cosAz));
-        const zz = offset.z;
-        const cosAy = cos(ay);
-        const sinAy = sin(ay);
-        const yx = zx.mul(cosAy).add(zz.mul(sinAy));
-        const yy = zy;
-        const yz = zx.negate().mul(sinAy).add(zz.mul(cosAy));
-        const cosAx = cos(ax);
-        const sinAx = sin(ax);
-        const fx = yx;
-        const fy = yy.mul(cosAx).sub(yz.mul(sinAx));
-        const fz = yy.mul(sinAx).add(yz.mul(cosAx));
-        offset.assign(vec3(fx, fy, fz));
-        oiaVec.x.assign(offset.x);
-        oiaVec.y.assign(offset.y);
-        oiaVec.z.assign(offset.z);
-        pos.assign(pos.add(offset));
-      }
-      if (flags.sizeOverLifetime && curveMap.sizeOverLifetime >= 0) {
-        const multiplier = lookupCurve({
-          curveIndex: float(curveMap.sizeOverLifetime),
-          t: lifePct
-        });
-        ps.y.assign(sv.y.mul(multiplier));
-      }
-      if (flags.opacityOverLifetime && curveMap.opacityOverLifetime >= 0) {
-        const multiplier = lookupCurve({
-          curveIndex: float(curveMap.opacityOverLifetime),
-          t: lifePct
-        });
-        const col = sColor.element(i).toVar();
-        col.w.assign(sv.z.mul(multiplier));
-        sColor.element(i).assign(col);
-      }
-      if (flags.colorOverLifetime) {
-        const col = sColor.element(i).toVar();
-        const sce = sStartColorsExt.element(i);
-        if (curveMap.colorR >= 0) {
-          const rMul = lookupCurve({
-            curveIndex: float(curveMap.colorR),
-            t: lifePct
+      const oiaVec = sOrbitalIsActive.element(i).toVar();
+      If(oiaVec.w.greaterThanEqual(float(0.5)), () => {
+        const pos = sPosition.element(i).xyz.toVar();
+        const vel = sVelocity.element(i).xyz.toVar();
+        const ps = sParticleState.element(i).toVar();
+        const sv = sStartValues.element(i);
+        ps.x;
+        const startLife = sv.x;
+        vel.assign(vel.sub(vec3(uGravityVelocity).mul(uDelta)));
+        if (forceFieldNodes) {
+          forceFieldNodes.apply({ pos, vel, delta: uDelta });
+        }
+        pos.assign(pos.add(vel.mul(uDelta)));
+        if (collisionPlaneNodes) {
+          collisionPlaneNodes.apply({
+            pos,
+            vel,
+            oiaVec,
+            sColorNode: sColor,
+            ps,
+            startLife,
+            particleIdx: i,
+            sOrbitalIsActiveNode: sOrbitalIsActive
           });
-          col.x.assign(sv.w.mul(rMul));
         }
-        if (curveMap.colorG >= 0) {
-          const gMul = lookupCurve({
-            curveIndex: float(curveMap.colorG),
+        const lifePct = min(ps.x.div(startLife), float(1));
+        ps.x.assign(ps.x.add(uDeltaMs));
+        if (flags.linearVelocity) {
+          const lvx = curveMap.linearVelX >= 0 ? lookupCurve({
+            curveIndex: float(curveMap.linearVelX),
+            t: lifePct
+          }) : float(0);
+          const lvy = curveMap.linearVelY >= 0 ? lookupCurve({
+            curveIndex: float(curveMap.linearVelY),
+            t: lifePct
+          }) : float(0);
+          const lvz = curveMap.linearVelZ >= 0 ? lookupCurve({
+            curveIndex: float(curveMap.linearVelZ),
+            t: lifePct
+          }) : float(0);
+          pos.assign(pos.add(vec3(lvx, lvy, lvz).mul(uDelta)));
+        }
+        if (flags.orbitalVelocity) {
+          const offset = vec3(oiaVec.x, oiaVec.y, oiaVec.z).toVar();
+          pos.assign(pos.sub(offset));
+          const ovx = curveMap.orbitalVelX >= 0 ? lookupCurve({
+            curveIndex: float(curveMap.orbitalVelX),
+            t: lifePct
+          }) : float(0);
+          const ovy = curveMap.orbitalVelY >= 0 ? lookupCurve({
+            curveIndex: float(curveMap.orbitalVelY),
+            t: lifePct
+          }) : float(0);
+          const ovz = curveMap.orbitalVelZ >= 0 ? lookupCurve({
+            curveIndex: float(curveMap.orbitalVelZ),
+            t: lifePct
+          }) : float(0);
+          const ax = ovx.mul(uDelta);
+          const ay = ovz.mul(uDelta);
+          const az = ovy.mul(uDelta);
+          const cosAz = cos(az);
+          const sinAz = sin(az);
+          const zx = offset.x.mul(cosAz).sub(offset.y.mul(sinAz));
+          const zy = offset.x.mul(sinAz).add(offset.y.mul(cosAz));
+          const zz = offset.z;
+          const cosAy = cos(ay);
+          const sinAy = sin(ay);
+          const yx = zx.mul(cosAy).add(zz.mul(sinAy));
+          const yy = zy;
+          const yz = zx.negate().mul(sinAy).add(zz.mul(cosAy));
+          const cosAx = cos(ax);
+          const sinAx = sin(ax);
+          const fx = yx;
+          const fy = yy.mul(cosAx).sub(yz.mul(sinAx));
+          const fz = yy.mul(sinAx).add(yz.mul(cosAx));
+          offset.assign(vec3(fx, fy, fz));
+          oiaVec.x.assign(offset.x);
+          oiaVec.y.assign(offset.y);
+          oiaVec.z.assign(offset.z);
+          pos.assign(pos.add(offset));
+        }
+        if (flags.sizeOverLifetime && curveMap.sizeOverLifetime >= 0) {
+          const multiplier = lookupCurve({
+            curveIndex: float(curveMap.sizeOverLifetime),
             t: lifePct
           });
-          col.y.assign(sce.x.mul(gMul));
+          ps.y.assign(sv.y.mul(multiplier));
         }
-        if (curveMap.colorB >= 0) {
-          const bMul = lookupCurve({
-            curveIndex: float(curveMap.colorB),
+        if (flags.opacityOverLifetime && curveMap.opacityOverLifetime >= 0) {
+          const multiplier = lookupCurve({
+            curveIndex: float(curveMap.opacityOverLifetime),
             t: lifePct
           });
-          col.z.assign(sce.y.mul(bMul));
+          const col = sColor.element(i).toVar();
+          col.w.assign(sv.z.mul(multiplier));
+          sColor.element(i).assign(col);
         }
-        sColor.element(i).assign(col);
-      }
-      if (flags.rotationOverLifetime) {
-        const sce = sStartColorsExt.element(i);
-        ps.z.assign(ps.z.add(sce.z.mul(uDelta).mul(float(0.02))));
-      }
-      if (flags.noise) {
-        const sce = sStartColorsExt.element(i);
-        const noisePos = lifePct.add(sce.w).mul(10).mul(uNoiseStrength).mul(uNoiseFrequency);
-        const noiseX = snoise3D({ v: vec3(noisePos, float(0), float(0)) });
-        const noiseY = snoise3D({
-          v: vec3(noisePos, noisePos, float(0))
-        });
-        const noiseZ = snoise3D({
-          v: vec3(noisePos, noisePos, noisePos)
-        });
-        pos.assign(
-          pos.add(
-            vec3(noiseX, noiseY, noiseZ).mul(uNoisePower).mul(uNoisePosAmount)
-          )
-        );
-        If(uNoiseRotAmount.greaterThan(1e-3), () => {
-          ps.z.assign(ps.z.add(noiseX.mul(uNoisePower).mul(uNoiseRotAmount)));
-        });
-        If(uNoiseSizeAmount.greaterThan(1e-3), () => {
-          ps.y.assign(ps.y.add(noiseX.mul(uNoisePower).mul(uNoiseSizeAmount)));
+        if (flags.colorOverLifetime) {
+          const col = sColor.element(i).toVar();
+          const sce = sStartColorsExt.element(i);
+          if (curveMap.colorR >= 0) {
+            const rMul = lookupCurve({
+              curveIndex: float(curveMap.colorR),
+              t: lifePct
+            });
+            col.x.assign(sv.w.mul(rMul));
+          }
+          if (curveMap.colorG >= 0) {
+            const gMul = lookupCurve({
+              curveIndex: float(curveMap.colorG),
+              t: lifePct
+            });
+            col.y.assign(sce.x.mul(gMul));
+          }
+          if (curveMap.colorB >= 0) {
+            const bMul = lookupCurve({
+              curveIndex: float(curveMap.colorB),
+              t: lifePct
+            });
+            col.z.assign(sce.y.mul(bMul));
+          }
+          sColor.element(i).assign(col);
+        }
+        if (flags.rotationOverLifetime) {
+          const sce = sStartColorsExt.element(i);
+          ps.z.assign(ps.z.add(sce.z.mul(uDelta).mul(float(0.02))));
+        }
+        if (flags.noise) {
+          const sce = sStartColorsExt.element(i);
+          const noisePos = lifePct.add(sce.w).mul(10).mul(uNoiseStrength).mul(uNoiseFrequency);
+          const noiseX = snoise3D({ v: vec3(noisePos, float(0), float(0)) });
+          const noiseY = snoise3D({
+            v: vec3(noisePos, noisePos, float(0))
+          });
+          const noiseZ = snoise3D({
+            v: vec3(noisePos, noisePos, noisePos)
+          });
+          pos.assign(
+            pos.add(
+              vec3(noiseX, noiseY, noiseZ).mul(uNoisePower).mul(uNoisePosAmount)
+            )
+          );
+          If(uNoiseRotAmount.greaterThan(1e-3), () => {
+            ps.z.assign(ps.z.add(noiseX.mul(uNoisePower).mul(uNoiseRotAmount)));
+          });
+          If(uNoiseSizeAmount.greaterThan(1e-3), () => {
+            ps.y.assign(
+              ps.y.add(noiseX.mul(uNoisePower).mul(uNoiseSizeAmount))
+            );
+          });
+        }
+        sPosition.element(i).assign(vec4(pos, 0));
+        sVelocity.element(i).assign(vec4(vel, 0));
+        sParticleState.element(i).assign(ps);
+        sOrbitalIsActive.element(i).assign(oiaVec);
+        If(ps.x.greaterThan(startLife), () => {
+          const deadOia = sOrbitalIsActive.element(i).toVar();
+          deadOia.w.assign(float(0));
+          sOrbitalIsActive.element(i).assign(deadOia);
+          sColor.element(i).assign(vec4(0));
         });
-      }
-      sPosition.element(i).assign(vec4(pos, 0));
-      sVelocity.element(i).assign(vec4(vel, 0));
-      sParticleState.element(i).assign(ps);
-      sOrbitalIsActive.element(i).assign(oiaVec);
-      If(ps.x.greaterThan(startLife), () => {
-        const deadOia = sOrbitalIsActive.element(i).toVar();
-        deadOia.w.assign(float(0));
-        sOrbitalIsActive.element(i).assign(deadOia);
-        sColor.element(i).assign(vec4(0));
       });
     });
   });
@@ -979,8 +998,6 @@ function createModifierComputeUpdate(buffers, maxParticles, curveMap, flags, for
       delta: uDelta,
       deltaMs: uDeltaMs,
       gravityVelocity: uGravityVelocity,
-      worldPositionChange: uWorldPositionChange,
-      simulationSpaceWorld: uSimSpaceWorld,
       noiseStrength: uNoiseStrength,
       noisePower: uNoisePower,
       noiseFrequency: uNoiseFrequency,
@@ -1017,7 +1034,6 @@ function getDummyTexture() {
 function createParticleUniforms(sharedUniforms) {
   const dummy = getDummyTexture();
   const map = sharedUniforms.map.value ?? dummy;
-  if (map) map.colorSpace = NoColorSpace;
   return {
     uMap: map,
     uElapsed: uniform(float(sharedUniforms.elapsed.value)),
@@ -1104,30 +1120,21 @@ var computeSoftParticleFade = Fn(
     return softFade;
   }
 );
-var applyBackgroundDiscard = Fn(
-  ({
-    texColor,
-    uDiscardBg,
-    uBgColor,
-    uBgTolerance
-  }) => {
-    If(uDiscardBg.greaterThan(0.5), () => {
-      const diff = vec3(
-        texColor.x.sub(uBgColor.x),
-        texColor.y.sub(uBgColor.y),
-        texColor.z.sub(uBgColor.z)
-      );
-      If(abs(length(diff)).lessThan(uBgTolerance), () => {
-        Discard();
-      });
-    });
-  }
-);
-var compensateOutputSRGB = Fn(
-  ({ color }) => {
-    return vec4(sRGBTransferEOTF(color.rgb), color.a);
-  }
-);
+function applyBackgroundDiscard({
+  texColor,
+  uDiscardBg,
+  uBgColor,
+  uBgTolerance
+}) {
+  const diff = vec3(
+    texColor.x.sub(uBgColor.x),
+    texColor.y.sub(uBgColor.y),
+    texColor.z.sub(uBgColor.z)
+  );
+  Discard(
+    uDiscardBg.greaterThan(0.5).and(abs(length(diff)).lessThan(uBgTolerance))
+  );
+}
 
 // src/js/effects/three-particles/webgpu/tsl-instanced-billboard-material.ts
 function createInstancedBillboardTSLMaterial(sharedUniforms, rendererConfig, gpuCompute = false) {
@@ -1153,7 +1160,7 @@ function createInstancedBillboardTSLMaterial(sharedUniforms, rendererConfig, gpu
   const vUv = varyingProperty("vec2", "vUv");
   const vViewZ = varyingProperty("float", "vViewZ");
   const vertexNode = Fn(() => {
-    const clipPos = vec4(0, 0, 0, 0).toVar();
+    const clipPos = vec4(0, 0, 0, -1).toVar();
     If(aColor.w.greaterThan(0), () => {
       vColor.assign(aColor.toVar());
       if (gpuCompute) {
@@ -1228,7 +1235,7 @@ function createInstancedBillboardTSLMaterial(sharedUniforms, rendererConfig, gpu
     });
     outColor.assign(vec4(outColor.xyz, outColor.w.mul(softFade)));
     Discard(outColor.w.lessThan(ALPHA_DISCARD_THRESHOLD));
-    return compensateOutputSRGB({ color: outColor });
+    return outColor;
   })();
   const material = new MeshBasicNodeMaterial();
   material.transparent = rendererConfig.transparent;
@@ -1267,7 +1274,7 @@ function createMeshParticleTSLMaterial(sharedUniforms, rendererConfig, gpuComput
   const vNormal = varyingProperty("vec3", "vNormal");
   const vViewZ = varyingProperty("float", "vViewZ");
   const vertexSetup = Fn(() => {
-    const clipPos = vec4(0, 0, 0, 0).toVar();
+    const clipPos = vec4(0, 0, 0, -1).toVar();
     If(aColor.w.greaterThan(0), () => {
       vColor.assign(aColor.toVar());
       if (gpuCompute) {
@@ -1347,7 +1354,7 @@ function createMeshParticleTSLMaterial(sharedUniforms, rendererConfig, gpuComput
     });
     outColor.assign(vec4(outColor.xyz, outColor.w.mul(softFade)));
     Discard(outColor.w.lessThan(ALPHA_DISCARD_THRESHOLD));
-    return compensateOutputSRGB({ color: outColor });
+    return outColor;
   })();
   const material = new MeshBasicNodeMaterial();
   material.transparent = rendererConfig.transparent;
@@ -1440,7 +1447,7 @@ function createPointSpriteTSLMaterial(sharedUniforms, rendererConfig, gpuCompute
     });
     outColor.assign(vec4(outColor.xyz, outColor.w.mul(softFade)));
     Discard(outColor.w.lessThan(ALPHA_DISCARD_THRESHOLD));
-    return compensateOutputSRGB({ color: outColor });
+    return outColor;
   })();
   const material = new PointsNodeMaterial();
   material.transparent = rendererConfig.transparent;
@@ -1457,7 +1464,6 @@ function createPointSpriteTSLMaterial(sharedUniforms, rendererConfig, gpuCompute
 function createTrailUniforms(trailUniforms) {
   const dummy = getDummyTexture();
   const map = trailUniforms.map.value ?? dummy;
-  if (map) map.colorSpace = NoColorSpace;
   return {
     uMap: map,
     uUseMap: uniform(float(trailUniforms.useMap.value ? 1 : 0)),
@@ -1567,7 +1573,7 @@ function createTrailRibbonTSLMaterial(trailUniforms, rendererConfig) {
     Discard(
       u.uDiscardBg.greaterThan(0.5).and(abs(length(diff)).lessThan(u.uBgTolerance))
     );
-    return compensateOutputSRGB({ color: outColor });
+    return outColor;
   })();
   const material = new MeshBasicNodeMaterial();
   material.transparent = rendererConfig.transparent;