Whenever I'm writing a custom shader in THREE.js and I make a mistake, the console outputs a nice error message with the piled 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 piled vertexShader and fragmentShader of a built-in material? I'm using THREE.MeshLambertMaterial in my project, and I'd like to read the piled 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 #include 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 piled GLSL code:

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;
    }
}

Whenever I'm writing a custom shader in THREE.js and I make a mistake, the console outputs a nice error message with the piled 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 piled vertexShader and fragmentShader of a built-in material? I'm using THREE.MeshLambertMaterial in my project, and I'd like to read the piled 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 #include 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 piled GLSL code:

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

2 Answers 2

You can not only view the three.js shader source code, you can edit it live in the browser using @spite's shader editor extension for Chrome.

It's (as far as I can tell) not possible to programmatically access the final code that is uploaded to the GPU. The only place where it exists is here in the WebGLProgram class. Depending on your use-case you could do one of these things:

• use a non-minified build of three.js and set a debugger-breakpoint in the WebGLProgram-class (stepping through the code in a debugger is also an excellent way to understand what three.js does).
• install http://spector.babylonjs./ or http://benvanik.github.io/WebGL-Inspector/ to inspect the shader-code that is executed.