The WebGLProgram
is part of the WebGL API and is a combination of two compiled WebGLShader
s 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.0 The 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 | Chrome No support No | Edge No support No | Firefox
Full support
44
| 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
WebGLShader
WebGLRenderingContext.attachShader()
WebGLRenderingContext.compileShader()
WebGLRenderingContext.createProgram()
WebGLRenderingContext.createShader()
WebGLRenderingContext.deleteProgram()
WebGLRenderingContext.deleteShader()
WebGLRenderingContext.detachShader()
WebGLRenderingContext.getAttachedShaders()
WebGLRenderingContext.getProgramParameter()
WebGLRenderingContext.getProgramInfoLog()
WebGLRenderingContext.getShaderParameter()
WebGLRenderingContext.getShaderPrecisionFormat()
WebGLRenderingContext.getShaderInfoLog()
WebGLRenderingContext.getShaderSource()
WebGLRenderingContext.isProgram()
WebGLRenderingContext.isShader()
WebGLRenderingContext.linkProgram()
WebGLRenderingContext.shaderSource()
WebGLRenderingContext.useProgram()
WebGLRenderingContext.validateProgram()