@fps-games/vfx 0.1.1

package/packages/effects/vehicle-exhaust-smoke/index.ts

@@ -0,0 +1,298 @@
+import { Color4 } from '@babylonjs/core/Maths/math.color';
+import { Vector3 } from '@babylonjs/core/Maths/math.vector';
+import type { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import { Sprite } from '@babylonjs/core/Sprites/sprite';
+import { SpriteManager } from '@babylonjs/core/Sprites/spriteManager';
+import type { Scene } from '@babylonjs/core/scene';
+import type { VfxColorValue, VfxEffectPackage, VfxParamValues } from '../../types';
+import { configureVfxSpriteManager, VFX_RENDERING_GROUP_ID } from '../../rendering';
+import manifest from './effect.json';
+
+interface VehicleExhaustSmokeParams extends VfxParamValues {
+  lifetimeMode: string;
+  lifetime: number;
+  scale: number;
+  initialHeight: number;
+  color: VfxColorValue;
+  opacity: number;
+  particleCount: number;
+  particleMaxLifetime: number;
+  emitRange: number;
+  riseHeight: number;
+  smokeSize: number;
+  driftSpeed: number;
+  directionX: number;
+  directionZ: number;
+}
+
+interface SmokeSpriteState {
+  sprite: Sprite;
+  velocity: Vector3;
+  spin: number;
+  width: number;
+  height: number;
+  lifetime: number;
+  alphaScale: number;
+  age: number;
+  active: boolean;
+}
+
+import SMOKE_TEXTURE_URL from './assets/textures/vehicle_exhaust_smoke_atlas.png?url';
+
+const DEFAULT_PARAMS: VehicleExhaustSmokeParams = {
+  lifetimeMode: 'infinite',
+  lifetime: 2.2,
+  scale: 1.35,
+  initialHeight: 0.55,
+  color: { r: 0.34, g: 0.34, b: 0.32 },
+  opacity: 0.78,
+  particleCount: 82,
+  particleMaxLifetime: 1.61,
+  emitRange: 0.3,
+  riseHeight: 0.72,
+  smokeSize: 0.82,
+  driftSpeed: 1.4,
+  directionX: -1,
+  directionZ: 0,
+};
+
+export const vehicleExhaustSmokeEffectPackage: VfxEffectPackage<VehicleExhaustSmokeParams> = {
+  id: 'vehicle-exhaust-smoke',
+  nameZh: '小车尾气',
+  manifest,
+  defaultParams: DEFAULT_PARAMS,
+  debugAnchor: 'player',
+  debugParams: [
+    {
+      key: 'lifetimeMode',
+      label: '生命周期模式',
+      kind: 'enum',
+      options: [
+        { value: 'infinite', label: '无限' },
+        { value: 'duration', label: '自定义时间' },
+      ],
+    },
+    { key: 'lifetime', label: '自定义时长', kind: 'lifetime', min: 0.1, max: 30, step: 0.01 },
+    { key: 'scale', label: '整体缩放', kind: 'scale', min: 0.05, max: 8, step: 0.01 },
+    { key: 'initialHeight', label: '初始高度', kind: 'number', min: -1, max: 3, step: 0.01 },
+    { key: 'color', label: '尾气颜色', kind: 'color' },
+    { key: 'opacity', label: '透明度', kind: 'opacity', min: 0, max: 1, step: 0.01 },
+    { key: 'particleCount', label: '粒子数量', kind: 'number', min: 1, max: 180, step: 1 },
+    { key: 'particleMaxLifetime', label: '单粒最大生命周期', kind: 'lifetime', min: 0.08, max: 5, step: 0.01 },
+    { key: 'emitRange', label: '排气口宽度', kind: 'number', min: 0, max: 2, step: 0.01 },
+    { key: 'riseHeight', label: '上浮高度', kind: 'number', min: -1, max: 4, step: 0.01 },
+    { key: 'smokeSize', label: '烟团大小', kind: 'number', min: 0.02, max: 3, step: 0.01 },
+    { key: 'driftSpeed', label: '飘散速度', kind: 'number', min: 0.05, max: 8, 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 },
+  ],
+  create({ scene, root, position, renderingGroupId, params }) {
+    const effectScale = Math.max(0.05, params.scale);
+    root.position.copyFrom(position).addInPlace(new Vector3(0, params.initialHeight * effectScale, 0));
+    const smokeTrail = createExhaustSpriteTrail(scene, root, params, renderingGroupId);
+    let disposed = false;
+    const durationSeconds = readDurationSeconds(params);
+    const disposeTimer = durationSeconds == null
+      ? 0
+      : window.setTimeout(() => disposeAll(), getDisposeDelaySeconds(params) * 1000);
+
+    return {
+      root,
+      dispose() {
+        disposeAll();
+      },
+    };
+
+    function disposeAll(): void {
+      if (disposed) return;
+      disposed = true;
+      if (disposeTimer) window.clearTimeout(disposeTimer);
+      smokeTrail.dispose();
+      root.dispose();
+    }
+  },
+};
+
+function createExhaustSpriteTrail(
+  scene: Scene,
+  root: TransformNode,
+  params: VehicleExhaustSmokeParams,
+  renderingGroupId?: number,
+): { dispose(): void } {
+  const count = Math.max(1, Math.round(params.particleCount));
+  const manager = new SpriteManager('vehicle-exhaust-smoke.puffs', SMOKE_TEXTURE_URL, count, { width: 128, height: 128 }, scene);
+  configureVfxSpriteManager(manager);
+  manager.renderingGroupId = renderingGroupId ?? VFX_RENDERING_GROUP_ID;
+  manager.texture.hasAlpha = true;
+  manager.fogEnabled = false;
+
+  const effectScale = Math.max(0.05, params.scale);
+  const emitRange = Math.max(0, params.emitRange) * effectScale;
+  const smokeSize = Math.max(0.01, params.smokeSize) * effectScale;
+  const driftSpeed = Math.max(0.01, params.driftSpeed) * effectScale;
+  const particleMaxLifetime = Math.max(0.08, params.particleMaxLifetime);
+  const durationSeconds = readDurationSeconds(params);
+  const puffLifetime = particleMaxLifetime / 1.18;
+  const emitInterval = Math.max(0.018, 2.2 / Math.max(1, count));
+  const states: SmokeSpriteState[] = [];
+
+  for (let index = 0; index < count; index += 1) {
+    const sprite = new Sprite(`vehicle-exhaust-smoke.puff.${index}`, manager);
+    sprite.isVisible = false;
+    sprite.color = toColor4(params.color, 0);
+    states.push({
+      sprite,
+      velocity: Vector3.Zero(),
+      spin: 0,
+      width: 0,
+      height: 0,
+      lifetime: puffLifetime,
+      alphaScale: 1,
+      age: 0,
+      active: false,
+    });
+  }
+
+  let age = 0;
+  let emissionIndex = 0;
+  let emitAccumulator = 0;
+  let disposed = false;
+
+  const warmStartCount = Math.min(count, Math.max(3, Math.ceil(count * 0.08)));
+  for (let index = 0; index < warmStartCount; index += 1) {
+    const state = states[index];
+    spawnPuff(state, emissionIndex);
+    state.age = (index / warmStartCount) * state.lifetime * 0.52;
+    emissionIndex += 1;
+  }
+
+  const observer = scene.onBeforeRenderObservable.add(() => {
+    if (disposed) return;
+    const deltaSeconds = Math.min(0.05, scene.getEngine().getDeltaTime() / 1000);
+    age += deltaSeconds;
+    if (durationSeconds == null || age <= durationSeconds) {
+      emitAccumulator += deltaSeconds;
+      while (emitAccumulator >= emitInterval) {
+        emitAccumulator -= emitInterval;
+        const state = findAvailableState(states);
+        if (!state) break;
+        spawnPuff(state, emissionIndex);
+        emissionIndex += 1;
+      }
+    }
+    for (const state of states) {
+      if (!state.active) continue;
+      state.age += deltaSeconds;
+      const t = Math.min(1, state.age / state.lifetime);
+      const fadeIn = Math.min(1, t / 0.12);
+      const fadeOut = Math.max(0, 1 - Math.max(0, t - 0.34) / 0.66);
+      const alpha = clamp01(params.opacity) * state.alphaScale * fadeIn * fadeOut;
+      state.sprite.position.addInPlace(state.velocity.scale(deltaSeconds));
+      state.sprite.angle += state.spin * deltaSeconds;
+      const grow = 1 + t * 1.45;
+      state.sprite.width = state.width * grow;
+      state.sprite.height = state.height * grow;
+      state.sprite.color = toColor4(params.color, alpha);
+      state.sprite.isVisible = alpha > 0.01 && t < 1;
+      if (t >= 1) {
+        state.active = false;
+        state.sprite.isVisible = false;
+      }
+    }
+    if (durationSeconds != null && age >= durationSeconds + particleMaxLifetime + 0.35) dispose();
+  });
+
+  function dispose(): void {
+    if (disposed) return;
+    disposed = true;
+    scene.onBeforeRenderObservable.remove(observer);
+    for (const state of states) state.sprite.dispose();
+    manager.dispose();
+  }
+
+  return { dispose };
+
+  function spawnPuff(state: SmokeSpriteState, seed: number): void {
+    const spawnOrigin = root.getAbsolutePosition();
+    const direction = readWorldDirection(root, params);
+    const side = makeSideVector(direction);
+    const jitterSide = (sequence01(seed, 0) - 0.5) * emitRange;
+    const jitterForward = (sequence01(seed, 1) - 0.5) * emitRange * 0.45;
+    const startHeight = (sequence01(seed, 2) - 0.5) * emitRange * 0.3;
+    const baseSize = smokeSize * lerp(0.56, 1.12, sequence01(seed, 3));
+    state.sprite.position = spawnOrigin
+      .add(direction.scale(jitterForward))
+      .add(side.scale(jitterSide))
+      .add(new Vector3(0, startHeight, 0));
+    state.sprite.width = baseSize;
+    state.sprite.height = baseSize * lerp(0.82, 1.18, sequence01(seed, 4));
+    state.sprite.angle = sequence01(seed, 5) * Math.PI * 2;
+    state.sprite.cellIndex = Math.floor(sequence01(seed, 6) * 4) % 4;
+    state.sprite.color = toColor4(params.color, 0);
+    state.sprite.isVisible = true;
+    state.velocity = direction
+      .scale(driftSpeed * lerp(0.68, 1.18, sequence01(seed, 7)))
+      .add(side.scale((sequence01(seed, 8) - 0.5) * driftSpeed * 0.2))
+      .add(new Vector3(0, params.riseHeight * effectScale * lerp(0.16, 0.36, sequence01(seed, 9)), 0));
+    state.spin = lerp(-0.9, 0.9, sequence01(seed, 10));
+    state.width = state.sprite.width;
+    state.height = state.sprite.height;
+    state.lifetime = Math.min(particleMaxLifetime, puffLifetime * lerp(0.82, 1.18, sequence01(seed, 11)));
+    state.alphaScale = lerp(0.72, 1, sequence01(seed, 12));
+    state.age = 0;
+    state.active = true;
+  }
+}
+
+function findAvailableState(states: SmokeSpriteState[]): SmokeSpriteState | null {
+  return states.find(state => !state.active) ?? null;
+}
+
+function readDirection(params: VehicleExhaustSmokeParams): Vector3 {
+  const direction = new Vector3(params.directionX, 0, params.directionZ);
+  if (direction.lengthSquared() <= 0.0001) return new Vector3(-1, 0, 0);
+  return direction.normalize();
+}
+
+function readWorldDirection(root: TransformNode, params: VehicleExhaustSmokeParams): Vector3 {
+  const direction = Vector3.TransformNormal(readDirection(params), root.getWorldMatrix());
+  direction.y = 0;
+  if (direction.lengthSquared() <= 0.0001) return readDirection(params);
+  return direction.normalize();
+}
+
+function readDurationSeconds(params: VehicleExhaustSmokeParams): number | null {
+  return params.lifetimeMode === 'infinite' ? null : Math.max(0.05, params.lifetime);
+}
+
+function makeSideVector(direction: Vector3): Vector3 {
+  const side = new Vector3(-direction.z, 0, direction.x);
+  return side.lengthSquared() > 0.0001 ? side.normalize() : new Vector3(0, 0, 1);
+}
+
+function getDisposeDelaySeconds(params: VehicleExhaustSmokeParams): number {
+  const lifetime = Math.max(0.05, params.lifetime);
+  return lifetime + Math.max(0.08, params.particleMaxLifetime) + 0.45;
+}
+
+function toColor4(color: VfxColorValue, alpha: number): Color4 {
+  return new Color4(clamp01(color.r), clamp01(color.g), clamp01(color.b), clamp01(alpha));
+}
+
+function lerp(min: number, max: number, t: number): number {
+  return min + (max - min) * t;
+}
+
+function clamp01(value: number): number {
+  return Math.min(1, Math.max(0, value));
+}
+
+function fract(value: number): number {
+  return value - Math.floor(value);
+}
+
+function sequence01(index: number, axis: number): number {
+  if (index === 0) return 0.5;
+  const strides = [0.618033988749895, 0.414213562373095, 0.732050807568877, 0.324717957244746, 0.754877666246693, 0.569840290998053];
+  return fract(0.5 + index * strides[axis % strides.length] + axis * 0.173205080756888);
+}

package/packages/effects/vehicle-exhaust-smoke/vfx-params.json

@@ -0,0 +1,23 @@
+{
+  "__generation.offsetX": 0,
+  "__generation.offsetY": 0,
+  "__generation.offsetZ": 0,
+  "lifetimeMode": "infinite",
+  "lifetime": 1,
+  "scale": 2,
+  "initialHeight": 0.3,
+  "color": {
+    "r": 0.8941176470588236,
+    "g": 0.8823529411764706,
+    "b": 0.5254901960784314
+  },
+  "opacity": 0.78,
+  "particleCount": 82,
+  "particleMaxLifetime": 0.3,
+  "emitRange": 0.3,
+  "riseHeight": 0.3,
+  "smokeSize": 0.82,
+  "driftSpeed": 3,
+  "directionX": -1,
+  "directionZ": 0
+}

package/packages/effects/vehicle-upgrade/effect.json

@@ -0,0 +1,6 @@
+{
+  "id": "vehicle-upgrade",
+  "nameZh": "小车升级光效",
+  "source": "runtime-generated",
+  "assets": []
+}