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

【问题标题】：Viewing a material's compiled shader code in THREE.js?在 THREE.js 中查看材质的编译着色器代码？
【发布时间】：2018-02-08 16:49:58
【问题描述】：

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

问题：

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

我尝试在第一次渲染后控制台记录材质的属性，但我找不到编译后的 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;
    }
}

【问题讨论】：

标签： javascript three.js glsl webgl

【解决方案1】：

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

【讨论】：

Firefox 的开发工具中有一个着色器代码查看器。我还刚刚遇到了一个名为 spector.js 的 chrome 扩展程序，它看起来相当不错（我刚刚注意到在另一个答案中提到了这个......呜呜呜）
谢谢，@2pha！ FireFox 着色器编辑器非常棒，我什至不必安装任何 3rd 方插件！

【解决方案2】：

（据我所知）无法以编程方式访问上传到 GPU 的最终代码。它存在于 WebGLProgram 类中的唯一位置is here。根据您的用例，您可以执行以下操作之一：

使用非缩小版的three.js 并在WebGLProgram-class 中设置调试器断点（在调试器中单步执行代码也是了解three.js 功能的绝佳方式）。李>
安装http://spector.babylonjs.com/ 或http://benvanik.github.io/WebGL-Inspector/ 以检查执行的着色器代码。

【讨论】：