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

Question

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

问题：

有什么方法可以输出内置material编译后的vertexShader和fragmentShader？我在我的项目中使用 THREE.MeshLambertMaterial，我想阅读编译后的 GLSL 代码以了解它是如何在后台运行的。我知道我可以去图书馆的 \src\renderers\shaders\ShaderLib\meshlambert_frag.glsl 但是它有几十行 #include 并且没有所有额外的 attributes/uniforms THREE.js 自动追加。

我试过 console.log 第一次渲染后 material 的属性，但我找不到编译的 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

（据我所知）不可能以编程方式访问上传到 GPU 的最终代码。它存在于 WebGL 程序中的唯一地方 is here class。根据您的用例，您可以执行以下操作之一：

使用 three.js 的非缩小版本并在 WebGLProgram-class 中设置调试器断点（在调试器中单步执行代码也是一个很好的方法了解 three.js 的作用）。
安装 http://spector.babylonjs.com/ or http://benvanik.github.io/WebGL-Inspector/ 以检查执行的着色器代码。

Answer 2

您不仅可以查看 three.js 着色器源代码，还可以使用 @spite 的 shader editor extension for Chrome.

在浏览器中实时编辑它

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

Viewing a material's compiled shader code in THREE.js?

javascript

glsl

webgl

three.js