WebGL, which stands for Web Graphics Library is a JavaScript API, that allows you to create and render 3D and 2D graphics in any WebGL enabled web browser. It is based on the OpenGL (Open Graphics Library) API, which is widely available software for creating graphics.

Lets get Started

Let’s write code to produce a simple triangle like the one pictured below.

Set up the canvas: First, you need to create a canvas element in your HTML and get a reference to it in your JavaScript code. You can do this using the getElementById() method. Then, you need to get the WebGL context using the getContext() method.


<canvas id="myCanvas"></canvas>
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

Set the viewport: The viewport is the area of the canvas where the drawing will be displayed. You need to set the viewport to match the size of the canvas using the viewport() method.


gl.viewport(0, 0, canvas.width, canvas.height);

Create a buffer: A buffer is an area of memory used to store data that can be accessed by the GPU. You need to create a buffer using the createBuffer() method and bind it to the ARRAY_BUFFER target using the
bindBuffer() method.


const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

Define the shape: You can define a shape by creating an array of vertices. In this example, we’ll create a triangle with three vertices.


const positions = [
0, 0,
0.5, 0,
0, 0.5,
];

Fill the buffer: You can fill the buffer with the vertex data using the bufferData() method.


gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

Create a vertex shader: A vertex shader is a program that runs on the GPU and is responsible for transforming the vertices of a shape. In this example, we’ll create a simple vertex shader that just passes through the vertex position.


const vertexShaderSource = `
attribute vec2 aPosition;
void main() {
gl_Position = vec4(aPosition, 0, 1);
}`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

Create a fragment shader: A fragment shader is a program that runs on the GPU and is responsible for determining the color of each pixel in a shape. In this example, we’ll create a simple fragment shader that just sets the color to red.


const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0, 1);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

Create a program: A program is a collection of shaders that are linked together to create a complete rendering pipeline. You need to create a program using the createProgram() method and attach the vertex and fragment shaders using the attachShader() method.


const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

Use the program: You need to use the program using the useProgram() method.


gl.useProgram(program);

Set up the attribute: An attribute is a variable that is associated with a vertex shader and is used to pass data to the shader. You need to set up the attribute using the getAttribLocation() and vertexAttribPointer() methods.


const positionAttributeLocation = gl.getAttribLocation(program, 'aPosition');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
Draw the shape: Finally, you can draw the shape using the drawArrays() method.
gl.drawArrays(gl.TRIANGLES, 0, 3);

And that’s it! With these steps, you should be able to draw simple shapes to a WebGL canvas.