mcpField
T
threejs-procedural-materials

threejs-procedural-materials

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

关于 threejs-procedural-materials

面向 Three.js 开发者的材质创作技能,要求 PBR 通道共享一致的结构与成因输入。示例涵盖程序化表面、物理光学以及与模拟耦合的材质。

主要功能

  1. 01一致的 PBR 材质图
  2. 02程序化表面与行星材质
  3. 03玻璃、宝石与衍射光学
  4. 04薄膜肥皂泡干涉
  5. 05布料、沙地与软体耦合系统
  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-materials

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

包含的文件

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

agents/
openai.yaml
assets/deformable-sand/
GPL-3.0.txt
THIRD_PARTY_LICENSES.md
assets/raytraced-diamond/
THIRD_PARTY_LICENSES.md
diamond.glb
assets/simulated-tearable-denim/
THIRD_PARTY_LICENSES.md
GPL-3.0.txt
settled-drape.js
examples/deformable-sand/
deformable-sand.js
examples/deformable-sand/source/
config.ts
examples/deformable-sand/source/input/
strokes.ts
examples/deformable-sand/source/platform/
shader.ts
examples/deformable-sand/source/render/
airborne-shadow.ts
camera.ts
lighting.ts
coconut-shadow.ts
postprocess.ts
renderer.ts
shaders.ts
water-reset.ts
examples/deformable-sand/source/reset/
viewport.ts
effect.ts
wgsl.ts
examples/deformable-sand/source/simulation/
clock.ts
flux.ts
shaders.ts
wave-reset-shader.ts
solver.ts
examples/hybrid-soil-moss-surface/
hybrid-soil-moss-surface.js
model-moss-accumulation.js

详细介绍

程序化材质

根据表面特征及其成因构建材质。颜色、粗糙度、金属度、法线、透射和自发光应描述同一个表面,而不是彼此无关的噪声纹理。

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

材质图顺序

stable coordinates
  → structural fields
  → material identity weights
  → causal modifiers
  → filtered microstructure
  → PBR channels
  → lighting/shadow extensions

阅读 references/procedural-pbr-system.md,了解图集过滤、镜面抗锯齿、行星坐标、基于世界高度的湿润效果、逐实例溶解,以及创作的 PBR 响应组合。

阅读雕刻画廊框架几何体,了解在掠射光环境下,胡桃木、古金和乌木的纹理/粗糙度/金属度/清漆组合。

阅读程序化行星表面,了解程序化行星表面上共享的地质、气候、水体、生物群系、粗糙度和导数法线成因。

阅读熔岩流表面材质,了解通过光线步进实现的程序化高度场,其中法线、岩石/熔岩特征、自发光、辉光、余烬、雾和颗粒都由同一材质成因堆栈关联驱动。

阅读光线追踪钻石材质,了解一种将网格本身作为光学体的宝石:相机光线入射折射、采用 GPU BVH 的首次命中循环(带有界全内反射弹跳)、逐通道 IOR 色散、正确考虑 mip 的环境退出采样,以及实时相机矩阵 uniform。

阅读光谱色散玻璃材质,了解一种在图像空间中求解的透射材质:带反转深度的双面背面数据通道、迭代式内部出射搜索、有界全内反射、基于真实路径长度的 Beer-Lambert 吸收,以及通过 CIE 1931 重新组合的逐波长 Cauchy 折射率。可复用的光学基元——精确的非偏振 Fresnel、Cauchy 系数、光谱权重、可旋转环境探针和缓冲区投影——位于玻璃光学中;references/dielectric-glass-optics.md则说明了双通道约定、缓冲区格式、搜索边界、透射诊断信息。

应根据几何形状,而非质量,在两种透射路径中进行选择。封闭的刻面宝石即使出射刻面背向相机,也必须精确处理,因此应采用 BVH 路径。扫描、组装、开放薄片或多壳体材质则应采用图像空间路径;它能容忍不一致的绕序以及朝向任意一侧的创作法线,但无法看到画面之外的表面。

阅读 references/physical-diffraction-grating.md,了解精确的压印场、CIE/黑体光谱、相位光栅、贝塞尔级次效率、相干性展宽、条带发射体、叠加层、稳定物体坐标系、限制和诊断约定。

阅读物理衍射光栅实现,了解一种印刷基底加叠加 HDR 箔片的响应:星形和条纹遮罩用于选择局部刻槽角度、间距和浮雕高度,而光谱颜色仅由波长决定。其完整光学模型以纯 TSL 图表示,使用 Fn、If 和 Loop,不嵌入原生着色器源码。

阅读 references/thin-film-soap-bubble-system.md,了解空气-薄膜-空气 Airy 方程、具有代表性的 RGB 光谱频段、双膜混合、有界二次反射、毛细力学、相机感知流入、穿孔回缩、限制和诊断信息。 当图像必须由皂膜干涉驱动时,请阅读薄膜肥皂泡系统:它提供与波长相关的水相折射率、膜前后表面的光线传播、邻近气泡反射的解析计算、保体积毛细波模态、浮力与阻力、Taylor-Culick 破裂、可见液滴的后续效果,以及确定性的物理门控。

请阅读软体果冻实现,了解一个会变形的花形透光物体;其四面体 XPBD 状态、平滑光学外壳、视线厚度、BVH 折射、吸收、接收面阴影和有限 RGB 焦散场保持耦合。

请阅读可变形沙地实现,了解采用固定步长的颗粒高度场;其守恒输运、撞击粒子、各向异性矿物颗粒、地平线光照和光学深度阴影共享同一个携带质量的状态。

请阅读模拟布料实现,了解与 GPU XPBD 薄片耦合的精确平纹亚麻材质,其中包括纱线拉伸、剪切锁定、弯曲、刚体接触、自碰撞和捏夹。经过校准的求解器和布料贴图约定见references/simulated-cloth-system.md。

请阅读模拟可撕裂牛仔布实现,了解 3/1 斜纹、隐式多重网格 PCG 力学、磨损驱动的纱线断裂、连通抓握区域、脱落碎片、松散纱线和磨损纤维。有关其材质、求解器、拓扑、滤波和集成约定,请阅读 references/simulated-tearable-denim.md。需要材质损耗和纱线断裂时,请选择此示例;需要无撕裂的平纹 XPBD 亚麻布时,请选择 simulated-cloth。

请阅读模拟毛发实现,了解经过梳理的 GPU 毛发束、锥形带状着色,以及通过胶囊体接触梳理毛发场的关节式手部。毛发束、梳理和交互约定见references/simulated-fur-system.md。

请阅读 references/softbody-jelly.md,了解软体坐标约定、neo-Hookean XPBD 拆分、阻尼和休眠规则、折射接收面预算、材质常数、限制及诊断信息。

请阅读模拟纸张燃烧实现,了解皱褶纸张力学、材质晶格燃烧、炭化断裂、体积火焰与烟雾,以及烟尘驱动的接收面照明。有关其耦合网格、固定步长顺序、光学积分和燃尽流程,请阅读 references/simulated-paper-burning.md。

请阅读发光水母实现,了解水母钟部解剖结构、游动、Verlet 附肢、生物发光组织,以及按深度排序的水下输运。有关解剖结构、附着纹理、光学层和集成约定,请阅读 references/luminescent-jellyfish.md。

请阅读发光蝴蝶实现,了解一致的翅膀遮罩、鳞片闪光、关节运动、停栖间隙、有限翅膀照明和透镜成像。有关其翅膀、发光、透镜、集成和扫掠几何约定,请阅读 references/luminescent-butterfly.md。

必要控制项

  • 真实或感知纹理尺度;
  • 材质身份权重;
  • 粗糙度范围和微法线强度;
  • 所选材质模式所需的因果场;
  • 对于透射体,定义它的物理常数——折射率与阿贝数配对值、内部路径预算、消光深度——应明确命名,而非隐藏在表达式中;
  • 对于皂膜,外部介质和薄膜的折射率、纳米级厚度范围、波长频段、表面张力和膜层顺序;
  • 距离/导数滤波;
  • 高光抗锯齿;
  • 通道和遮罩调试模式。
  • 当材质包含辉光或体积累积效果时,提供自发光材质调试模式。

请阅读 references/hybrid-soil-moss-surface.md 和 混合土壤与苔藓实现,了解如何将基于纹理的土壤与苔藓反照率、AO、粗糙度和法线微细节,与程序化土丘位移、湿度、苔藓覆盖/高度及扭曲的细胞裂缝相结合。不要将其表面特征描述为完全由程序合成。当苔藓还必须附着在模型上时,请阅读 模型苔藓实现,了解模型锁定的覆盖、朝上表面的累积、位移厚度,以及共享的苔藓 PBR 特征。

失败条件

  • 每个 PBR 通道都采样独立噪声;
  • 粗糙度只是事后添加的标量;
  • 高频法线在低于一个像素时仍然保留;
  • 三平面投影存在可见的方向或尺度接缝;
  • MIP 映射时忽略图集留白;
  • 自定义光照在没有明确风格化目标的情况下破坏能量守恒;
  • 使用后期处理来掩盖不稳定的高光。
  • 衍射色调是根据 UV 绘制的,而不是根据波长推导得出;
  • 沟槽坐标系跟随相机或世界轴,而不是物体;
  • 收窄的衍射波瓣因其密度缺少 sigma 归一化而损失能量。
  • 将肥皂泡当作实心玻璃球处理,或直接绘制彩虹,而不是采用空气-薄膜-空气干涉;
  • 变形的肥皂膜仍保留未变形球体的法线;
  • 变形的透射体使用不同状态来更新其渲染外壳、光学 BVH 和接收场;
  • 有限尺寸的焦散接收器让非零数据到达其钳制纹理边缘;
  • 软体求解器使用可变积分步长,或使用未耦合的静止应力分离,导致阻尼后能量注入;
  • 颗粒位移、空中颗粒、沉积床着色和阴影场根据不同的模拟时钟推进;
  • 沙粒闪烁使用未经滤波的高频查找,在掠射运动时产生混叠;

路由边界

对于独立的体素火焰和烟雾,使用 $threejs-procedural-vfx;当片状燃烧、炭化失效和流体发射必须保持耦合时,请在此处选择 simulated-paper-burning。对于空气侧的发光河流,使用 $threejs-water-optics;luminescent-jellyfish 负责水下动物组织及其周围的传输。

当主要问题是设计共享的标量/向量因果场时,使用 $threejs-procedural-fields。对于从轨道运行到近距离接近的完整天体,而不只是其材质,使用 $threejs-procedural-planets。当高度场必须负责光线步进求交、轮廓覆盖或感知浮雕的阴影时,使用 $threejs-parallax-occlusion-mapping。对于与视图对齐的湿玻璃光学效果和屏幕空间历史,使用 $threejs-temporal-surfaces;此技能负责透射体本身内部的光学路径。

评论

支持 Markdown