CODEWITHSUNDEEP
javascriptthree.jsglslwebgl
M -
M -

Reputation: 28497

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

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:

enter image description here

Question:

Is there any way to output the compiled vertexShader and fragmentShader of a built-in material? I'm using THREE.MeshLambertMaterial 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 #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 compiled 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;
    }
}

Upvotes: 5

Views: 3457

Answers (2)

WestLangley
WestLangley

Reputation: 104833

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.

Upvotes: 5

Martin Schuhfuß
Martin Schuhfuß

Reputation: 6986

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:

Upvotes: 2

Related Questions