mcpField
T
threejs-procedural-fields

threejs-procedural-fields

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

关于 threejs-procedural-fields

面向 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-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

必需工作流

  1. 选择在摄像机和物体移动时仍保持稳定的坐标。
  2. 锁定每个频带的实际或感知尺度。
  3. 创建命名明确的主要场。不要把整个视觉效果藏在一个表达式里。
  4. 根据成因派生次级场:从法线计算坡度、从海平面距离计算海岸、从暴露程度计算磨损、从凹陷处计算污垢。
  5. 在颜色、粗糙度、法线、位移、发光和散射中复用相同的场。
  6. 为每个命名场添加调试输出。
  7. 根据导数、细分密度或摄像机距离过滤高频场。

实现前请阅读 references/field-stack-recipes.md。 其中记录了球体、地形、水体和结构化放置的场契约,以及常见的结果不一致缺陷。

阅读 程序化行星表面, 了解一组共享的 CPU/GLSL 场,其中高度、大陆、气候、生物群系、 粗糙度和法线都可以单独检查。

不可妥协的规则

  • 每个通道使用独立噪声会产生杂乱的视觉效果。应共享结构。
  • 扭曲坐标,而不是扭曲每个结果。
  • 沿切向扭曲球面坐标,然后重新归一化。
  • 为轮廓、区域、表面破碎效果和微观法线使用不同的频带。
  • 不要用网格无法表现的频率来置换几何体。
  • 分类蒙版应足够宽,避免产生孤立的“气泡”区域。
  • 参数名必须描述感知效果:使用 ridgeWidth、coastBlend、cavityDarkening,而不是 noise3Amount。

适用范围

当任务涉及共享场模型时,请使用此技能。若任务涉及通道组装和材质响应,请使用 $threejs-procedural-materials;若交付内容是完整的行星本体,请使用 $threejs-procedural-planets。

评论

支持 Markdown