Shader Logging Workflow

Questions
1

I feel like I can’t be alone in this. I’m constantly modifying the standard shaders with onBeforeCompile. I frequently have to look at the raw GLSL to see what variables are available where. It’s not uncommon to have to go in to the THREE source, uncomment the console.log

// console.log( '*VERTEX*', vertexGlsl );
	// console.log( '*FRAGMENT*', fragmentGlsl );

and then reload the modules and such. It’s a pain to do this. Am I missing something here? Is there a better workflow?

Seems like something like a shader.debug flag to log this out would be really helpful.

2

I do this,

console.log(mesh.material.vertexShader)
console.log(mesh.material.fragmentShader)

E.g.,

3

I’ve used a very rude method in the past. I introduce a deliberate error in the beginning of the shader, and its raw code gets vomited in the console:

material.onBeforeCompile = shader => {
	shader.vertexShader =
		'fail\n'+ // this causes the shader to fail compilatio n
		shader.vertexShader.replace(
			'#include <project_vertex>',
			`
			vec4 mvPosition = vec4( transformed, 1.0 );
			vec3 limits = vec3(0.6, 0.75, 1.0);
			...and so on...
			`
		);
}

and then I get this in the console (the fail appears in line 63):

image
image716×835 21.2 KB

1 Like
4

@seanwasere This only shows the GLSL template structure, not the actual GLSL code.

5

@PavelBoytchev I’ve definitely thought about this. In my case, it only shows the 10 or so lines around the error location.

6

In Chomium-based browser click on the “Show more” link at the end of the dump (see line 157)

image
image542×361 14.5 KB

In Firefox click on the second gray triangle at the top of the dump:

image
image558×209 6.51 KB

7

Screenshot 2025-02-28 at 3.03.51 PM
Screenshot 2025-02-28 at 3.03.51 PM540×395 33.2 KB

That’s not the case in my situation unfortunately. I’d like to not have to switch browsers here either.

8

Just tried some of the ideas from SO and they worked (my attempt):

Source of ideas:

9

Thanks to @manthrax, I use this three-shaderlib-skim to check the raw definitions.

2 Likes
10

There is actually a shader debug hook that can get you more info.

I use this in an automated shader workflow I made:

let onShaderError = {
    fn: () => {}
}

let triageShader = (gl, shader) => {
    return {
        status: gl.getShaderParameter(shader, gl.COMPILE_STATUS),
        errors: gl.getShaderInfoLog(shader),
        source: gl.getShaderSource(shader)
    }
}
renderer.debug.onShaderError = (gl, program, glVertexShader, glFragmentShader) => {
    let errorInfo = {
        vs: triageShader(gl, glVertexShader),
        fs: triageShader(gl, glFragmentShader),
        gl,
        program,
        glVertexShader,
        glFragmentShader
    }
    onShaderError.fn(errorInfo)
}
2 Likes