如何将编译后的WebGL着色器程序附加到Three.js ShaderMaterial？

其实我之前也试过类似的操作，Three.js的ShaderMaterial本身已经封装了WebGL着色器的编译、绑定流程，直接插自己编译好的程序确实容易踩坑——毕竟Three.js会严格管理渲染状态，随便替换程序很可能打乱它的节奏。不过还是有两种可行的思路，给你捋一捋：

思路一：更稳妥的方案——把着色器代码整合进ShaderMaterial #

这是Three.js推荐的常规用法，既能复用你的着色器逻辑，又能兼容Three.js的生态。你不需要自己编译程序，直接把写好的顶点/片元着色器代码丢给ShaderMaterial，然后用Three.js的API或者原生GL方法来设置uniforms和attributes都可以。

举个简单的例子：

// 你的自定义着色器代码
const customVertexShader = `
  attribute vec3 position;
  // 如果你需要Three.js自带的矩阵变换，直接用它预定义的uniforms就行
  uniform mat4 modelViewMatrix;
  uniform mat4 projectionMatrix;
  
  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

const customFragmentShader = `
  uniform vec3 uColor;
  
  void main() {
    gl_FragColor = vec4(uColor, 1.0);
  }
`;

// 创建ShaderMaterial
const material = new THREE.ShaderMaterial({
  vertexShader: customVertexShader,
  fragmentShader: customFragmentShader,
  // 先定义好uniforms，方便Three.js管理
  uniforms: {
    uColor: { value: new THREE.Color(0xff0000) }
  }
});

// 用Three.js的方式修改uniform（推荐）
material.uniforms.uColor.value.set(0x00ff00);

// 如果你非要用原生GL方法设置，也可以在渲染循环里操作
renderer.setAnimationLoop(() => {
  const gl = renderer.getContext();
  // 获取Three.js编译好的程序对象
  const program = material.program;
  gl.useProgram(program);
  
  // 用原生GL设置uniform
  const colorLoc = gl.getUniformLocation(program, 'uColor');
  gl.uniform3f(colorLoc, Math.random(), Math.random(), Math.random());
  
  renderer.render(scene, camera);
});

这种方式的好处是，Three.js会帮你处理好缓冲区绑定、状态切换这些细节，不会出现莫名其妙的渲染异常。

思路二：强行复用自己编译好的WebGL程序（不推荐，但可行） #

如果你坚持要用自己编译好的WebGLProgram，就得手动处理Three.js的状态冲突——因为Three.js在渲染时会频繁切换自己的着色器程序，你得在合适的时机替换成你的程序，用完再恢复回去。

通常可以用onBeforeCompile钩子来介入：

// 假设你已经编译好的WebGL程序
let myCompiledProgram; // 你的WebGLProgram实例

const material = new THREE.ShaderMaterial({
  // 这里随便写个占位的着色器，避免Three.js报错
  vertexShader: 'void main() {}',
  fragmentShader: 'void main() {}'
});

// 在Three.js准备编译着色器时介入
material.onBeforeCompile = (shader) => {
  const gl = renderer.getContext();
  
  // 先保存当前Three.js绑定的程序，用完要恢复
  const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
  
  // 绑定你自己的程序
  gl.useProgram(myCompiledProgram);
  
  // 在这里用原生GL设置attributes和uniforms
  // 比如设置时间uniform
  const timeLoc = gl.getUniformLocation(myCompiledProgram, 'uTime');
  gl.uniform1f(timeLoc, performance.now() / 1000);
  
  // 注意：如果要设置attributes，得确保几何体的缓冲区已经绑定
  // 比如假设你的几何体position属性对应着色器里的aPosition
  const positionLoc = gl.getAttribLocation(myCompiledProgram, 'aPosition');
  gl.enableVertexAttribArray(positionLoc);
  // 这里要对应几何体的缓冲区 stride和offset，Three.js的几何体通常是按3个float存position
  gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 0, 0);
  
  // 一定要恢复Three.js的程序，否则后续渲染会崩
  gl.useProgram(currentProgram);
};

注意事项： #

• 这种方式很容易出问题，比如Three.js的灯光、矩阵变换等功能会失效——因为你的自定义程序没有实现Three.js所需的默认uniforms和attributes。
• 必须严格管理状态的保存和恢复，否则会导致其他材质渲染异常。

总的来说，除非你有特别特殊的需求，否则优先用第一种思路，省心又稳定。

内容的提问来源于stack exchange，提问作者Li Brary