WebGLProgram
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
WebGLProgram 是 WebGL API 的一部分,它由两个WebGLShader
s(webgl 着色器)组成,分别为顶点着色器和片元着色器(两种着色器都是采用 GLSL 语言编写的)。创建一个 WebGLProgram 需要调用 GL 上下文的createProgram()
方法,然后调用attachShader()
方法附加上着色器,之后你才能将它们连接到一个可用的程序。
WebGLProgram 的创建过程请参考下面的代码:
js
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 "WebGL program 不能编译。\n\n" + info;
}
查看 WebGLShader
api 了解更多关于创建以上例子中的顶点着色器
和片元着色器
的信息。
示例
使用着色器程序
着色器程序在使用的过程中要分为几步,包括告知 GPU 来使用这段着色器程序,绑定合适的数据缓冲区,配置相关选项,最终把图像绘制到屏幕上。
js
// 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()
,这将释放连接着色器程序的内存。
js
gl.deleteProgram(program);
规范
Specification |
---|
WebGL Specification # 5.6 |
浏览器兼容性
BCD tables only load in the browser
相关链接
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()