WebGLShader

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Note: This feature is available in Web Workers.

The WebGLShader is part of the WebGL API and can either be a vertex or a fragment shader. A WebGLProgram requires both types of shaders.

WebGLObject WebGLShader

Description

To create a WebGLShader use WebGLRenderingContext.createShader, then hook up the GLSL source code using WebGLRenderingContext.shaderSource(), and finally invoke WebGLRenderingContext.compileShader() to finish and compile the shader. At this point the WebGLShader is still not in a usable form and must still be attached to a WebGLProgram.

js
function createShader(gl, sourceCode, type) {
  // Compiles either a shader of type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER
  const shader = gl.createShader(type);
  gl.shaderSource(shader, sourceCode);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    const info = gl.getShaderInfoLog(shader);
    throw new Error(`Could not compile WebGL program. \n\n${info}`);
  }
  return shader;
}

See WebGLProgram for information on attaching the shaders.

Examples

Creating a vertex shader

Note that there are many other strategies for writing and accessing shader source code strings. These example are for illustration purposes only.

js
const vertexShaderSource =
  "attribute vec4 position;\n" +
  "void main() {\n" +
  "  gl_Position = position;\n" +
  "}\n";

// Use the createShader function from the example above
const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);

Creating a fragment shader

js
const fragmentShaderSource = `void main() {
  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
`;

// Use the createShader function from the example above
const fragmentShader = createShader(
  gl,
  fragmentShaderSource,
  gl.FRAGMENT_SHADER,
);

Specifications

Specification
WebGL Specification
# 5.8

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
WebGLShader
Chrome – Full support
Chrome 10 (Release date: 2011-03-08)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 12 (Release date: 2012-06-14)
footnote Full support
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 25 (Release date: 2013-02-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12 (Release date: 2012-02-25)
footnote Full support
Safari on iOS – Full support
Safari on iOS 8 (Release date: 2014-09-17)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 8 (Release date: 2014-09-17)
footnote Full support
Available in workers
Experimental
Chrome – No support
Chrome
footnote No support
Edge – No support
Edge
footnote No support
Firefox – Full support
Firefox 105 (Release date: 2022-09-20)
footnote Full support
Opera – No support
Opera
footnote No support
Safari – No support
Safari
footnote No support
Chrome Android – No support
Chrome Android
footnote No support
Firefox for Android – Full support
Firefox for Android 105 (Release date: 2022-09-20)
footnote Full support
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – No support
Samsung Internet
footnote No support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – No support
WebView on iOS
footnote No support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

See also