W3cubDocs

/DOM

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
Basic support	9	12	4	11	12	5.1
Available in workers	No	No	44¹	No	No	No

Feature	Android webview	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic support	Yes	25	Yes	Yes	11	12	8.1
Available in workers	No	No	No	No	No	No	No