Displaying shader error in console

Questions
1

I am following the Three Js journey course and in the example using ShaderMaterial, when there is an error in the vertexShader program, the console outputs all the lines of code in the console like the following:
image

But my console does not display all the lines, it simply states the error:

image
image1059Ă—278 17.7 KB

I was wondering how I can make Three Js show me all the lines of code when there is an error?

2

I believe older versions of the library printed everything, now it prints just a snippet.

You can modify the library code to print all shaders before they are compiled or in case of an error.

3

uv redefinition, constant vUv modifing

4

For anyone else who finds this thread on Google, here is the solution (as of the latest version 0.152.2).

You can change the logging behavior via WebGLRenderer.debug.onShaderError. The default value of null enables Three.js default logging behavior shown here.

If you want to print the full contents of both the vertex and fragment shader, you can read their source via WebGLRenderingContext.getShaderSource( shader: WebGLShader )

For example, this snippet will print each shader’s contents to the console in a neatly collapsed group.

  renderer.debug.onShaderError = ( gl, program, vertexShader, fragmentShader ) => {
  
  	const vertexShaderSource = gl.getShaderSource( vertexShader );
  	const fragmentShaderSource = gl.getShaderSource( fragmentShader );
    
    console.groupCollapsed( "vertexShader" )
    console.log( vertexShaderSource )
    console.groupEnd()
    
    console.groupCollapsed( "fragmentShader" )
    console.log( fragmentShaderSource )
    console.groupEnd()

  }

Produces:

image
image908Ă—326 34.7 KB

1 Like
5

You are a hero sir!

6

Did anyone ever make the best of both worlds? Is there a public formatter for this? Id like to see what the error is, but not just a snippet of the shader, i need the entire string

7 
material.onBeforeCompile(shader)=>{ console.log(shader)}

?

8

I want it after its been compiled lol

You get the “error at line xxx, duplicate whatever” except, by default you dont see the whole string. If you add the onShaderError it turns off that behavior. It would be cool if onShaderError contained that default formatted message.

9

Oh lol…

You can use a browser extension for chrome or something like…

const vertexShader = renderer.getContext().getShaderSource(renderer.properties.get(material).programs.values().next().value.vertexShader)
  
  console.log(vertexShader)
10

Not sure if we’re on the same page. Where would you call this? If not onShaderError then i dont know where.

11

I’m not sure if they are appropriately exposed but you could try implementing the default error reporting functions from inside that callback… namely getShaderErrors( gl, glVertexShader, 'vertex' ) and renderer.getError()

Edit: it looks like renderer.getProgramInfoLog is the method that gives the errors’ line number

1 Like
12

that’s probably it will give it a shot!