WebGLProgram

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). 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 Edge Firefox Internet Explorer Opera Safari Servo
Basic Support9124.011125.1No support
Available in workersNo supportNo supportNo support1No supportNo supportNo supportNo support
Feature Android Chrome for Android Edge Mobile Firefox for Android IE Mobile Opera Mobile Safari Mobile
Basic Support(Yes)25No support(Yes)11128.1
Available in workersNo supportNo supportNo supportNo supportNo supportNo supportNo support

1. This feature is experimentally implemented since Firefox 44; to activate it, in about:config, set gfx.offscreencanvas.enabled to true

See also

Document Tags and Contributors

 Contributors to this page: teoli, firefligher, fscholz, gregtatum
 Last updated by: teoli,