mcpField
T
threejs-procedural-vegetation

threejs-procedural-vegetation

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

关于 threejs-procedural-vegetation

面向 Three.js 的程序化植被开发技能,涵盖树枝生长、叶片、草地、常春藤与风动。它通过参考实现和约束说明几何生成与渲染设计。

主要功能

  1. 01按物种参数生成枝条
  2. 02生成枝条几何与 UV 接缝
  3. 03程序化生成叶片与植被
  4. 04草地与花海系统
  5. 05沿表面生长的常春藤
  6. 06植被根部锚定的风动

适用场景

  1. 01创建分枝受控的树木
  2. 02生成贴合地形的草地
  3. 03通过 GPU 剔除构建大型花海
  4. 04让常春藤沿模型表面生长

安装

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

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

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

包含的文件

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

agents/
openai.yaml
assets/gpu-culled-flower-field/
THIRD_PARTY_LICENSES.md
assets/structured-ash-growth/
THIRD_PARTY_LICENSES.md
assets/stylized-meadow-grass/
grass-blades-up.glb
examples/gpu-computed-grass/
gpu-grass-system.js
examples/gpu-culled-flower-field/
gpu-culled-flower-field.js
examples/gpu-culled-flower-field/source/
gpu-culled-flower-field.ts
examples/procedural-surface-ivy/
ivy-effect.js
examples/procedural-surface-ivy/source/
bvh.ts
flowers.ts
wind.ts
leafTexture.ts
ivy.ts
examples/structured-ash-growth/
tree-system.js
ash-preset.js
examples/stylized-meadow-grass/
grass-system.js
references/
gpu-culled-flower-field.md
structured-ash-growth-system.md

详细介绍

程序化植被

将植物表示为生长层级结构及其渲染适配方式。不要将其建模为随机散布的圆柱体。

此技能包含示例性示例和资源,不止是描述性指导;值得仔细研究、参考,甚至直接复制。请在相关时充分利用它们,切勿不加思考地跳过。

构建顺序

  1. 定义逐层级的物种表:长度、半径、渐缩、子枝数量、萌生范围、角度、扭转、曲折度、分段数、径向段数。
  2. 从队列中迭代生长枝条,以便检查递归深度和预算。
  3. 将每根枝条生成为带有明确 UV 接缝的定向环。
  4. 根据以下因素更新分段方向:
    • 继承的方向;
    • 随机曲率;
    • 趋性或外力;
    • 可选的吸引约束。
  5. 使用分层纵向位置和独立排列的角度位置生成子枝。
  6. 仅在枝条拓扑稳定后生成叶片。
  7. 根据卡片朝向和局部树冠体积共同构建叶片法线。
  8. 明确选择风的作用范围。叶片根部变形、枝条层级变形和整棵树摇摆是不同的系统。

调整参数前,请阅读 references/structured-ash-growth-system.md,并保留其中的预设、延续、子枝放置、叶片、材质、风和构图约定。

请阅读 Ash Growth System 实现 及其作者预设,了解符合约定的实现及其诊断属性。

请阅读 风格化草甸草地实现,了解作者制作的草叶簇几何(带程序化回退方案)、图像驱动的路径遮罩、逐实例原点/朝向属性、圆弧式根部风力变形、阵风锋面、叶尖颤动、成簇着色、宏观变化、半透明效果和边缘光诊断。

请阅读 GPU 计算草地实现,了解 MRT 草叶参数生成、确定性的地形贴合式放置、Voronoi 草簇、Bezier 草叶折弯、随风转向、距离 LOD/剔除、法线/颜色渐隐、半透明效果和草地诊断。

请阅读 references/gpu-culled-flower-field.md,了解虚拟地址、生态、分层压缩、间接绘制、距离分层、图集、风、接触、资源和诊断的精确约定。

请阅读 GPU 剔除花田入口 及其完整的 原始 WebGPU 实现,了解零记录整数候选项重建、32×32 区块剔除、三个可见 ID 流、近/中/远景间接绘制、弯曲的纹理花瓣、保持身份的地平线花头,以及根部随动的接触响应。

请阅读 程序化表面常春藤入口 及其完整的 TypeScript 实现,了解带种子的样条跟随茎部、重复网格重投影、切平面蔓延与下垂、平行运输管环、生长显现、实例化叶片和伞形花序,以及刚性叶柄铰接式风力变形。TypeScript 模块是唯一的实现;入口文件只负责重新导出这些模块。

可视化失效条件

  • 分支形成明显的螺旋;
  • 茂密草丛忽略地形高度或簇级变化;
  • 每个子级都从相同的相对高度长出;
  • 树皮纹理的缩放随分支半径变化;
  • 叶片旋转时暴露出平面卡片的法线;
  • 叶片风动时移动卡片根部,而非保持锚定;
  • 声称分支风动与参考效果一致,但参考中的分支是静止的;
  • 不同种子改变物种身份,而非受控变化;
  • 几何开销增长时没有按级别设置预算;
  • 沿表面生长的茎与宿主表面错位,或在接缝处法线翻转;
  • 附着时,常春藤分支忽略切平面;
  • 叶片风动绕卡片中心旋转,而非绕叶柄旋转。
  • 百万朵花的花田分配 CPU 变换或逐候选记录;
  • 远景花朵 LOD 用一个通用精灵替代物种身份;
  • 压缩和直接渲染重建出的根部位置或筛选结果不同;
  • 花茎弯曲后,花头仍保持朝上。

路由边界

对于不包含生长模型的通用分支环生成,请使用 $threejs-procedural-geometry。此技能负责物种表、藤蔓与分支拓扑、沿表面生长、叶片、草地、根系以及根部锚定风动。

评论

支持 Markdown