关于 threejs-procedural-materials
面向 Three.js 开发者的材质创作技能,要求 PBR 通道共享一致的结构与成因输入。示例涵盖程序化表面、物理光学以及与模拟耦合的材质。
主要功能
- 01一致的 PBR 材质图
- 02程序化表面与行星材质
- 03玻璃、宝石与衍射光学
- 04薄膜肥皂泡干涉
- 05布料、沙地与软体耦合系统
- 06材质过滤与调试控制
适用场景
- 01创作具有地质特征的行星表面
- 02制作透射玻璃或宝石材质
- 03渲染薄膜肥皂泡
- 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.yamlassets/deformable-sand/GPL-3.0.txtTHIRD_PARTY_LICENSES.mdassets/raytraced-diamond/THIRD_PARTY_LICENSES.mddiamond.glbassets/simulated-tearable-denim/THIRD_PARTY_LICENSES.mdGPL-3.0.txtsettled-drape.jsexamples/deformable-sand/deformable-sand.jsexamples/deformable-sand/source/config.tsexamples/deformable-sand/source/input/strokes.tsexamples/deformable-sand/source/platform/shader.tsexamples/deformable-sand/source/render/airborne-shadow.tscamera.tslighting.tscoconut-shadow.tspostprocess.tsrenderer.tsshaders.tswater-reset.tsexamples/deformable-sand/source/reset/viewport.tseffect.tswgsl.tsexamples/deformable-sand/source/simulation/clock.tsflux.tsshaders.tswave-reset-shader.tssolver.tsexamples/hybrid-soil-moss-surface/hybrid-soil-moss-surface.jsmodel-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;此技能负责透射体本身内部的光学路径。