Skip to content

Commit

Permalink
WebGLProgram: Only log the lines around the error.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrdoob
mrdoob committed Mar 13, 2022
1 parent a62e353 commit 9d61e46
Showing 1 changed file with 11 additions and 5 deletions.
16 changes: 11 additions & 5 deletions src/renderers/webgl/WebGLProgram.js
View file
Expand Up @@ -5,17 +5,21 @@ import { NoToneMapping, AddOperation, MixOperation, MultiplyOperation, CubeRefra

let programIdCount = 0;

function addLineNumbers( string ) {
function handleSource( string, errorLine ) {

const lines = string.split( '\n' );
const lines2 = [];

for ( let i = 0; i < lines.length; i ++ ) {
const from = Math.max( errorLine - 6, 0 );
const to = Math.min( errorLine + 6, lines.length );

lines[ i ] = ( i + 1 ) + ': ' + lines[ i ];
for ( let i = from; i < to; i ++ ) {

lines2.push( ( i + 1 ) + ': ' + lines[ i ] );

}

return lines.join( '\n' );
return lines2.join( '\n' );

}

Expand All @@ -42,10 +46,12 @@ function getShaderErrors( gl, shader, type ) {

if ( status && errors === '' ) return '';

const errorLine = parseInt( /ERROR: 0:(\d+)/.exec( errors )[ 1 ] );

// --enable-privileged-webgl-extension
// console.log( '**' + type + '**', gl.getExtension( 'WEBGL_debug_shaders' ).getTranslatedShaderSource( shader ) );

return type.toUpperCase() + '\n\n' + errors + '\n\n' + addLineNumbers( gl.getShaderSource( shader ) );
return type.toUpperCase() + '\n\n' + errors + '\n\n' + handleSource( gl.getShaderSource( shader ), errorLine );

}

Expand Down

7 comments on commit 9d61e46

@jee7
Copy link
Contributor

@jee7 jee7 commented on 9d61e46 Apr 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this be made configurable? I often make an error on purpose to see the full shader code (with everything Three.js has automatically prepended). If it's just 6 lines before and after the error point, it won't show all the uniforms, etc on top of the shader.

@Mugen87
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not vote for a configurable solution. Let's stick to the current implementation or revert the change.

@gkjohnson
Copy link
Collaborator

@gkjohnson gkjohnson commented on 9d61e46 Apr 18, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if this is working as intended. I'm getting and error but this is all I'm seeing:

image

cc @mrdoob

@KonscienceGit
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there an alternative to print the final processed shader code, like it was in the old logging?
As currently, shader code at .onBeforeCompile() has not the includes replaced and the glsl headers prepended.

I was using (abusing) this behavior to check what my custom shaders mixed with THREE chunks actually looked like and could import the logged shader code inside an IDE with glsl highlighing as a convenience.

@emmelleppi
Copy link

@emmelleppi emmelleppi commented on 9d61e46 Mar 21, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I fully understand the usefulness of this commit, but isn't it possible to have a way at global or material level to get the full error log?

Like a extendedLogs flag to put in the WebGLRenderer or in the Material classes.

People often add errors on purpose to debug or to have the compiled shader code without having to do strange stuff with onBeforeCompile kind of methods 😅

@Mugen87
Copy link
Collaborator

@Mugen87 Mugen87 commented on 9d61e46 Mar 21, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There should be some improvements with r151. There is a new callback that can be used for custom error reporting: #25679

@jee7
Copy link
Contributor

@jee7 jee7 commented on 9d61e46 Mar 21, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There should be some improvements with r151. There is a new callback that can be used for custom error reporting: #25679

Wonderful! I tried it out, and something like this works quite well:

renderer.debug.onShaderError = function(gl, program, vs, fs) {

    const parseForErrors = function(gl, shader, name) {
        const errors = gl.getShaderInfoLog(shader).trim();
        const prefix = "Errors in " + name + ":" + "\n\n" + errors;
        
        if (errors !== "") {
            const code = gl.getShaderSource(shader).replaceAll("\t", "  ");
            const lines = code.split("\n");
            var linedCode = "";
            var i = 1;
            for (var line of lines) {
                linedCode += (i < 10 ? " " : "") + i + ":\t\t" + line + "\n";
                i++;
            }
            
            console.error(prefix + "\n" + linedCode);
        }
    }
    
    parseForErrors(gl, vs, 'Vertex Shader');
    parseForErrors(gl, fs, 'Fragment Shader');
};

Please sign in to comment.