WebGLProgram

基线 广泛可用

此功能已得到良好建立,可在许多设备和浏览器版本上运行。它已在浏览器中可用,自 2015 年 7 月.

WebGLProgramWebGL API 的一部分,它结合了两个已编译的 WebGLShader,分别为顶点着色器和片段着色器(均使用 GLSL 编写)。

WebGLObject WebGLProgram

要创建 WebGLProgram,请调用 GL 上下文的 createProgram() 函数。在使用 attachShader() 附加着色器程序后,您可以将其链接到可用的程序中。如下面的代码所示。

js
const 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)) {
  const info = gl.getProgramInfoLog(program);
  throw `Could not compile WebGL program. \n\n${info}`;
}

有关在上述示例中创建 vertexShaderfragmentShader 的信息,请参阅 WebGLShader

示例

使用程序

实际使用程序执行某些操作的步骤包括告诉 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);

规范

规范
WebGL 规范
# 5.6

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅