Nasi wolontariusze nie przetłumaczyli jeszcze tego artykułu na język Polski. Dołącz do nas i pomóż go przetłumaczyć!
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; } }
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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 9 | 4.0 (2.0) | 11 | 12 | 5.1 |
Available in workers | No support | 44 (44) [1] | No support | No support | No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | 25 | (Yes) | ? | 12 | 8.1 |
Available in workers | No support | No support | 44.0 (44) [1] | No support | No support | No support |
[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled
to true
.
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()