3 4 5 6 7 8 9

Vertex shader

8

To write a shader program you need to use GLSL which stands for “OpenGL Shading Language”. GLSL is coming with WebGL out-of-the-box, so you don't need to mess with some third party libraries for that.

The simplest vertex shader looks like this:

#version 300 es
precision highp float;

in vec2 position;

void main(void)
{
    gl_Position = vec4(position, 0.0, 1.0);
}

Let's see what's going on here. First, we should specify GLSL version we'd like to use:

#version 300 es

Next, we should specify a precision of float-point numbers. There are three options available: lowp, mediump and highp.

precision highp float;

The next step is to specify an input data format. In the example above all per-vertex data is just a 2D vector. This data will come from GPU buffer which we've talked about in the previous lesson:

in vec2 position;

And finally, the main function:

void main(void)
{
    gl_Position = vec4(position, 0.0, 1.0);
}

This function converts whatever were passed as input data into a relative screen-space (or a clip-space) coordinates. gl_Position is a built-in variable where you should put a four-components vector with clip-space coordinates. First two coordinates of this vector is relative screen x and y coordinates. We will discuss the meaning of the rest of coordinates a bit later.

Now, let's get back to JavaScript and compile the vertex shader program above. To make things easier we'll put the source code into textarea element. Just for fun:

<textarea id="vs">
    #version 300 es
    precision highp float;

    in vec2 position;

    void main(void)
    {
        gl_Position = vec4(position, 0.0, 1.0);
    }
</textarea>
<!-- ... -->
<script type="text/javascript">
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext("webgl2");

    const vs = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vs, document.getElementById("vs").value);
    gl.compileShader(vs);

    if(!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
    {
        alert(gl.getShaderInfoLog(vs));
    }
    else
    {
        alert("Vertex shader has been successfully compiled!");
    }
</script>

So, what did we do here. First — we created a vertex shader object:

const vs = gl.createShader(gl.VERTEX_SHADER);

Second — we set its source code, a program, written in GLSL which we kept in our textarea element (just for fun!):

gl.shaderSource(vs, document.getElementById("vs").value);

Third — we compiled it:

gl.compileShader(vs);

And after that — we checked if a compilation has been completed without any issues. If there were some issues then we alerted their description. If not — just alerted that everything is fine:

// Check for the compilation status
if(!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
{
    // The compilation has failed: alert the compilation log:
    alert(gl.getShaderInfoLog(vs));
}
else
{
    // There were no compilation errors, yay!
    alert("Vertex shader has been successfully compiled!");
}

The first step is done! Let's go to the second one.

Share this page:

Learning plan

How to setup WebGL render loop property
The very basics of how things are being presented and processed in 3D graphics
The very basics of steps you should perform to draw a triangle or a 3D model from scratch
6. Vertex shader
Let's create a simple vertex shader, compile it, and check for compilation issues
Now let's create a fragment shader, compile it and check for errors
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