SuperAPI AI 工具集

threejs-shaders

设计与创作

查看项目

更新于 10-16 04:58

技能介绍

用途:为 Three.js 场景编写自定义 GPU 程序,或在保留内置材质 PBR 行为的前提下做小范围扩展。PBR 表面选择、纹理/UV 数据、全屏合成效果分别路由到 threejs-materials、threejs-textures、threejs-postprocessing。

主要能力:编写 ShaderMaterial 或 RawShaderMaterial 的顶点/片元程序;通过 uniforms 与 varyings 传递时间、颜色、纹理、变换或逐实例数据;实现位移、菲涅尔、溶解、渐变、噪声、边缘光等自定义效果;用 onBeforeCompile 扩展内置材质而不替换其 PBR 行为;诊断 GLSL 编译、坐标空间、精度或 GPU 开销问题。

使用方式:先选择侵入性最小的路径——全自定义网格用 ShaderMaterial,需完全控制声明与注入用 RawShaderMaterial,保留 Standard/Physical PBR 只加小效果用 onBeforeCompile,全屏屏幕空间处理用 threejs-postprocessing 的 ShaderPass。数据流要显式:uniform 在一次绘制调用中恒定,varying 由顶点着色器写入并在片元着色器中插值;变量与注释中标注坐标空间(local、world、view、clip、uv),多数着色器 bug 源于空间不匹配。更新时只改材质 uniform 的值,如 material.uniforms.uTime.value = elapsedSeconds,不要每帧替换 uniforms 对象,尽量复用 Color、Vector 与纹理对象;逐实例变化用受支持的属性,而非每实例一个材质。

限制与注意事项:onBeforeCompile 依赖内部着色器分块,可能随 Three.js 版本变化,替换范围要小,程序变体依赖应用状态时设置 material.customProgramCacheKey(),并针对锁定版本测试。验证时检查浏览器着色器编译日志,先缩减到最小着色器再调试;用诊断颜色输出验证至少一个已知坐标/法线/UV 用例;若产品需要,在目标移动硬件上测试精度与导数;发布前测量片元 overdraw、纹理采样、循环与材质变体;销毁时释放自定义材质与渲染目标。建议从渲染常量颜色的最小着色器开始逐步加数据流,仅数学需要处归一化,渲染循环中 uniform 更新保持零分配,优先扩展内置材质而非重新实现 PBR 光照,并在目标 GPU 上做性能分析。