WebGLProgram

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

* Some parts of this feature may have varying levels of support.

Note: This feature is available inWeb Workers.

TheWebGLProgram is part of theWebGL API and is a combination of two compiledWebGLShaders consisting of a vertex shader and a fragment shader (both written in GLSL).

To create aWebGLProgram, call the GL context'screateProgram() function. After attaching the shader programs usingattachShader(), you link them into a usable program. This is shown in the code below.

const program = gl.createProgram();// Attach pre-existing shadersgl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {  const info = gl.getProgramInfoLog(program);  throw new Error(`Could not compile WebGL program. \n\n${info}`);}

SeeWebGLShader for information on creating thevertexShader andfragmentShader in the above example.

Examples

Using the program

The steps to actually do some work with the program involve telling the GPU to use the program, bind the appropriate data and configuration options, and finally draw something to the screen.

// Use the programgl.useProgram(program);// Bind existing attribute datagl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.enableVertexAttribArray(attributeLocation);gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);// Draw a single trianglegl.drawArrays(gl.TRIANGLES, 0, 3);

Deleting the program

If there is an error linking the program or you wish to delete an existing program, then it is as simple as runningWebGLRenderingContext.deleteProgram(). This frees the memory of the linked program.