1. Web
  2. Web API
  3. WebGLProgram

WebGLProgram

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

注意：此功能在 Web Workers 中可用。

WebGLProgram 是 WebGL 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 new Error(`Could not compile WebGL program. \n\n${info}`);
}

有关创建上述示例中的 vertexShader 和 fragmentShader 的信息，请参阅 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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，作者是 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.