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.
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
.
function createShader (gl, sourceCode, type) { // Compiles either a shader of type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER var shader = gl.createShader( type ); gl.shaderSource( shader, sourceCode ); gl.compileShader( shader ); if ( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) { var info = gl.getShaderInfoLog( shader ); throw '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.
var vertexShaderSource = 'attribute vec4 position;\n' + 'void main() {\n' + ' gl_Position = position;\n' + '}\n'; //Use the createShader function from the example above var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER)
Creating a fragment shader
var fragmentShaderSource = 'void main() {\n' + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n' + '}\n'; //Use the createShader function from the example above var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER)
Specifications
Specification | Status | Comment |
---|---|---|
WebGL 1.0 The definition of 'WebGLShader' 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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
WebGLShader | 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
WebGLProgram
WebGLRenderingContext.attachShader()
WebGLRenderingContext.bindAttribLocation()
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()