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 in Web Workers.

The WebGLProgram is part of the WebGL API and is a combination of two compiled WebGLShaders consisting of a vertex shader and a fragment shader (both written in GLSL).

WebGLObject WebGLProgram

To create a WebGLProgram, call the GL context's createProgram() function. After attaching the shader programs using attachShader(), you link them into a usable program. This is shown in the code below.

js
const program = gl.createProgram();

// Attach pre-existing shaders
gl.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}`);
}

See WebGLShader for information on creating the vertexShader and fragmentShader 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.

js
// Use the program
gl.useProgram(program);

// Bind existing attribute data
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.enableVertexAttribArray(attributeLocation);
gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);

// Draw a single triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on May 23, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content

WebGLProgram

In this article

Examples

Using the program

Deleting the program

Specifications

Browser compatibility

See also

Help improve MDN