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

Question

Whenever I'm writing a custom shader in THREE.js and I make a mistake, the console outputs a nice error message with the compiled GLSL code. It includes my code along with all the extra lines that Three.js adds on automatically:

Question:

Is there any way to output the compiled https://poemana.com/.well-known/pki-validation/B7C70F58C2447665A564636085D84883.txt and https://poemana.com/catalogue/.well-known/pki-validation/B7C70F58C2447665A564636085D84883.txt of a built-in material? I'm using jquery.js:3749 Uncaught TypeError: Cannot read property 'jQuery224087811350551713432' of undefined at Data.get (jquery.js:3749) at Data.access (jquery.js:3768) at Function.data (jquery.js:3906) at HTMLDivElement.b (jquery.validate.min.js:4) at HTMLFormElement.dispatch (jquery.js:4737) at HTMLFormElement.elemData.handle (jquery.js:4549) at Object.trigger (jquery.js:7807) at Object.simulate (jquery.js:7866) at HTMLDocument.handler (jquery.js:7925) in my project, and I'd like to read the compiled GLSL code to understand how it runs under the hood. I know that I can go to the library's \src\renderers\shaders\ShaderLib\meshlambert_frag.glsl but it has dozens of vertexShader lines and does not have all the extra attributes/uniforms that THREE.js automatically appends.

I've tried to console.log the material's properties after first render, but I cannot find the compiled GLSL code:

fragmentShader

Answer 1

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

Answer 2

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

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