Three.js自定义MeshStandardMaterial：如何查看片元着色器传入代码？

当然可以查看最终传入片元着色器的GLSL代码，这里有几个实用的方法，完美适配你自定义MeshStandardMaterial的场景：

方法1：使用onBeforeCompile钩子（最推荐） #

这是Three.js自定义着色器时最常用的调试方式，它会在着色器代码被Three.js处理完（比如插入你添加的Use NormalMap2关键字对应的逻辑）、但还没交给GPU编译前触发，能直接拿到最终要执行的源码。

示例代码：

const customStandardMaterial = new THREE.MeshStandardMaterial({
  // 你的材质基础参数，比如color、roughness等
});

// 挂载编译前的回调
customStandardMaterial.onBeforeCompile = (shader) => {
  // 打印片元着色器完整代码到控制台
  console.log("最终片元着色器代码：\n", shader.fragmentShader);
  
  // 这里也可以打印顶点着色器代码做参考
  // console.log("顶点着色器代码：\n", shader.vertexShader);

  // 接下来你就可以在这里修改shader.fragmentShader，实现两张法线贴图的混合逻辑
  // 比如查找法线贴图相关的代码块，插入你的混合计算逻辑
};

把这段代码加到你的材质定义里，打开浏览器控制台就能看到完整的GLSL代码——这正是Three.js准备传给WebGL的最终版本，包含了所有自动插入的关键字逻辑。

方法2：从已编译的WebGLProgram中获取 #

如果你的材质已经被渲染过，可以直接从材质关联的WebGLProgram对象中提取编译后的着色器源码：

// 确保你的网格已经被渲染至少一次
renderer.render(scene, camera);

// 获取材质对应的程序
const program = yourMesh.material.program;
if (program) {
  console.log("编译后的片元着色器：\n", program.shaderSources.fragment);
}

这种方法适合你想确认GPU实际运行的代码，但注意只有当材质完成第一次渲染后，program属性才会被初始化。

方法3：查看Three.js的着色器模板源码（辅助参考） #

如果你想了解基础的MeshStandardMaterial着色器结构，可以直接查看Three.js源码中的模板文件：src/renderers/shaders/ShaderLib/meshstandard.glsl.js。不过这个是原始模板，不包含你自定义关键字插入后的逻辑，所以更适合作为修改时的参考。

内容的提问来源于stack exchange，提问作者Kostyuk Rostyslav