关于 threejs-procedural-fields
面向 Three.js 程序化建模的技能,指导先定义对象所需的场,再将其复用于材质通道。它涵盖坐标、尺度、派生场、调试与细节过滤,并区分场模型、材质组装和完整行星的任务范围。
主要功能
- 01定义坐标到材质的场结构
- 02共享场驱动多个材质通道
- 03为命名场添加调试视图
- 04按导数、网格或距离过滤细节
- 05区分场模型与材质组装
适用场景
- 01设计共享地形与材质成因的场模型
- 02调试程序化对象的独立场
- 03过滤网格无法表达的高频细节
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ scottstts/ threejs-awesome-graphics-agent-skills --skill threejs-procedural-fields安装后在 Claude Code 中输入/threejs-procedural-fields确认已加载。
附带文件references/field-stack-recipes.mdagents/openai.yaml
详细介绍
程序化场
不要一开始就叠加噪声。先定义物体在物理或风格上需要哪些场。
场契约
编写着色器代码前,先写出一组场:
coordinates
→ macro form
→ meso structure
→ derived causes
→ material channels
示例:
sphereDirection
→ warpedDirection
→ elevation + ridges + craterDepth
→ slope + cavity + latitude + moisture
→ biome + color + roughness + bump
必需工作流
- 选择在摄像机和物体移动时仍保持稳定的坐标。
- 锁定每个频带的实际或感知尺度。
- 创建命名明确的主要场。不要把整个视觉效果藏在一个表达式里。
- 根据成因派生次级场:从法线计算坡度、从海平面距离计算海岸、从暴露程度计算磨损、从凹陷处计算污垢。
- 在颜色、粗糙度、法线、位移、发光和散射中复用相同的场。
- 为每个命名场添加调试输出。
- 根据导数、细分密度或摄像机距离过滤高频场。
实现前请阅读 references/field-stack-recipes.md。 其中记录了球体、地形、水体和结构化放置的场契约,以及常见的结果不一致缺陷。
阅读 程序化行星表面, 了解一组共享的 CPU/GLSL 场,其中高度、大陆、气候、生物群系、 粗糙度和法线都可以单独检查。
不可妥协的规则
- 每个通道使用独立噪声会产生杂乱的视觉效果。应共享结构。
- 扭曲坐标,而不是扭曲每个结果。
- 沿切向扭曲球面坐标,然后重新归一化。
- 为轮廓、区域、表面破碎效果和微观法线使用不同的频带。
- 不要用网格无法表现的频率来置换几何体。
- 分类蒙版应足够宽,避免产生孤立的“气泡”区域。
- 参数名必须描述感知效果:使用
ridgeWidth、coastBlend、cavityDarkening,而不是noise3Amount。
适用范围
当任务涉及共享场模型时,请使用此技能。若任务涉及通道组装和材质响应,请使用
$threejs-procedural-materials;若交付内容是完整的行星本体,请使用
$threejs-procedural-planets。
评论
支持 Markdown