WebGLProgram 是 WebGL API 的一部分,它由两个WebGLShaders (webgl着色器)组成,分别为顶点着色器还有片元着色器(两种着色器都是由GLSL语言来写的),WebGLProgram 负责将两个着色器使用在一个webgl程序上。
var program = gl.createProgram();
// 添加预先存在的着色器
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;
}
查看 WebGLShader 了解更多关于顶点着色器和片元着色器在以上例子的应用。
示例
使用着色器程序
着色器程序实际上做了几个步骤,包括告诉GPU来使用这段着色器程序,绑定合适的数据,配置相关选项,最终把图像绘制到屏幕上。
// 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);
删除着色器程序
如果在连接着色器程序的时候有错误,或者你想删除一个已经存在的着色器程序,你可以简单的执行WebGLRenderingContext.deleteProgram(),这就释放了连接着色器程序的内存。
gl.deleteProgram(program);
规范
| 规范 | 状态 | 说明 |
|---|---|---|
| WebGL 1.0 WebGLProgram |
Recommendation | 初始定义。 |
浏览器兼容
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.
No compatibility data found. Please contribute data for "api/WebGLProgram" to the MDN compatibility data repository.
相关链接
WebGLShaderWebGLRenderingContext.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()