{{APIRef("WebGL")}} {{draft}}
The WebGLShader is part of the WebGL API and can either be a vertex or a fragment shader. A {{domxref("WebGLProgram")}} requires both types of shaders. To create a WebGLShader use {{domxref("WebGLRenderingContext.createShader")}}, then hook up the GLSL source code using {{domxref("WebGLRenderingContext.shaderSource()")}}, and finally invoke {{domxref("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 {{domxref("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; } }
See {{domxref("WebGLProgram")}} for information on creating attaching the shaders.
Examples
Create 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)
Create 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 |
---|---|---|
{{SpecName('WebGL', "#5.8", "WebGLShader")}} | {{Spec2('WebGL')}} | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatChrome("9")}} | {{CompatGeckoDesktop("2.0")}} | {{CompatIE("11")}} | {{CompatOpera("12")}} | {{CompatSafari("5.1")}} |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | 25 | {{CompatVersionUnknown}} | {{CompatUnknown}} | 12 | 8.1 |
See also
- {{domxref("WebGLProgram")}}
- {{domxref("WebGLRenderingContext.attachShader()")}}
- {{domxref("WebGLRenderingContext.bindAttribLocation()")}}
- {{domxref("WebGLRenderingContext.compileShader()")}}
- {{domxref("WebGLRenderingContext.createProgram()")}}
- {{domxref("WebGLRenderingContext.createShader()")}}
- {{domxref("WebGLRenderingContext.deleteProgram()")}}
- {{domxref("WebGLRenderingContext.deleteShader()")}}
- {{domxref("WebGLRenderingContext.detachShader()")}}
- {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
- {{domxref("WebGLRenderingContext.getShaderParameter()")}}
- {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
- {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
- {{domxref("WebGLRenderingContext.getShaderSource()")}}
- {{domxref("WebGLRenderingContext.isProgram()")}}
- {{domxref("WebGLRenderingContext.isShader()")}}
- {{domxref("WebGLRenderingContext.linkProgram()")}}
- {{domxref("WebGLRenderingContext.shaderSource()")}}
- {{domxref("WebGLRenderingContext.useProgram()")}}
- {{domxref("WebGLRenderingContext.validateProgram()")}}