WebGL: Switch between Shaders

Question

i wrote a tiny function to switch between shaders, but unfortunatelly it doesn't work. I create the shaders and return them as shader objects.

1. program = gl.createProgram(vs, fs, "VertexPosition", "TextureCoord", "VertexNormal");

2. depthprogram = gl.createProgram(vs, fs, "VertexPosition", false, false);

I use the switch function in my update function which consists of :

    function Update(){ 
            gl.switchProgram(program);
            gl.Draw(Teapot, cam);
    };

All buffers of the model are bind in the draw function, (parameters: the model, camera position)

    this.switchProgram = function(program){

    if (this.program !== program){
        this.lastprogram = this.program;
        this.program = program;
        gl.useProgram(this.program);

    };

};

Here is the resulting error: WebGL: INVALID_OPERATION: drawElements: attribs not setup correctly If i comment all works fine, but i'm unable to switch :(

depthprogram = gl.createProgram(vs, fs, "VertexPosition", false, false);
gl.switchProgram(program);

Answer 1

Do both shaders use same attributes? As far as I could conclude from your code, first shader uses:

attribute vertexPos;
attribute vertexNormal;
attribute textureCoord;

while second uses only

attribute vertexPos;

If you try to send attribute that isn't being used in vertex shader of the program, or you don't send attribute that vertex shader requests, then you'll get the warning. I would say that you don't send vertexNormal and textureCoord for the first shader, although shader needs them.

Hope this helps.