WebGL2 : cannot set uniform float

Question

Let's say I have a program that I have compiled and linked using a vertex shader and a fragment shader in WebGL2.

Here what my shaders look like :

var vertex_shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertex_shader,
    `#version 300 es
    in vec2 pos;
    out vec2 texCoord;
    void main(){
        gl_Position = vec4(pos,0.0,1.0);
        texCoord = (pos+vec2(1.0))*0.5;
    }`
);

var math_pass_shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(math_pass_shader,
    `#version 300 es
    precision highp float;

    const float bailout = 300.0;

    in vec2 texCoord;

    uniform float zoom;
    uniform float center_x;
    uniform float center_y;

    layout (location = 0) out vec4 outColor;
    layout (location = 1) out vec2 z0;
    layout (location = 2) out vec2 zn;
    layout (location = 3) out uint iteration_count;

    vec2 add(vec2 c1, vec2 c2){
        return vec2(c1.x + c2.x, c1.y + c2.y);
    }

    vec2 mul(vec2 c1, vec2 c2){
        return vec2(c1.x*c2.x - c1.y*c2.y, c1.x*c2.y + c1.y*c2.x);
    }

    float mag2(vec2 c){
        return c.x*c.x + c.y*c.y;
    }

    float mag(vec2 c){
        return sqrt(mag2(c));
    }

    float mag_norm(highp vec2 c){
        return log(mag2(c)/bailout)/log(bailout);
    }

    float arg(vec2 c){
        return 2.0 * atan(c.y / (c.x + sqrt(mag2(c))));
    }

    float arg_norm(vec2 c){
        return arg(c)/6.282 + 0.5;
    }

    void main() {
        z0.x = center_x + texCoord.x*zoom - zoom * 0.5;
        z0.y = center_y + texCoord.y*zoom - zoom * 0.5;

        zn = z0;
        for(iteration_count =0u ; iteration_count < 200u; iteration_count++){
            if(mag2(zn)>bailout){
                outColor = vec4(1, 1, 0.5, 1); // return reddish-purple
                return;
            }
            zn = add(mul(zn,zn),z0);
        }
        outColor = vec4(zn.x, zn.y, 0.5, 1); // return reddish-purple
    }`
);

Then I link my program, and check for link/compile errors, none are found :

var math_program = gl.createProgram();
gl.attachShader(math_program, vertex_shader);
gl.attachShader(math_program, math_pass_shader);
gl.linkProgram(math_program);

I get all the uniforms I have used in my program :

var zoom = gl.getUniformLocation(math_program, "zoom");
var x = gl.getUniformLocation(math_program, "center_x");
var y = gl.getUniformLocation(math_program, "center_y");

And, when I set any of these uniforms, I get a warning : WebGL warning: uniform setter: No active linked Program.

gl.uniform1f(zoom, 2.5);
gl.uniform1f(x, -0.5);
gl.uniform1f(y, 0.0);

Is there something I am missing here?

Thanks in advance

Answer 1

gl.uniform1f sets a uniform variable in the default uniform block of the currently installed program. Therefore you have to install the program with gl.useProgram before you can set the uniforms:

gl.useProgram(math_program);
gl.uniform1f(zoom, 2.5);
gl.uniform1f(x, -0.5);
gl.uniform1f(y, 0.0);