WebGLProgram
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). These are then linked into a usable program.
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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 9 | 4.0 (2.0) | 11 | 12 | 5.1 |
Available in workers | No support | 44 (44) [1] | No support | No support | No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | 25 | (Yes) | ? | 12 | 8.1 |
Available in workers | No support | No support | 44.0 (44) [1] | No support | No support | No support |
[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled
to true
.
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()
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/webglprogram