mcpField
T
threejs-water-optics

threejs-water-optics

github.com/scottstts创意与媒体951103 次安装1 周前更新
代码仓库

关于 threejs-water-optics

面向 Three.js 水体视觉开发的技能,提供解析波面、有限水体模拟与水下光学实现参考。涵盖水池、浅水和河流场景,并明确与海洋及降雨表面技能的边界。

主要功能

  1. 01解析波形位移与法线
  2. 02有限水域高度场模拟
  3. 03水池体积光学与光线追踪
  4. 04浅水焦散与折射实现
  5. 05河流发光与泡沫模拟

适用场景

  1. 01构建具有一致波峰和法线的水面
  2. 02制作受物体扰动的交互水池
  3. 03渲染浅水底床折射与焦散

安装

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

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

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

包含的文件

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

agents/
openai.yaml
assets/photoreal-water/
THIRD_PARTY_LICENSES.md
pebbles.js
examples/interactive-pool-volume/
water-volume-system.js
examples/luminescent-water/
luminescent-water.js
examples/photoreal-water/
photoreal-water.js
references/
photoreal-water.md
luminescent-water.md
water-surface-system.md

详细介绍

水体光学

将水视为由几何运动、表面朝向和参与光学作用的介质层构成的系统。蓝色透明材质并不等于水体系统。

此技能包含示范性示例和资源,不只有描述性指导; 值得研读、参考,甚至直接复用。相关时请充分利用, 切勿盲目跳过。

对于具有频谱级联的大型海面、近岸碎浪或摄像机跨介质场景, 请使用 $threejs-spectral-ocean。此技能还负责空气侧的 photoreal-water 浅水合成器。

解析表面的构建顺序

  1. 定义波段并计算位移。
  2. 根据相同的波形解析推导法线。
  3. 选择位移几何,或明确采用仅法线水面。
  4. 确定启发式折射的场景颜色归属。
  5. 声明吸收使用真实深度,还是回退路径长度估算。
  6. 通过考虑介质侧的菲涅耳效应混合解析反射与折射。
  7. 根据共享的波形响应推导泡沫和闪光。
  8. 根据导数过滤无法解析的法线波段。

请阅读 references/water-surface-system.md, 了解编写的位移/法线约定、光学层级、考虑介质侧的折射、 吸收回退方案和诊断通道。

请阅读 交互式水池体积实现, 了解有界 RGBA 高度/速度/法线模拟、局部水滴、适用于可拖动物体的移动球体位移、微分面积焦散,以及在着色器内针对水池边界和球体进行的水池/水体/球体光线追踪。

请阅读 写实水体实现, 了解重力-毛细 FFT 波、触摸涟漪、RGB 焦散、折射鹅卵石河床辐射和孔径衍射眩光。另请阅读 references/photoreal-water.md,了解其渲染通道、 坐标、滤波、集成和诊断约定。

请阅读 发光水体实现, 了解交错浅水流动、平流发光激发和泡沫、RGB 焦散、湿润地形接收面以及耦合河流光学。另请阅读 references/luminescent-water.md,了解其网格、 纹理、渲染通道顺序、集成、摄像机间隙和诊断约定。

失效条件

  • 法线纹理的运动与位移波峰不一致;
  • 启发式折射可能采样到前景物体,但未披露这一限制;
  • 将回退路径长度说成重建得到的场景厚度;
  • 有界水池焦散只是与模拟高度法线脱离的装饰性投影;
  • 微小波浪混叠成闪烁噪点;
  • 泡沫是与共享波峰指标无关的滚动纹理;
  • 用固定不变的透明度取代菲涅耳效应;
  • 未控制能量便将反射、折射和透明效果全部叠加。

路由边界

对于水下动物组织和附肢的光学效果,请使用 $threejs-procedural-materials 和 luminescent-jellyfish;此处的 luminescent-water 负责河流流动。

对于大型频谱级联、雅可比破碎、持久海洋泡沫和摄像机跨介质场景,请使用 $threejs-spectral-ocean。photoreal-water 示例使用 FFT 区块呈现从空气中观察到的浅水光学效果; 它不实现水下观察。解析屏幕折射方案也假设摄像机位于有界水体上方的空气一侧。对于地表受雨水影响的积水湿润效果、涟漪遮罩 以及与天气联动的地面飞溅,请使用 $threejs-precipitation-surfaces。此技能负责编写的解析波浪、有界高度场模拟、光线追踪水池体积光学以及有界水体光学。

评论

支持 Markdown