이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 함께 해서 번역을 마치도록 도와 주세요!
The WebGLProgram is part of the WebGL API and is a combination of two compiled WebGLShader
s 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 | 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
WebGLShader
WebGLRenderingContext.attachShader()
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()