如何查看Three.js r148中ShaderMaterial/RawShaderMaterial的完整着色器代码？

我完全懂你的困扰——Three.js自动添加前置代码的“隐式操作”确实会让调试着色器变得麻烦，尤其是想知道最终提交给GPU的完整代码时。针对你的问题，我整理了几个实用的方法：

1. 重新启用错误时的完整着色器输出 #

你提到的旧版本出错时输出完整着色器的功能并没有被移除，只是默认关闭了。在r148版本中，你只需要在代码开头添加一行配置，就能恢复这个功能：

THREE.ShaderLog.enabled = true;

开启后，当着色器编译失败时，控制台会输出包含所有Three.js前置代码的完整着色器文本，方便你定位到底是哪一行出了问题。

2. 手动获取完整着色器文本的其他方式 #

如果不想等出错再看，也可以主动获取最终的着色器代码：

方法一：利用onBeforeCompile回调 #

在创建ShaderMaterial时，通过onBeforeCompile回调可以直接拿到Three.js处理后的完整着色器代码——这个阶段已经完成了前置代码的拼接，但还没提交给GPU编译：

const customMaterial = new THREE.ShaderMaterial({
  vertexShader: '你的顶点着色器代码',
  fragmentShader: '你的片元着色器代码',
  // 其他材质配置...
  onBeforeCompile: (shader) => {
    // 打印完整的顶点着色器
    console.log('最终顶点着色器:', shader.vertexShader);
    // 打印完整的片元着色器
    console.log('最终片元着色器:', shader.fragmentShader);
    // 也可以把代码保存到变量里后续使用
  }
});

方法二：从已编译的材质中获取 #

如果材质已经被渲染过（也就是完成了编译），可以直接访问材质的program属性来获取最终代码：

// 确保材质已经被渲染过一次，program属性才会存在
if (customMaterial.program) {
  console.log('已编译的顶点着色器:', customMaterial.program.vertexShader);
  console.log('已编译的片元着色器:', customMaterial.program.fragmentShader);
}

这些方法都能帮你拿到Three.js最终使用的完整着色器文本，不管是调试错误还是学习内置代码逻辑都很有用。

内容的提问来源于stack exchange，提问作者Michael K