WebGLProgram 是 WebGL API 的一部分,它由两个WebGLShader
s (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.
相关链接
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()