Web/API/WebGLProgram

From Get docs


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.

var 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) ) {
  var info = gl.getProgramInfoLog(program);
  throw '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 Status Comment
WebGL 1.0The definition of 'WebGLProgram' in that specification. Recommendation Initial definition.

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
WebGLProgram Chrome

Full support 9

Edge

Full support 12

Firefox

Full support 4

IE

Full support 11

Opera

Full support 12

Safari

Full support 5.1

WebView Android

Full support Yes

Chrome Android

Full support 25

Firefox Android

Full support Yes

Opera Android

Full support 12

Safari iOS

Full support 8

Samsung Internet Android

Full support 1.5

Available in workers

Experimental'

Chrome

No support No

Edge

No support No

Firefox Full support 44

Disabled'

Full support 44

Disabled'

Disabled' From version 44: this feature is behind the gfx.offscreencanvas.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE

No support No

Opera

No support No

Safari

No support No

WebView Android

No support No

Chrome Android

No support No

Firefox Android

No support No

Opera Android

No support No

Safari iOS

No support No

Samsung Internet Android

No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.'
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.'
User must explicitly enable this feature.


See also