@fps-games/vfx 0.3.13 → 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

@@ -26,6 +26,8 @@ const DEFAULT_PARAMS = {
   scale: 1.15,
   initialHeight: 0,
   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,
@@ -43,12 +45,12 @@ const DEFAULT_PARAMS = {
   lineOpacity: 1,
   lineSpread: 1,
   lineTwist: 0,
-  particleCount: 14,
-  particleSize: 0.032,
+  particleCount: 22,
+  particleSize: 0.06,
   particleSpeed: 2.15,
   particleDrift: 0,
   particleOuterOffset: 0,
-  particleOpacity: 0.55,
+  particleOpacity: 0.85,
   directionX: 0,
   directionZ: -1
 };
@@ -68,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 },
@@ -193,10 +196,11 @@ function createSuctionMesh(scene, root, params, material, renderingGroupId) {
   function writeGeometry() {
     const basis = createSuctionBasis(params);
     const cameraBasis = createCameraBasis(scene, root, basis);
-    const color = toColor3(params.color);
+    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, alpha, brightness = 1) => {
+    const putVertex = (position, color, alpha, brightness = 1) => {
       const positionOffset = vertexIndex * 3;
       const colorOffset = vertexIndex * 4;
       positions[positionOffset] = position.x;
@@ -216,20 +220,21 @@ function createSuctionMesh(scene, root, params, material, renderingGroupId) {
       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), alpha, line.brightness);
-      putVertex(tail.add(half), alpha * 0.92, line.brightness);
-      putVertex(head, alpha * 0.22, line.brightness);
+      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 alpha = lineFade(particle.d, basis) * params.particleOpacity * particle.alphaMul;
+      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.22);
+      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), alpha, particle.brightness);
-      putVertex(center.add(right).subtractInPlace(up), alpha, particle.brightness);
-      putVertex(center.add(right).addInPlace(up), alpha * 0.8, particle.brightness);
-      putVertex(center.subtract(right).addInPlace(up), alpha * 0.8, particle.brightness);
+      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);

package/dist/effects/player-upgrade/index.js

@@ -3,12 +3,10 @@ import { Vector3 } from "@babylonjs/core/Maths/math.vector";
 import { Constants } from "@babylonjs/core/Engines/constants";
 import { DynamicTexture } from "@babylonjs/core/Materials/Textures/dynamicTexture";
 import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
-import { CreateCylinder } from "@babylonjs/core/Meshes/Builders/cylinderBuilder";
 import { CreateDisc } from "@babylonjs/core/Meshes/Builders/discBuilder";
 import { CreatePlane } from "@babylonjs/core/Meshes/Builders/planeBuilder";
-import { CreateTorus } from "@babylonjs/core/Meshes/Builders/torusBuilder";
 import { ParticleSystem } from "@babylonjs/core/Particles/particleSystem";
-import { c as configureVfxParticleSystem, V as VFX_RENDERING_GROUP_ID } from "../../chunks/rendering-CV3nhygX.js";
+import { c as configureVfxParticleSystem } from "../../chunks/rendering-CV3nhygX.js";
 const id = "player-upgrade";
 const nameZh = "人物升级光效";
 const source = "runtime-generated";
@@ -22,6 +20,7 @@ const manifest = {
 const strandTextureByScene = /* @__PURE__ */ new WeakMap();
 const glowTextureByScene = /* @__PURE__ */ new WeakMap();
 const haloTextureByScene = /* @__PURE__ */ new WeakMap();
+const ringTextureByScene = /* @__PURE__ */ new WeakMap();
 const DEFAULT_PARAMS = {
   lifetime: 2.4,
   scale: 1,
@@ -73,13 +72,13 @@ const playerUpgradeEffectPackage = {
     { key: "glowHeight", label: "光柱高度", kind: "number", min: 0.2, max: 5, step: 0.01 },
     { key: "glowWidth", label: "光柱宽度", kind: "number", min: 0.1, max: 4, step: 0.01 }
   ],
-  create({ scene, root, position, params }) {
+  create({ scene, root, position, params, renderingGroupId, scale }) {
     markVfxRoot(root);
     root.position.copyFrom(position);
-    const strands = createStrandSystem(scene, root, params);
-    const strandMeshes = createStrandMeshes(scene, root, params);
-    const rings = createExpandingRings(scene, root, params);
-    const glowAura = createGlowAura(scene, root, params);
+    const groupId = renderingGroupId ?? 0;
+    const strands = createStrandSystem(scene, root, params, groupId, scale);
+    const rings = createExpandingRings(scene, root, params, groupId);
+    const glowAura = createGlowAura(scene, root, params, groupId);
     let disposed = false;
     const disposeTimer = window.setTimeout(() => disposeAll(), getDisposeDelaySeconds(params) * 1e3);
     strands.start();
@@ -95,7 +94,6 @@ const playerUpgradeEffectPackage = {
       window.clearTimeout(disposeTimer);
       strands.stop();
       strands.dispose(false);
-      strandMeshes.dispose();
       rings.dispose();
       glowAura.dispose();
       cleanupPlanarShadowArtifacts(scene);
@@ -133,7 +131,7 @@ function cleanupPlanarShadowArtifacts(scene) {
     }
   }
 }
-function createGlowAura(scene, root, params) {
+function createGlowAura(scene, root, params, renderingGroupId) {
   const effectScale = Math.max(0.05, params.scale);
   const color = params.color;
   const glowHeight = Math.max(0.1, params.glowHeight) * effectScale;
@@ -148,7 +146,7 @@ function createGlowAura(scene, root, params) {
     mesh.position.y = glowHeight * 0.48;
     mesh.rotation.y = index * Math.PI / 3;
     mesh.scaling.set(glowWidth, glowHeight, 1);
-    mesh.renderingGroupId = VFX_RENDERING_GROUP_ID;
+    mesh.renderingGroupId = renderingGroupId;
     const material = new StandardMaterial(`player-upgrade.soft-glow-column-material.${index}`, scene);
     configureTexturedGlowMaterial(material, color, getGlowTexture(scene), 2.8);
     material.alpha = 0;
@@ -162,7 +160,7 @@ function createGlowAura(scene, root, params) {
   halo.position.y = 0.025 * effectScale;
   halo.rotation.x = Math.PI / 2;
   halo.scaling.set(glowWidth * 1.12, glowWidth * 1.12, 1);
-  halo.renderingGroupId = VFX_RENDERING_GROUP_ID;
+  halo.renderingGroupId = renderingGroupId;
   const haloMaterial = new StandardMaterial("player-upgrade.ground-halo-material", scene);
   configureTexturedGlowMaterial(haloMaterial, color, getHaloTexture(scene), 2.4);
   haloMaterial.alpha = 0;
@@ -198,19 +196,23 @@ function createGlowAura(scene, root, params) {
   }
   return { dispose };
 }
-function createStrandSystem(scene, root, params) {
+function createStrandSystem(scene, root, params, renderingGroupId, spawnScale) {
   const effectScale = Math.max(0.05, params.scale);
+  const spawnHorizontalScale = getHorizontalScale(spawnScale);
+  const spawnVerticalScale = Math.max(0.01, Math.abs(spawnScale.y));
   const count = Math.max(0, Math.round(params.strandCount));
   const color = params.color;
   const bright = brighten(color, 0.72);
-  const strandLength = Math.max(0.05, params.strandLength) * effectScale;
+  const strandLength = Math.max(0.05, params.strandLength) * effectScale * spawnVerticalScale;
   const strandRadius = Math.max(0, params.strandRadius) * effectScale;
-  const strandWidth = Math.max(1e-3, params.strandWidth) * effectScale;
+  const strandWidth = Math.max(1e-3, params.strandWidth) * effectScale * spawnHorizontalScale;
   const system = new ParticleSystem("player-upgrade.gold-strands", Math.max(1, count), scene);
   configureVfxParticleSystem(system);
+  system.renderingGroupId = renderingGroupId;
   system.particleTexture = getStrandTexture(scene);
   system.particleTexture.hasAlpha = true;
   system.emitter = root;
+  system.isLocal = true;
   system.manualEmitCount = count;
   system.emitRate = count * 60;
   system.targetStopDuration = 0.05;
@@ -224,9 +226,9 @@ function createStrandSystem(scene, root, params) {
   system.maxScaleX = strandWidth * 1.8;
   system.minScaleY = 1;
   system.maxScaleY = 1.6;
-  system.minEmitPower = Math.max(0.01, params.riseSpeed * effectScale * 0.55);
-  system.maxEmitPower = Math.max(system.minEmitPower, params.riseSpeed * effectScale * 1.28);
-  system.gravity = new Vector3(0, 0.34 * effectScale, 0);
+  system.minEmitPower = Math.max(0.01, params.riseSpeed * effectScale * spawnVerticalScale * 0.55);
+  system.maxEmitPower = Math.max(system.minEmitPower, params.riseSpeed * effectScale * spawnVerticalScale * 1.28);
+  system.gravity = new Vector3(0, 0.34 * effectScale * spawnVerticalScale, 0);
   system.updateSpeed = 1 / 60;
   system.color1 = toColor4(color, params.opacity * 0.72);
   system.color2 = toColor4(bright, params.opacity);
@@ -267,102 +269,28 @@ function createStrandSystem(scene, root, params) {
   };
   return system;
 }
-function createStrandMeshes(scene, root, params) {
-  const effectScale = Math.max(0.05, params.scale);
-  const count = Math.min(90, Math.max(0, Math.round(params.strandCount * 0.62)));
-  const color = params.color;
-  const radius = Math.max(0.04, params.strandRadius * effectScale);
-  const strandLength = Math.max(0.05, params.strandLength * effectScale);
-  const riseHeight = Math.max(0.1, params.strandHeight * effectScale);
-  const width = Math.max(5e-3, params.strandWidth * effectScale * 1.25);
-  const speedScale = Math.max(0.2, params.riseSpeed / DEFAULT_PARAMS.riseSpeed);
-  const duration = Math.max(0.22, params.lifetime * 0.72 / speedScale);
-  const states = [];
-  for (let index = 0; index < count; index += 1) {
-    const angle = sequence01(index, 0) * Math.PI * 2;
-    const localRadius = radius * lerp(0.42, 1.08, sequence01(index, 1));
-    const mesh = CreateCylinder(
-      `player-upgrade.gold-strand-mesh.${index}`,
-      { height: 1, diameter: width, tessellation: 6 },
-      scene
-    );
-    prepareVfxMesh(mesh);
-    mesh.parent = root;
-    mesh.position.x = Math.cos(angle) * localRadius;
-    mesh.position.z = Math.sin(angle) * localRadius;
-    mesh.position.y = 0;
-    mesh.renderingGroupId = VFX_RENDERING_GROUP_ID;
-    mesh.isVisible = false;
-    const material = new StandardMaterial(`player-upgrade.gold-strand-mesh-material.${index}`, scene);
-    configureGlowMaterial(material, color, 2.8);
-    material.alpha = 0;
-    mesh.material = material;
-    states.push({
-      mesh,
-      material,
-      height: strandLength * lerp(0.68, 1.18, sequence01(index, 2)),
-      startDelay: sequence01(index, 3) * Math.min(0.34, params.lifetime * 0.18),
-      duration: duration * lerp(0.78, 1.12, sequence01(index, 4))
-    });
-  }
-  let age = 0;
-  let disposed = false;
-  const observer = scene.onBeforeRenderObservable.add(() => {
-    if (disposed) return;
-    const deltaSeconds = Math.min(0.05, scene.getEngine().getDeltaTime() / 1e3);
-    age += deltaSeconds;
-    for (const state of states) {
-      const localAge = age - state.startDelay;
-      if (localAge < 0 || localAge > state.duration) {
-        state.mesh.isVisible = false;
-        state.material.alpha = 0;
-        continue;
-      }
-      const t = Math.min(1, localAge / state.duration);
-      const grow = Math.min(1, t / 0.32);
-      const fadeOut = Math.max(0, 1 - Math.max(0, t - 0.66) / 0.34);
-      const alpha = params.opacity * fadeOut * Math.min(1, t / 0.12);
-      const currentHeight = state.height * grow;
-      state.mesh.isVisible = alpha > 0.01;
-      state.mesh.scaling.set(1, currentHeight, 1);
-      state.mesh.position.y = currentHeight * 0.5 + riseHeight * easeOutCubic(t);
-      state.material.alpha = Math.min(1, alpha * 1.35);
-    }
-    if (age >= params.lifetime + 0.45) dispose();
-  });
-  function dispose() {
-    if (disposed) return;
-    disposed = true;
-    scene.onBeforeRenderObservable.remove(observer);
-    for (const state of states) {
-      state.mesh.dispose();
-      state.material.dispose();
-    }
-  }
-  return { dispose };
-}
-function createExpandingRings(scene, root, params) {
+function createExpandingRings(scene, root, params, renderingGroupId) {
   const effectScale = Math.max(0.05, params.scale);
   const ringCount = Math.max(0, Math.round(params.ringCount));
   const ringDuration = Math.max(0.18, Math.min(0.9, params.lifetime * 0.38));
   const minRadius = 0.14 * effectScale;
   const maxRadius = Math.max(minRadius + 0.01, params.ringMaxRadius * effectScale);
-  const thickness = Math.max(2e-3, params.ringThickness * effectScale);
   const color = params.color;
   const states = [];
   for (let index = 0; index < ringCount; index += 1) {
-    const mesh = CreateTorus(
+    const mesh = CreatePlane(
       `player-upgrade.expanding-ring.${index}`,
-      { diameter: 1, thickness, tessellation: 96 },
+      { size: 2 },
       scene
     );
     prepareVfxMesh(mesh);
     mesh.parent = root;
     mesh.position.y = 0.03 * effectScale + index * 0.012 * effectScale;
-    mesh.renderingGroupId = VFX_RENDERING_GROUP_ID;
+    mesh.rotation.x = Math.PI / 2;
+    mesh.renderingGroupId = renderingGroupId;
     mesh.isVisible = false;
     const material = new StandardMaterial(`player-upgrade.ring-material.${index}`, scene);
-    configureGlowMaterial(material, color, 2.4);
+    configureTexturedGlowMaterial(material, color, getRingTexture(scene), 2.4);
     material.alpha = 0;
     mesh.material = material;
     states.push({
@@ -390,7 +318,7 @@ function createExpandingRings(scene, root, params) {
       const radius = lerp(minRadius, maxRadius, eased);
       const alpha = params.ringOpacity * (1 - t) * Math.min(1, t / 0.12);
       state.mesh.isVisible = alpha > 0.01;
-      state.mesh.scaling.set(radius, radius, radius);
+      state.mesh.scaling.set(radius, radius, 1);
       const ringColor = brighten(color, 0.1 + 0.08 * (1 - t));
       state.material.diffuseColor = toColor3(ringColor);
       state.material.emissiveColor = toGlowColor3(ringColor, 3.4);
@@ -477,6 +405,45 @@ function getHaloTexture(scene) {
   haloTextureByScene.set(scene, texture);
   return texture;
 }
+function getRingTexture(scene) {
+  const existing = ringTextureByScene.get(scene);
+  if (existing) return existing;
+  const size = 256;
+  const texture = new DynamicTexture("player_upgrade_expanding_ring_texture", { width: size, height: size }, scene, true);
+  const context = texture.getContext();
+  const canvasContext = context;
+  context.clearRect(0, 0, size, size);
+  const center = size / 2;
+  const radius = size * 0.39;
+  const strokeWidth = size * 0.105;
+  canvasContext.lineCap = "round";
+  canvasContext.lineJoin = "round";
+  const outerGlow = context.createRadialGradient(center, center, radius - strokeWidth * 1.1, center, center, radius + strokeWidth * 1.8);
+  outerGlow.addColorStop(0, "rgba(255,255,255,0)");
+  outerGlow.addColorStop(0.38, "rgba(255,255,255,0.28)");
+  outerGlow.addColorStop(0.58, "rgba(255,255,255,0.34)");
+  outerGlow.addColorStop(1, "rgba(255,255,255,0)");
+  context.strokeStyle = outerGlow;
+  context.lineWidth = strokeWidth * 2.6;
+  context.beginPath();
+  context.arc(center, center, radius, 0, Math.PI * 2);
+  context.stroke();
+  const core = context.createRadialGradient(center, center, radius - strokeWidth * 0.85, center, center, radius + strokeWidth * 0.85);
+  core.addColorStop(0, "rgba(255,255,255,0)");
+  core.addColorStop(0.42, "rgba(255,255,255,0.72)");
+  core.addColorStop(0.5, "rgba(255,255,255,1)");
+  core.addColorStop(0.62, "rgba(255,255,255,0.62)");
+  core.addColorStop(1, "rgba(255,255,255,0)");
+  context.strokeStyle = core;
+  context.lineWidth = strokeWidth;
+  context.beginPath();
+  context.arc(center, center, radius, 0, Math.PI * 2);
+  context.stroke();
+  texture.hasAlpha = true;
+  texture.update(false);
+  ringTextureByScene.set(scene, texture);
+  return texture;
+}
 function getDisposeDelaySeconds(params) {
   const ringDuration = Math.max(0.18, Math.min(0.9, params.lifetime * 0.38));
   return Math.max(0.2, params.lifetime) + getLastRingEndTime(params, ringDuration) + 0.35;
@@ -484,6 +451,9 @@ function getDisposeDelaySeconds(params) {
 function getLastRingEndTime(params, ringDuration) {
   return Math.max(0, Math.round(params.ringCount) - 1) * Math.max(0.02, params.ringInterval) + ringDuration;
 }
+function getHorizontalScale(scale) {
+  return Math.max(0.01, (Math.abs(scale.x) + Math.abs(scale.z)) * 0.5);
+}
 function toColor4(color, alpha) {
   return new Color4(clamp01(color.r), clamp01(color.g), clamp01(color.b), clamp01(alpha));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fps-games/vfx",
-  "version": "0.3.13",
+  "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": {