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:
But my console does not display all the lines, it simply states the error:
I was wondering how I can make Three Js show me all the lines of code when there is an error?
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.
uv redefinition, constant vUv modifing
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:
You are a hero sir!
