@fps-games/vfx 0.3.5 → 0.3.6

package/CHANGELOG.md

@@ -12,6 +12,16 @@
 
 <!-- release.mjs 在此行下方插入新版本区块 -->
 
+## v0.3.6 — 2026-07-01
+
+### 改动
+- perf(energy-shield): 去掉 per-instance GlowLayer,改用 shader halo shell,并默认关闭外层壳。
+- perf(treasure-attention): 默认不创建 per-instance GlowLayer,保留 `showGlowLayer` 调试开关用于后续 AB。
+- feat(energy-shield/treasure-attention): 补充 boolean 调试开关,方便在 demo/debug panel 中临时切换。
+
+### 特效
+- 无新增 / 删除(仍 37 个)。
+
 ## v0.3.5 — 2026-07-01
 
 ### 改动

package/dist/effects/energy-shield/index.d.ts

@@ -1,4 +1,3 @@
-import { GlowLayer } from '@babylonjs/core/Layers/glowLayer';
 import { ShaderMaterial } from '@babylonjs/core/Materials/shaderMaterial';
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
 import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
@@ -24,7 +23,8 @@ export interface EnergyShieldParams extends VfxParamValues {
     flowIntensity: number;
     marbleContrast: number;
     bloomIntensity: number;
-    bloomKernelSize: number;
+    haloScale: number;
+    showHalo: boolean;
     segments: number;
 }
 export interface CreateEnergyShieldOptions {
@@ -38,7 +38,6 @@ export interface CreateEnergyShieldOptions {
 export interface EnergyShieldHandle extends VfxEffectHandle {
     shield: Mesh;
     material: ShaderMaterial;
-    glowLayer: GlowLayer | null;
     update(params: Partial<EnergyShieldParams>): void;
 }
 export declare const energyShieldEffectPackage: VfxEffectPackage<EnergyShieldParams>;

package/dist/effects/energy-shield/index.js

@@ -1,5 +1,4 @@
 import { Constants } from "@babylonjs/core/Engines/constants";
-import { GlowLayer } from "@babylonjs/core/Layers/glowLayer";
 import { Effect } from "@babylonjs/core/Materials/effect";
 import { ShaderMaterial } from "@babylonjs/core/Materials/shaderMaterial";
 import { Color3 } from "@babylonjs/core/Maths/math.color";
@@ -26,7 +25,8 @@ const DEFAULT_PARAMS = {
   flowIntensity: 1.15,
   marbleContrast: 0.67,
   bloomIntensity: 0.45,
-  bloomKernelSize: 36,
+  haloScale: 1.012,
+  showHalo: false,
   segments: 64
 };
 const VERTEX_SHADER = `
@@ -69,6 +69,8 @@ uniform float uFlowScale;
 uniform float uFlowSpeed;
 uniform float uFlowIntensity;
 uniform float uMarbleContrast;
+uniform float uHaloAlphaScale;
+uniform float uHaloMode;
 
 varying vec3 vObjPos;
 varying vec3 vWorldPos;
@@ -173,6 +175,16 @@ void main(void) {
   alpha += fresnel * uOpacity * 0.58;
   alpha += noiseEdge * uNoiseEdgeIntensity * 0.05;
 
+  if (uHaloMode > 0.5) {
+    float haloRim = pow(saturate(1.0 - ndv), max(0.35, uFresnelPower * 0.55));
+    float softRim = smoothstep(0.08, 0.86, haloRim);
+    float edgeTaper = 1.0 - smoothstep(0.78, 1.0, haloRim) * 0.62;
+    color = uColor * (0.82 + softRim * 0.32) * (0.9 + cloud * 0.1);
+    alpha = (0.06 + softRim * 0.62 + noiseEdge * 0.12) * edgeTaper;
+  }
+
+  alpha *= uHaloAlphaScale;
+
   gl_FragColor = vec4(color, saturate(alpha));
 }
 `;
@@ -205,7 +217,8 @@ const energyShieldEffectPackage = {
     { key: "flowIntensity", label: "流动强度", kind: "number", min: 0, max: 8, step: 0.01 },
     { key: "marbleContrast", label: "纹路锐度", kind: "number", min: 0.25, max: 4, step: 0.01 },
     { key: "bloomIntensity", label: "Bloom 强度", kind: "number", min: 0, max: 4, step: 0.01 },
-    { key: "bloomKernelSize", label: "Bloom 半径", kind: "number", min: 8, max: 128, step: 1 }
+    { key: "haloScale", label: "外层光晕缩放", kind: "scale", min: 1, max: 1.08, step: 1e-3 },
+    { key: "showHalo", label: "显示外层光晕", kind: "boolean" }
   ],
   create({ scene, root, position, renderingGroupId, params }) {
     return createEnergyShield(scene, { root, position, renderingGroupId, params });
@@ -239,28 +252,56 @@ function createEnergyShield(scene, options = {}) {
   shield.alphaIndex = 20;
   const material = createShieldMaterial(scene);
   shield.material = material;
-  let glowLayer = null;
-  if (params.bloomIntensity > 0) {
-    glowLayer = new GlowLayer(`vfx_energyShield_glow_${shield.uniqueId}`, scene, {
-      blurKernelSize: params.bloomKernelSize,
-      mainTextureRatio: 0.35
+  let halo = null;
+  let haloMaterial = null;
+  const disposeHalo = () => {
+    halo?.dispose(false, false);
+    haloMaterial?.dispose();
+    halo = null;
+    haloMaterial = null;
+  };
+  const ensureHalo = () => {
+    if (!params.showHalo || params.bloomIntensity <= 1e-3) {
+      disposeHalo();
+      return;
+    }
+    if (halo && haloMaterial) return;
+    halo = MeshBuilder.CreateSphere(
+      "vfx_energyShield_halo",
+      {
+        diameter: 2,
+        segments: Math.max(16, Math.round(params.segments)),
+        slice: 0.5,
+        updatable: false
+      },
+      scene
+    );
+    halo.parent = shield;
+    halo.isPickable = false;
+    halo.alwaysSelectAsActiveMesh = true;
+    halo.renderingGroupId = shield.renderingGroupId;
+    halo.alphaIndex = shield.alphaIndex + 1;
+    halo.scaling.setAll(Math.max(1, params.haloScale));
+    haloMaterial = createShieldMaterial(scene, {
+      name: "vfx_energyShield_halo_material",
+      alphaMode: Constants.ALPHA_ADD
     });
-    glowLayer.intensity = params.bloomIntensity;
-    glowLayer.addIncludedOnlyMesh(shield);
-    glowLayer.referenceMeshToUseItsOwnMaterial(shield);
-  }
-  applyParams(material, shield, glowLayer, params);
+    halo.material = haloMaterial;
+  };
+  ensureHalo();
+  applyParams(material, shield, halo, haloMaterial, params);
   let elapsed = 0;
   const observer = scene.onBeforeRenderObservable.add(() => {
     elapsed += Math.min(scene.getEngine().getDeltaTime() / 1e3, 0.05);
     material.setFloat("uTime", elapsed);
+    haloMaterial?.setFloat("uTime", elapsed);
   });
   let disposed = false;
   const dispose = () => {
     if (disposed) return;
     disposed = true;
     scene.onBeforeRenderObservable.remove(observer);
-    glowLayer?.dispose();
+    disposeHalo();
     shield.dispose(false, false);
     material.dispose();
     if (disposeRoot) root.dispose();
@@ -269,28 +310,17 @@ function createEnergyShield(scene, options = {}) {
     root,
     shield,
     material,
-    glowLayer,
     update(partial) {
       params = mergeParams(partial, params);
-      applyParams(material, shield, glowLayer, params);
-      if (!glowLayer && params.bloomIntensity > 0) {
-        glowLayer = new GlowLayer(`vfx_energyShield_glow_${shield.uniqueId}`, scene, {
-          blurKernelSize: params.bloomKernelSize,
-          mainTextureRatio: 0.35
-        });
-        glowLayer.addIncludedOnlyMesh(shield);
-        glowLayer.referenceMeshToUseItsOwnMaterial(shield);
-        glowLayer.intensity = params.bloomIntensity;
-        applyParams(material, shield, glowLayer, params);
-        this.glowLayer = glowLayer;
-      }
+      ensureHalo();
+      applyParams(material, shield, halo, haloMaterial, params);
     },
     dispose
   };
 }
-function createShieldMaterial(scene) {
+function createShieldMaterial(scene, options = {}) {
   const material = new ShaderMaterial(
-    "vfx_energyShield_material",
+    options.name ?? "vfx_energyShield_material",
     scene,
     { vertex: SHADER_NAME, fragment: SHADER_NAME },
     {
@@ -313,21 +343,36 @@ function createShieldMaterial(scene) {
         "uFlowScale",
         "uFlowSpeed",
         "uFlowIntensity",
-        "uMarbleContrast"
+        "uMarbleContrast",
+        "uHaloAlphaScale",
+        "uHaloMode"
       ],
       needAlphaBlending: true
     }
   );
-  material.alphaMode = Constants.ALPHA_COMBINE;
+  material.alphaMode = options.alphaMode ?? Constants.ALPHA_COMBINE;
   material.backFaceCulling = false;
   material.disableDepthWrite = true;
   material.fogEnabled = false;
   return material;
 }
-function applyParams(material, shield, glowLayer, params) {
+function applyParams(material, shield, halo, haloMaterial, params) {
   shield.scaling.set(params.radius, params.radius * params.verticalScale, params.radius);
+  applyMaterialParams(material, params, params.opacity, 1, 0);
+  if (halo && haloMaterial) {
+    halo.scaling.setAll(Math.max(1, params.haloScale));
+    applyMaterialParams(
+      haloMaterial,
+      params,
+      1,
+      params.opacity * 0.95 * Math.min(2.2, params.bloomIntensity),
+      1
+    );
+  }
+}
+function applyMaterialParams(material, params, opacity, haloAlphaScale, haloMode) {
   material.setColor3("uColor", toColor3(params.color));
-  material.setFloat("uOpacity", params.opacity);
+  material.setFloat("uOpacity", opacity);
   material.setFloat("uFresnelPower", params.fresnelPower);
   material.setFloat("uFresnelStrength", params.fresnelStrength);
   material.setFloat("uRimIntensity", params.rimIntensity);
@@ -340,10 +385,8 @@ function applyParams(material, shield, glowLayer, params) {
   material.setFloat("uFlowSpeed", params.flowSpeed);
   material.setFloat("uFlowIntensity", params.flowIntensity);
   material.setFloat("uMarbleContrast", params.marbleContrast);
-  if (glowLayer) {
-    glowLayer.intensity = params.bloomIntensity;
-    glowLayer.blurKernelSize = params.bloomKernelSize;
-  }
+  material.setFloat("uHaloAlphaScale", haloAlphaScale);
+  material.setFloat("uHaloMode", haloMode);
 }
 function mergeParams(patch, base = DEFAULT_PARAMS) {
   return {

package/dist/effects/treasure-attention/index.d.ts

@@ -29,6 +29,7 @@ export interface TreasureAttentionParams extends VfxParamValues {
     drift: number;
     bloomIntensity: number;
     bloomKernelSize: number;
+    showGlowLayer: boolean;
 }
 export interface CreateTreasureAttentionOptions {
     root?: TransformNode;

package/dist/effects/treasure-attention/index.js

@@ -35,7 +35,8 @@ const DEFAULT_PARAMS = {
   riseSpeed: 0.72,
   drift: 0.12,
   bloomIntensity: 0.55,
-  bloomKernelSize: 32
+  bloomKernelSize: 32,
+  showGlowLayer: false
 };
 const treasureAttentionEffectPackage = {
   id: "treasure-attention",
@@ -72,7 +73,8 @@ const treasureAttentionEffectPackage = {
     { key: "riseSpeed", label: "上浮速度", kind: "number", min: 0, max: 2.5, step: 0.01 },
     { key: "drift", label: "横向漂移", kind: "number", min: 0, max: 1.2, step: 0.01 },
     { key: "bloomIntensity", label: "Bloom 强度", kind: "number", min: 0, max: 2.5, step: 0.01 },
-    { key: "bloomKernelSize", label: "Bloom 半径", kind: "number", min: 8, max: 96, step: 1 }
+    { key: "bloomKernelSize", label: "Bloom 半径", kind: "number", min: 8, max: 96, step: 1 },
+    { key: "showGlowLayer", label: "显示 GlowLayer", kind: "boolean" }
   ],
   create({ scene, root, position, renderingGroupId, params }) {
     return createTreasureAttentionFx(scene, { root, position, renderingGroupId, params, serviceOwnedRoot: true });
@@ -264,7 +266,7 @@ function createTreasureAttentionFx(scene, options = {}) {
     }
   }
   function syncGlowLayer() {
-    const shouldGlow = params.bloomIntensity > 0;
+    const shouldGlow = params.showGlowLayer && params.bloomIntensity > 0;
     if (!shouldGlow) {
       if (glowLayer) {
         for (const mesh of meshes) removeGlowMesh(mesh);

package/package.json

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

package/packages/effects/energy-shield/vfx-params.json

@@ -23,7 +23,8 @@
     "flowIntensity": 1.15,
     "marbleContrast": 0.67,
     "bloomIntensity": 0.45,
-    "bloomKernelSize": 36,
+    "haloScale": 1.012,
+    "showHalo": false,
     "segments": 64
   }
 }

package/packages/effects/treasure-attention/vfx-params.json

@@ -44,6 +44,7 @@
     "riseSpeed": 0.72,
     "drift": 0.12,
     "bloomIntensity": 0.55,
-    "bloomKernelSize": 32
+    "bloomKernelSize": 32,
+    "showGlowLayer": false
   }
 }