WebGLProgram - Web API 接口参考 编辑

WebGLProgram 是 WebGL API 的一部分，它由两个WebGLShaders （webgl 着色器）组成，分别为顶点着色器和片元着色器（两种着色器都是采用 GLSL 语言编写的）。创建一个 WebGLProgram 需要调用 GL 上下文的createProgram() 方法，然后调用attachShader()方法附加上着色器，之后你才能将它们连接到一个可用的程序。

WebGLProgram 的创建过程请参考下面的代码：

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 来使用这段着色器程序，绑定合适的数据缓冲区，配置相关选项，最终把图像绘制到屏幕上。

// 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);

规范

浏览器兼容

BCD tables only load in the browser

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.

相关链接

• 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()