在 THREE.js 中查看材质的已编译着色器代码？

Question

每当我在 THREE.js 中编写自定义着色器并且犯了错误时，控制台都会输出一条带有编译后的 GLSL 代码的漂亮错误消息。它包括我的代码以及 Three.js 自动添加的所有额外行：

问题：

有什么方法可以输出内置材料的编译后vertexShader和内容吗？fragmentShader我THREE.MeshLambertMaterial在我的项目中使用，我想阅读编译后的 GLSL 代码以了解它是如何在幕后运行的。我知道我可以转到库的\src\renderers\shaders\ShaderLib\meshlambert_frag.glsl但它有几十#include行，并且没有 THREE.js 自动附加的所有额外属性/制服。

我尝试在第一次渲染后 console.log 材质的属性，但找不到编译后的 GLSL 代码：

var firstRender = true;

function update(){
    renderer.render(scene, camera);

    if(firstRender === true){
        // Where in myMaterial is the GLSL code stored?
        console.log(myMaterial.program.vertexShader);
        firstRender = false;
    }
}

Answer 1

您不仅可以查看 Three.js 着色器源代码，还可以使用 @spite 的Chrome着色器编辑器扩展在浏览器中实时编辑它。