mcpField
T
threejs-procedural-vfx

threejs-procedural-vfx

github.com/scottstts创意与媒体946112 次安装6 天前更新
代码仓库

关于 threejs-procedural-vfx

面向 Three.js 开发者的程序化视觉特效技能,指导构建分层且相互协调的效果。内容涵盖有界体积、事件驱动几何、HDR 响应,并提供实现示例与诊断方法。

主要功能

  1. 01事件驱动的特效图
  2. 02体积火焰与极光
  3. 03等离子体、尾迹、火花与碎片
  4. 04全息投影外壳
  5. 05HDR 镜头光晕合成
  6. 06实例池化与视觉诊断

适用场景

  1. 01制作飞船再入大气层效果
  2. 02创建有界火焰与烟雾体积
  3. 03渲染极光帘幕与探针
  4. 04添加全息投影或镜头光晕

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/scottstts/threejs-awesome-graphics-agent-skills --skill threejs-procedural-vfx

安装后在 Claude Code 中输入/threejs-procedural-vfx确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

agents/
openai.yaml
examples/filmic-lens-flare/
filmic-lens-flare.js
examples/holographic-shape-transition/
hologram-material.js
hologram-transition.js
examples/raymarched-aurora-curtains/
aurora-curtains.js
examples/reentry-plasma/
reentry-plasma.js
examples/volumetric-fluid-fire/
volumetric-fluid-fire.js
examples/volumetric-fluid-fire/source/
VolumetricFluidFire.ts
EmitterManager.ts
FluidFireShaderContext.ts
examples/volumetric-fluid-fire/source/pass/
advectDyePass.ts
divergencePass.ts
emitObjectPass.ts
curlNoisePass.ts
vorticityPass.ts
advectVelocityPass.ts
jacobiPass.ts
projectPass.ts
examples/volumetric-fluid-fire/source/sdf/
sdfSampler.ts
CollisionHandler.ts
examples/volumetric-fluid-fire/source/sdf/shape/
SDFBox.ts
SDFShape.ts
SDFEllipsoid.ts
examples/volumetric-fluid-fire/source/util/
createStorage3D.ts
references/
filmic-lens-flare.md
procedural-vfx-system.md
volumetric-aurora-curtains.md
volumetric-fluid-fire.md

详细介绍

程序化 VFX

根据事件包络、运动场、几何表示和着色响应来构建效果。避免使用多个彼此独立、只是颜色相同的粒子发射器。

本技能包含描述性指南之外的优秀示例和素材,值得研究、参考,甚至直接复制。相关时请充分利用,切勿不加判断地跳过。

效果图

subject/event state
  → effect-specific geometry, voxel fields, or instance attributes
  → flow-facing masks or analytic age
  → material response
  → pool/lifetime ownership
  → HDR and bloom contribution

阅读 references/procedural-vfx-system.md,了解贴合飞船的再入外壳、胶囊体尾流、密集实例化的火花/碎屑池、全息投影外壳、HDR 层级以及实现限制。

阅读 references/volumetric-fluid-fire.md,了解三维纹理所有权、固定的流体计算调度、网格表面注入、压力投影、移动 SDF 边界、温度映射 HDR 光线步进、精确预设和故障诊断。

阅读 references/volumetric-aurora-curtains.md,了解有限发光薄片边界、扭曲的幕状密度、均匀光线步长、轻微的起始抖动、匹配的屏幕/探针材质、精确常量、限制和故障诊断。

阅读 references/filmic-lens-flare.md,了解 HDR 发光体提取、光轴不变量、视场角瞳孔变形、有限光斑族、光谱环、局部泛光、胶片响应、精确常量、限制和故障诊断。

阅读 再入等离子体实现,了解闭合分层尾流外壳、流动轴变形、平流丝状场、不透明度塑形和加法发射诊断。

阅读 全息投影材质,了解加法边缘外壳本身:带掠射衰减的平方菲涅耳入射、经过足迹滤波的对象空间扫描线、按高度定相的故障位移,以及由索引门控的参与效果。阅读其形状过渡驱动器,了解形状组共享的扫描范围、较长停留时间内的线性进度渐变,以及互补丢弃式交接。

阅读体积流体火焰实现,了解完整的 WebGPU/TSL 速度、染料、压力、涡量、发射器、碰撞、光线步进和诊断系统,以及经过校准的火焰预设。

阅读光线步进极光实现,了解可复用的发光场、透视光线材质、四采样等距柱状投影辐射材质、共享 uniform,以及经过校准的幕状预设;不包含天空、地形、天气、照明或渲染器设置。

阅读电影感镜头光晕实现,了解从顶部原点检测 HDR 太阳、全景光线重建、稳定的光源投影、有限径向光斑族、视场角变形的瞳孔形状、光谱环和星芒响应、局部泛光,以及完整的电影感合成。

规则

  • 每一层都必须在轮廓、运动、照明或残留效果中发挥作用。
  • 明确规定速度、染料、压力、涡量和碰撞的纹理归属,并为它们设定统一固定的计算计划。
  • 对于低角度极光,使用有限的浅层发光范围、均匀的光线步进、轻微的起始抖动,以及按步长加权的累积。发光范围已经消除了漫长的地平线光路,因此不要再添加消光或仰角门限。
  • 极光发射必须与天空、星星、大气、地形照明、天气和调色保持分离;透视材质与等距柱状材质应呈现相同的辐射亮度。
  • 使用世界尺寸向量将速度转换为体积 UVW;非立方体积的各轴缩放不同,切勿假定它们缩放相同。
  • 确保压力乒乓缓冲的输出端与投影读取端一致。
  • 使用归一化生命周期曲线,避免散布各处的时间常数。
  • 从同一流场或事件方向派生次级运动。
  • 将泛光作为对 HDR 发射的响应,而不是效果唯一的形状来源。
  • 从 HDR 发射体派生镜头鬼影,确保所有合成中心都位于同一光轴上,并根据物体空间视场角而非屏幕半径来变形瞳孔轮廓。
  • 镜头光晕系列必须保持有限;不要将经过校准的末端雾化效果扩展成任意的光珠链,也不要将衍射星芒放在鬼影中心。
  • 对实例和轨迹进行对象池化;不要为每次爆发分配内存。
  • 根据像素覆盖范围过滤每条周期性条带,并将其淡化至条带自身的均值,而不是零。
  • 使用基于逆转置法线矩阵构建的坐标系测量边缘入射角。
  • 多形状过渡必须共用一个归一化范围,并使用互补的剔除方式;切勿为每种形状设置单独范围或产生重叠覆盖。
  • 提供生成、模拟、过度绘制和亮度调试视图。
  • 包含一个无需泛光也清晰可辨的基线效果。

路由边界

当火焰必须与燃烧薄片的力学特性、炭化裂纹和烟灰耦合时,使用 $threejs-procedural-materials 和 simulated-paper-burning。

仅在屏幕空间霜冻/触摸历史管线中使用 $threejs-temporal-surfaces。对于下落的雨或雪、飞溅翻页动画以及改变地面材质的天气事件,使用 $threejs-precipitation-surfaces。对于大气天气层和行星尺度的云体积,使用 $threejs-volumetric-clouds。对于分子/气溶胶天空散射和表面线段的空气透视,使用 $threejs-atmosphere-aerial-perspective。独立的电影级 HDR 镜头光晕合成器、发光极光帘幕体积、边界明确的交互式火焰与烟雾、主体空间等离子体、生成的尾流、火花、池化碎片和加色投影壳体,都归入此技能。如果镜头光晕仍是共享天空散射与空气透视合成中的一个阶段,则将其保留在 $threejs-atmosphere-aerial-perspective 中。

评论

支持 Markdown