Switching shaders in webgl

Question

I have a problem with a program written in webgl and I don't know how to debug it because the browser console shows no errors. Webgl is drawing nothing at all.

I have the following set of shaders:

Kenney · Accepted Answer

The problem is that some shader parameters of shaderProgramMap are not enabled. For example, there is

shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

and

gl.disableVertexAttribArray(shaderProgram.vertexPositionAttribute);

but nothing for shaderProgramMap, which' script also has the aVertexPosition attribute.

When you're starting to get these kinds of problems, where you can't find what's wrong with code you wrote, it is because the code is no longer clear: the overview is lost. There's duplicate code: the same thing is done twice, namely to compile, link, and configure a Shader. Then, it's time to refactor: extract all duplicate code, and parameterize what's different.

There are many possible steps. One is to abstract the shader parameters: the attributes and uniforms.
The code below will produce a parameter hashmap with information about all the parameters in the shader source. Note, it may not cover all possibilities, but it is merely to give you an idea.

function initShaderParams( gl, shaderProgram, vs, fs )
{
    /** We'll be returning this: */
    var params = {
        uniform:{},
        attribute:{},

        uniforms: function(arr) {
            for ( var a in arr )
                if ( params.uniform[a] )
                    params.uniform[ a ].set( arr[a] );
                else throw new Error("unknown uniform '"+a+"' referenced in shader " + vs+"+"+fs
                    + ";\navailable uniforms: " + Object.keys(params.uniform)
                );
        },

        enable: function() {
            for ( var a in this.attribute )
                gl.disableVertexAttribArray( this.attribute[a] );
        }

        // disable: ....
    };


    /** returns a function to set the value of a uniform given it's type */
    function getUniformFN( type ) {
        switch ( type ) {
            case 'vec2': return function(v){gl.uniform2f( this.loc, false, v[0], v[1] );};
            case 'mat4': return function(v){gl.uniformMatrix4fv( this.loc, false, v );};
            default:
                throw new Error("unknown uniform type " + type + " in shader " + vs+"+"+fs );
        }
    }

    /** same, for attributes. */
    function getAttributeFN( type ) {
        switch ( type ) {
            case 'vec2': return function(v){ gl.bindBuffer( gl.ARRAY_BUFFER, v ); gl.vertexAttribPointer( this.loc, 2, gl.FLOAT, false, 0, 0 ); };
            case 'vec3': return function(v){ gl.bindBuffer( gl.ARRAY_BUFFER, v ); gl.vertexAttribPointer( this.loc, 3, gl.FLOAT, false, 0, 0 ); };
            case 'vec4': return function(v){ gl.bindBuffer( gl.ARRAY_BUFFER, v ); gl.vertexAttribPointer( this.loc, 4, gl.FLOAT, false, 0, 0 ); };
            default:
                throw new Error("unknown uniform type " + type + " in shader " + vs+"+"+fs );
        }
    }

    /** Utility method to map a regex callback */
    function regexMap(regex, text, callback) {
        while ((result = regex.exec(text)) != null)
            callback(result);
    }

    // extract parameters:

    var src = vs + fs;

    regexMap(/(uniform)\s+(\w+)\s+(\w+)($$\d+$$)?\s*;/g, src, function(groups) {
        var loc = gl.getUniformLocation( shaderProgram, groups[3] );
        if ( loc == null ) {
            console.warn("declared ", groups[0], " not used" );
            return;
        }

        params.uniform[ groups[3] ] = {
            type: groups[2],
            loc:  loc,
            set:  getUniformFN( groups[2] )
       };
    } );

    regexMap(/(attribute)\s+(\w+)\s+(\w+)\s*;/g, src, function(groups) {
        var loc = gl.getAttribLocation ( shaderProgram, groups[3] );
        if ( loc == -1 ) {
            console.warn("declared ", groups[0], " not used" );
            return;
        }
        params.attribute[ groups[3] ] = {
            type: groups[2],
            loc:  loc,
            set:  getAttributeFN( groups[2] )
        };
    } );

    return params;
}

Calling this method you'll have access to the shader parameters, and you can iterate over them, or set them all at once:

var params = initShaderParams( gl, shaderProgram, vsSource, fsSource );

params.uniforms( {
    uViewMatrix: ...,
    uModelMatrix: ...,
    ...
} );

That way, the code becomes more clear, and it will make it easier to spot what is missing. You could even write a function to do it for you: calculate the intersection of the params.uniforms keys and the given parameters to see if all of them are specified, or keep track of whether they are set using a setter function. Of course, there are many other ways; you could also create a Shader class and override methods.

Copy-paste coding leads to unmaintainable code. As a rule of thumb, whenever you have to program something twice, you're doing it once too often.

Switching shaders in webgl

Answers (1)

Related Questions