本技能面向 Three.js 中的自定义着色器开发，核心内容包括 GLSL 着色器编写、ShaderMaterial 与 RawShaderMaterial 的用法、uniforms 数据传递以及自定义视觉效果实现。
【用途】 用于在 Three.js 场景中创建自定义视觉特效、修改顶点位置、编写片段着色器，以及扩展或修改内置材质。
【主要能力】
- 材质类型：ShaderMaterial（Three.js 自动注入内置 uniform 与 attribute）与 RawShaderMaterial（完全自定义，需自行声明精度、attribute 与 uniform）。
- Uniforms：支持数字、向量、颜色、矩阵、纹理、立方体贴图与数组类型，并给出对应的 GLSL 声明方式与更新方法（直接赋值、set、copy 等）。
- Varyings：顶点着色器向片段着色器传递 UV、法线、位置等插值数据。
- 常见效果：纹理采样、顶点位移（波形）、Fresnel 效果、噪声（random 与 value noise）、线性/径向/平滑渐变、轮廓光（rim lighting）、消融效果（discard 与边缘发光）。
- 扩展内置材质：通过 onBeforeCompile 注入自定义 uniform 与代码，替换如 begin_vertex、project_vertex、color_fragment、output_fragment、fog_fragment 等着色器分块。
- GLSL 内置函数：数学、向量、纹理函数（GLSL 1.0 的 texture2D/textureCube，GLSL 3.0 的 texture 与 out 变量）。
- 材质属性：透明、不透明度、面朝向、深度测试/写入、混合模式、线框、扩展（derivatives、fragDepth、drawBuffers、shaderTextureLOD）与 glslVersion（THREE.GLSL3）。
- ShaderChunk 复用与外部着色器文件导入（vite/webpack）。
- 实例化着色器：使用 InstancedBufferAttribute 与 offset 属性。
- 调试：打印编译后的着色器源码、可视化 UV/法线/位置、renderer.debug.checkShaderErrors。
【使用方式】 通过 import * as THREE from "three" 引入，创建 THREE.ShaderMaterial 并传入 uniforms、vertexShader、fragmentShader；在动画循环中更新 material.uniforms.time.value 等 uniform。若需扩展内置材质，设置 material.onBeforeCompile 并保存 shader 引用以便后续更新。
【适用场景】 自定义视觉特效、顶点动画、材质定制、后处理相关的全屏着色器效果（另见 threejs-postprocessing）、纹理采样（另见 threejs-textures）等。
【限制】 wireframeLinewidth 大于 1 在多数平台无效果（WebGL 限制）；性能建议减少 uniform 数量、避免条件分支（用 mix/step 替代 if/else）、尽量预计算、用纹理查表、避免过度绘制。文档中未提供收费、价格与平台支持范围等信息。