@fps-games/vfx 0.3.14 → 0.3.15

package/dist/effects/magnet-suction/index.d.ts

@@ -5,6 +5,8 @@ interface MagnetSuctionParams extends VfxParamValues {
     scale: number;
     initialHeight: number;
     color: VfxColorValue;
+    lineColor: VfxColorValue;
+    particleColor: VfxColorValue;
     opacity: number;
     intensity: number;
     forwardOffset: number;

package/dist/effects/magnet-suction/index.js

@@ -20,13 +20,14 @@ const manifest = {
   assets,
   source
 };
-const BOLT_SEGMENTS = 6;
 const DEFAULT_PARAMS = {
   lifetimeMode: "infinite",
   lifetime: 2.5,
   scale: 1.15,
   initialHeight: 0,
-  color: { r: 0.48, g: 0.9, b: 1 },
+  color: { r: 0.82, g: 0.95, b: 1 },
+  lineColor: { r: 0.82, g: 0.95, b: 1 },
+  particleColor: { r: 0.82, g: 0.95, b: 1 },
   opacity: 1,
   intensity: 1,
   forwardOffset: 0,
@@ -38,18 +39,18 @@ const DEFAULT_PARAMS = {
   fadeDistance: 0.58,
   spawnFade: 0.45,
   suctionSpeed: 1.65,
-  lineCount: 0,
+  lineCount: 32,
   lineLength: 0.46,
-  lineWidth: 0.052,
+  lineWidth: 0.045,
   lineOpacity: 1,
   lineSpread: 1,
   lineTwist: 0,
-  particleCount: 5,
-  particleSize: 0.036,
-  particleSpeed: 1.65,
+  particleCount: 22,
+  particleSize: 0.06,
+  particleSpeed: 2.15,
   particleDrift: 0,
   particleOuterOffset: 0,
-  particleOpacity: 0.68,
+  particleOpacity: 0.85,
   directionX: 0,
   directionZ: -1
 };
@@ -69,7 +70,8 @@ const magnetSuctionEffectPackage = {
     { key: "lifetime", label: "自定义时长", kind: "lifetime", min: 0.1, max: 30, step: 0.01 },
     { key: "scale", label: "整体缩放", kind: "scale", min: 0.05, max: 6, step: 0.01 },
     { key: "initialHeight", label: "局部高度", kind: "number", min: -2, max: 4, step: 0.01 },
-    { key: "color", label: "吸入颜色", kind: "color" },
+    { key: "lineColor", label: "线条颜色", kind: "color" },
+    { key: "particleColor", label: "圆点颜色", kind: "color" },
     { key: "opacity", label: "整体透明度", kind: "opacity", min: 0, max: 1, step: 0.01 },
     { key: "intensity", label: "强度", kind: "opacity", min: 0, max: 1, step: 0.01 },
     { key: "forwardOffset", label: "入口前偏移", kind: "number", min: -2, max: 4, step: 0.01 },
@@ -80,14 +82,16 @@ const magnetSuctionEffectPackage = {
     { key: "mouthPadding", label: "入口保护距离", kind: "number", min: 0.01, max: 2, step: 0.01 },
     { key: "fadeDistance", label: "入口淡出距离", kind: "number", min: 0.01, max: 3, step: 0.01 },
     { key: "spawnFade", label: "外侧淡入距离", kind: "number", min: 0.01, max: 3, step: 0.01 },
-    { key: "lineLength", label: "电弧长度", kind: "number", min: 0.02, max: 2, step: 0.01 },
-    { key: "lineWidth", label: "电弧宽度", kind: "number", min: 2e-3, max: 0.18, step: 1e-3 },
-    { key: "lineOpacity", label: "电弧透明度", kind: "opacity", min: 0, max: 1.5, step: 0.01 },
+    { key: "suctionSpeed", label: "线条速度", kind: "number", min: 0, max: 8, step: 0.01 },
+    { key: "lineCount", label: "白线数量", kind: "number", min: 0, max: 96, step: 1 },
+    { key: "lineLength", label: "白线长度", kind: "number", min: 0.02, max: 2, step: 0.01 },
+    { key: "lineWidth", label: "白线尾宽", kind: "number", min: 2e-3, max: 0.18, step: 1e-3 },
+    { key: "lineOpacity", label: "白线透明度", kind: "opacity", min: 0, max: 1.5, step: 0.01 },
     { key: "lineSpread", label: "散布缩放", kind: "number", min: 0.1, max: 2, step: 0.01 },
-    { key: "particleCount", label: "电弧数量", kind: "number", min: 0, max: 24, step: 1 },
-    { key: "particleSize", label: "电弧抖动大小", kind: "number", min: 5e-3, max: 0.3, step: 1e-3 },
-    { key: "particleSpeed", label: "电弧吸入速度", kind: "number", min: 0, max: 8, step: 0.01 },
-    { key: "particleOpacity", label: "电弧闪烁强度", kind: "opacity", min: 0, max: 1, step: 0.01 },
+    { key: "particleCount", label: "粒子数量", kind: "number", min: 0, max: 80, step: 1 },
+    { key: "particleSize", label: "粒子大小", kind: "number", min: 5e-3, max: 0.3, step: 1e-3 },
+    { key: "particleSpeed", label: "粒子速度", kind: "number", min: 0, max: 10, step: 0.01 },
+    { key: "particleOpacity", label: "粒子透明度", kind: "opacity", min: 0, max: 1, step: 0.01 },
     { key: "directionX", label: "吸入方向 X", kind: "number", min: -1, max: 1, step: 0.01 },
     { key: "directionZ", label: "吸入方向 Z", kind: "number", min: -1, max: 1, step: 0.01 }
   ],
@@ -138,15 +142,26 @@ function createMagnetSuctionField(scene, root, params, renderingGroupId) {
   }
 }
 function createSuctionMesh(scene, root, params, material, renderingGroupId) {
-  const boltCount = Math.max(0, Math.round(params.particleCount));
-  const boltVertexCount = boltCount * BOLT_SEGMENTS * 4;
-  const totalVertexCount = boltVertexCount;
+  const lineCount = Math.max(0, Math.round(params.lineCount));
+  const particleCount = Math.max(0, Math.round(params.particleCount));
+  const lineVertexCount = lineCount * 3;
+  const particleVertexCount = particleCount * 4;
+  const totalVertexCount = lineVertexCount + particleVertexCount;
   const positions = new Float32Array(totalVertexCount * 3);
   const colors = new Float32Array(totalVertexCount * 4);
   const indices = [];
-  let time = 0;
-  for (let base = 0; base < totalVertexCount; base += 4) {
-    pushQuadIndices(indices, base);
+  const lines = [];
+  const particles = [];
+  let resetIndex = 1;
+  for (let index = 0; index < lineCount; index += 1) {
+    const base = index * 3;
+    indices.push(base, base + 1, base + 2);
+    lines.push(resetLine({}, true));
+  }
+  for (let index = 0; index < particleCount; index += 1) {
+    const base = lineVertexCount + index * 4;
+    indices.push(base, base + 1, base + 2, base, base + 2, base + 3);
+    particles.push(resetParticle({}, true));
   }
   const mesh = new Mesh("magnet-suction.mesh", scene);
   mesh.parent = root;
@@ -164,7 +179,15 @@ function createSuctionMesh(scene, root, params, material, renderingGroupId) {
   writeGeometry();
   return { update, dispose };
   function update(deltaSeconds) {
-    time += deltaSeconds;
+    const basis = createSuctionBasis(params);
+    for (const line of lines) {
+      line.d -= line.speed * deltaSeconds;
+      if (line.d < basis.mouthPadding) resetLine(line, false);
+    }
+    for (const particle of particles) {
+      particle.d -= particle.speed * deltaSeconds;
+      if (particle.d < basis.mouthPadding) resetParticle(particle, false);
+    }
     writeGeometry();
   }
   function dispose() {
@@ -173,9 +196,8 @@ function createSuctionMesh(scene, root, params, material, renderingGroupId) {
   function writeGeometry() {
     const basis = createSuctionBasis(params);
     const cameraBasis = createCameraBasis(scene, root, basis);
-    const suctionColor = toColor3(params.color);
-    const electric = new Color3(0.82, 0.98, 1);
-    const boltBlue = new Color3(0.25, 0.62, 1);
+    const lineColor = toColor3(params.lineColor ?? params.color);
+    const particleColor = toColor3(params.particleColor ?? params.color);
     const alphaScale = clamp01(params.opacity) * Math.max(0, params.intensity);
     let vertexIndex = 0;
     const putVertex = (position, color, alpha, brightness = 1) => {
@@ -190,66 +212,61 @@ function createSuctionMesh(scene, root, params, material, renderingGroupId) {
       colors[colorOffset + 3] = clamp01(alpha * alphaScale);
       vertexIndex += 1;
     };
-    const putQuad = (a, b, c, d, color, alpha, brightness = 1) => {
-      putVertex(a, color, alpha, brightness);
-      putVertex(b, color, alpha, brightness);
-      putVertex(c, color, alpha, brightness);
-      putVertex(d, color, alpha, brightness);
-    };
-    const putRibbon = (a, b, width, color, alpha, brightness = 1) => {
-      const segment = b.subtract(a);
-      let side = Vector3.Cross(segment, basis.axis);
-      if (side.lengthSquared() < 1e-4) side = cameraBasis.ribbonSide.clone();
-      side.normalize();
-      const half = side.scale(width * 0.5);
-      putQuad(a.subtract(half), a.add(half), b.add(half), b.subtract(half), color, alpha, brightness);
-    };
-    writeBolts(basis, electric, boltBlue, putRibbon);
-    while (vertexIndex < totalVertexCount) {
-      putVertex(Vector3.Zero(), suctionColor, 0);
+    for (const line of lines) {
+      const alpha = lineFade(line.d, basis) * params.lineOpacity * line.alphaMul;
+      const headD = Math.max(basis.mouthPadding, line.d);
+      const tailD = Math.min(basis.length, line.d + line.len);
+      const head = suctionPosition(headD, line.u, line.v, basis);
+      const tail = suctionPosition(tailD, line.u, line.v, basis);
+      const shrink = Math.max(lateralScale(headD, basis), 0.18);
+      const half = cameraBasis.ribbonSide.scale(line.width * shrink * 0.5);
+      putVertex(tail.subtract(half), lineColor, alpha, line.brightness);
+      putVertex(tail.add(half), lineColor, alpha * 0.92, line.brightness);
+      putVertex(head, lineColor, alpha * 0.22, line.brightness);
+    }
+    for (const particle of particles) {
+      const fade = lineFade(particle.d, basis);
+      const alpha = Math.sqrt(fade) * params.particleOpacity * particle.alphaMul;
+      const center = suctionPosition(particle.d, particle.u, particle.v, basis);
+      const shrink = Math.max(lateralScale(particle.d, basis), 0.48);
+      const right = cameraBasis.particleRight.scale(particle.size * shrink);
+      const up = cameraBasis.particleUp.scale(particle.size * shrink * 0.7);
+      putVertex(center.subtract(right).subtractInPlace(up), particleColor, alpha, particle.brightness);
+      putVertex(center.add(right).subtractInPlace(up), particleColor, alpha, particle.brightness);
+      putVertex(center.add(right).addInPlace(up), particleColor, alpha * 0.8, particle.brightness);
+      putVertex(center.subtract(right).addInPlace(up), particleColor, alpha * 0.8, particle.brightness);
     }
     mesh.updateVerticesData(VertexBuffer.PositionKind, positions, false, false);
     mesh.updateVerticesData(VertexBuffer.ColorKind, colors, false, false);
-    function writeBolts(currentBasis, boltColor, edgeColor, writeRibbon) {
-      for (let bolt = 0; bolt < boltCount; bolt += 1) {
-        const seed = sequence01(bolt + 7, bolt % 8);
-        const speedScale = Math.max(0, params.particleSpeed) / DEFAULT_PARAMS.particleSpeed;
-        const cycle = (time * speedScale * (1.45 + seed * 0.55) + seed) % 1;
-        const flicker = sequence01(bolt * 17 + Math.floor(time * 20), bolt % 8);
-        const active = flicker > 0.28 ? 1 : 0.18;
-        const angle = bolt * 2.399 + time * (1.7 + seed * 0.9);
-        const lengthScale = Math.max(0.04, params.lineLength / DEFAULT_PARAMS.lineLength);
-        const boltLength = lerp(currentBasis.length * 0.16, currentBasis.length * 0.28, seed) * lengthScale;
-        const headDistance = lerp(currentBasis.length * 0.92, currentBasis.mouthPadding * 1.15, cycle);
-        let previousDistance = Math.min(currentBasis.length, headDistance + boltLength);
-        let previous = suctionPosition(
-          previousDistance,
-          Math.cos(angle) * currentBasis.spreadX * 0.5 * lateralScale(previousDistance, currentBasis),
-          Math.sin(angle * 1.3) * currentBasis.spreadY * 0.5 * lateralScale(previousDistance, currentBasis),
-          currentBasis
-        );
-        for (let segment = 0; segment < BOLT_SEGMENTS; segment += 1) {
-          const t = (segment + 1) / BOLT_SEGMENTS;
-          const distance = Math.max(currentBasis.mouthPadding * 1.08, lerp(previousDistance, headDistance, t));
-          const suckScale = lateralScale(distance, currentBasis);
-          const jitter = (sequence01(bolt * 19 + segment + Math.floor(time * 18), segment) - 0.5) * 0.34 * currentBasis.spreadX * suckScale;
-          const curl = angle + t * (2.6 + seed * 1.8) + Math.sin(time * 4 + bolt) * 0.35;
-          const next = suctionPosition(
-            distance,
-            Math.cos(curl) * currentBasis.spreadX * suckScale * (1 - t * 0.45) + jitter,
-            Math.sin(curl * 1.25) * currentBasis.spreadY * suckScale * (1 - t * 0.5),
-            currentBasis
-          );
-          const mouthFade = smoothstep(0.04, 0.18, cycle) * (1 - smoothstep(0.88, 1, cycle));
-          writeRibbon(previous, next, basis.lineWidth * 0.58, segment % 2 === 0 ? boltColor : edgeColor, 0.38 * params.lineOpacity * active * mouthFade, 1.85);
-          previous = next;
-        }
-      }
-    }
   }
-}
-function pushQuadIndices(indices, base) {
-  indices.push(base, base + 1, base + 2, base, base + 2, base + 3);
+  function resetLine(line, initial) {
+    const basis = createSuctionBasis(params);
+    line.d = initial ? randomRange(basis.mouthPadding + 0.05, basis.length) : basis.length + randomRange(0, basis.spawnFade);
+    line.u = randomRange(-basis.spreadX * 0.5, basis.spreadX * 0.5);
+    line.v = randomRange(-basis.spreadY * 0.5, basis.spreadY * 0.5);
+    line.len = randomRange(basis.lineLength * 0.65, basis.lineLength * 1.35);
+    line.width = randomRange(basis.lineWidth * 0.65, basis.lineWidth * 1.35);
+    line.speed = Math.max(0, params.suctionSpeed * Math.max(0.01, params.scale)) * randomRange(0.78, 1.25);
+    line.alphaMul = randomRange(0.65, 1);
+    line.brightness = randomRange(0.82, 1);
+    return line;
+  }
+  function resetParticle(particle, initial) {
+    const basis = createSuctionBasis(params);
+    particle.d = initial ? randomRange(basis.mouthPadding + 0.05, basis.length) : basis.length + randomRange(0, basis.spawnFade);
+    particle.u = randomRange(-basis.spreadX * 0.55, basis.spreadX * 0.55);
+    particle.v = randomRange(-basis.spreadY * 0.55, basis.spreadY * 0.55);
+    particle.size = randomRange(basis.particleSize * 0.45, basis.particleSize * 1.15);
+    particle.speed = Math.max(0, params.particleSpeed * Math.max(0.01, params.scale)) * randomRange(0.75, 1.35);
+    particle.alphaMul = randomRange(0.35, 0.9);
+    particle.brightness = randomRange(0.75, 1);
+    return particle;
+  }
+  function randomRange(min, max) {
+    const id2 = resetIndex;
+    resetIndex += 1;
+    return lerp(min, max, sequence01(id2, resetIndex % 8));
+  }
 }
 function createSuctionBasis(params) {
   const scale = Math.max(0.01, params.scale);
@@ -348,7 +365,7 @@ function createSuctionMaterial(scene) {
   });
   material.backFaceCulling = false;
   material.transparencyMode = Material.MATERIAL_ALPHABLEND;
-  material.alphaMode = Constants.ALPHA_ADD;
+  material.alphaMode = Constants.ALPHA_COMBINE;
   material.disableDepthWrite = true;
   return material;
 }
@@ -377,6 +394,12 @@ function registerSuctionShaders() {
     `;
   }
 }
+function lineFade(distance, basis) {
+  const mouthFade = smoothstep(basis.mouthPadding, basis.mouthPadding + basis.fadeDistance, distance);
+  const clampedDistance = Math.min(distance, basis.length);
+  const outerFade = smoothstep(0, basis.spawnFade, basis.length - clampedDistance);
+  return mouthFade * outerFade;
+}
 function toColor3(color) {
   return new Color3(clamp01(color.r), clamp01(color.g), clamp01(color.b));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fps-games/vfx",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "type": "module",
   "description": "Shared VFX library for Playable projects: engine-injected effect packages + runtime. Project-pure (no imports of host project code).",
   "publishConfig": {