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.

See full compatibility

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).

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.

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.

// 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);

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 running WebGLRenderingContext.deleteProgram(). This frees the memory of the linked program.

gl.deleteProgram(program);

Specifications

Specification
WebGL Specification # 5.6

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`WebGLProgram`	Chrome – Full support Chrome 10 (Release date: 2011-03-08) footnote Full support	Edge – Full support Edge 12 (Release date: 2015-07-29) footnote Full support	Firefox – Full support Firefox 4 (Release date: 2011-03-22) footnote Full support	Opera – Full support Opera 12 (Release date: 2012-06-14) footnote Full support	Safari – Full support Safari 5.1 (Release date: 2011-07-20) footnote Full support	Chrome Android – Full support Chrome Android 25 (Release date: 2013-02-27) footnote Full support	Firefox for Android – Full support Firefox for Android 4 (Release date: 2011-03-29) footnote Full support	Opera Android – Full support Opera Android 12 (Release date: 2012-02-25) footnote Full support	Safari on iOS – Full support Safari on iOS 8 (Release date: 2014-09-17) footnote Full support	Samsung Internet – Full support Samsung Internet 1.5 (Release date: 2013-09-25) footnote Full support	WebView Android – Full support WebView Android 4.4 (Release date: 2013-12-09) footnote Full support	WebView on iOS – Full support WebView on iOS 8 (Release date: 2014-09-17) footnote Full support
Available in workers Experimental	Chrome – No support Chrome footnote No support	Edge – No support Edge footnote No support	Firefox – Full support Firefox 105 (Release date: 2022-09-20) footnote Full support	Opera – No support Opera footnote No support	Safari – No support Safari footnote No support	Chrome Android – No support Chrome Android footnote No support	Firefox for Android – Full support Firefox for Android 105 (Release date: 2022-09-20) footnote Full support	Opera Android – No support Opera Android footnote No support	Safari on iOS – No support Safari on iOS footnote No support	Samsung Internet – No support Samsung Internet footnote No support	WebView Android – No support WebView Android footnote No support	WebView on iOS – No support WebView on iOS footnote No support

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support
: Experimental. Expect behavior to change in the future.