8 9 10 11 12 13 14

Uniforms

10

Vertex attributes are per-vertex data. Which means that every vertex has its own attribute values. However you also need draw call level parameters — values which are shared between all vertices or pixels within a whole GLSL program. For example you could utilize a current time, a scale factor, or some other parameters you want use to configure a rendering of a given geometry. To achieve that you should use GLSL uniforms.

Let's take a vertex shader from the previous lesson and update it in the following way:

#version 300 es
precision highp float;

uniform float time; // Yep, that's draw call level parameter

in vec2 position;

void main(void)
{
    // Let's utilize the current time to rotate the current vertex
    vec2 rotated = vec2
    (
        position.x * cos(time) - position.y * sin(time),
        position.x * sin(time) + position.y * cos(time)
    );

    // And let's put the rotated vertex to the output
    gl_Position = vec4(rotated, 0.0, 1.0);
}

Now, let's remember our draw function:

function draw(timestamp)
{
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(program);
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    window.requestAnimationFrame(draw);
}

To set a uniform value we should find a uniform location in our GLSL program first. That should be done only once. After that we can set a uniform value by its location:

// We found a uniform location here
// "time" is a uniform name in our vertex shader
const time = gl.getUniformLocation(program, "time");

function draw(timestamp)
{
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(program);

    // We set a value of the uniform here
    gl.uniform1f(time, timestamp / 1000);

    gl.drawArrays(gl.TRIANGLES, 0, 3);

    window.requestAnimationFrame(draw);
}

Save everything and refresh the page. Now you should see our triangle rotating:

Lesson 10
Share this page:

Learning plan

It's time to link our shaders into a completed GLSL program
Now we need to create a GPU buffer and transfer a geometry data into it
Everything is ready to draw our first triangle
11. Uniforms
How to use draw call level parameters to control the shading process
Let's add more attributes to vertices and use them to enhance our triangle
How to evaluate a vertex-specified data and interpolate it between vertices
14. Textures
An introduction on how to load texture, initialize it properly with WebGL and pass it into GLSL program