Switch shader program in WebGL

Question

I have an existing WebGL renderer (too much code to be useful to share) which used to be very simple: it only had one vertex shader, one fragment shader, and one shader program with both. It was for rendering quads.

I'm trying to extend it to have a second shader program it switches to and from, for rendering point sprites. It has its own vertex attribute array, and a second vertex shader, fragment shader and shader program.

I can't seem to switch between the two properly: I keep getting display glitches, randomly disappearing objects and such. Here's the two functions I have to switch between them. Any idea what I'm missing?

GLWrapProto.switchQuadProgram = function ()
{
    var gl = this.gl;

    gl.useProgram(this.shaderProgramPoint);

    gl.disableVertexAttribArray(this.locAPosPoint);

    gl.useProgram(this.shaderProgram);

    gl.enableVertexAttribArray(this.locAPos);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
    gl.vertexAttribPointer(this.locAPos, 2, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(this.locATex);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.texcoordBuffer);
    gl.vertexAttribPointer(this.locATex, 2, gl.FLOAT, false, 0, 0);
};

GLWrapProto.switchPointProgram = function ()
{
    var gl = this.gl;

    gl.useProgram(this.shaderProgram);

    gl.disableVertexAttribArray(this.locAPos);
    gl.disableVertexAttribArray(this.locATex);

    gl.useProgram(this.shaderProgramPoint);

    gl.enableVertexAttribArray(this.locAPosPoint);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.pointBuffer);
    gl.vertexAttribPointer(this.locAPosPoint, 4, gl.FLOAT, false, 0, 0);
};

Answer 1

It's going to be difficult to tell what the problem is from that piece of code, but let me throw some suggestions out there to try and help you find the problem.

First off, you don't need to worry too much about doing disableVertexAttribArray every time you switch shaders. The enabled/disabled arrays are state that is associated with the shader, and as such changing the bound program invalidates your previously enabled arrays anyway.

(Actually, does anyone know of a decent citation for that, I was trying to find one and can't at the moment.)

With that in mind you could simplify your above code to:

GLWrapProto.switchQuadProgram = function ()
{
    var gl = this.gl;

    gl.useProgram(this.shaderProgram);

    gl.enableVertexAttribArray(this.locAPos);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
    gl.vertexAttribPointer(this.locAPos, 2, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(this.locATex);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.texcoordBuffer);
    gl.vertexAttribPointer(this.locATex, 2, gl.FLOAT, false, 0, 0);
};

GLWrapProto.switchPointProgram = function ()
{
    var gl = this.gl;

    gl.useProgram(this.shaderProgramPoint);

    gl.enableVertexAttribArray(this.locAPosPoint);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.pointBuffer);
    gl.vertexAttribPointer(this.locAPosPoint, 4, gl.FLOAT, false, 0, 0);
};

I'm curious about the issue that you mentioned with "display glitches", though. I can't think of any reason why switching shaders would cause objects to randomly stop and start rendering. Try rendering only the geometry using one shader first, then switch and render only geometry that uses the other. If either of them have the issue then you know it's not the shader switching that is causing your problem. If the problem only appears when rendering both sets of geometry together, there may be some error in the state management between the two.