WebGL2RenderingContext

这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

WebGL2RenderingContext 接口在底层使用了OpenGL ES 3.0 为 HTML 的 <canvas> 元素提供了绘图上下文。

要获取该接口的实例对象需要调用一个  <canvas>  标签对象的 getContext() 函数,并将 "webgl2" 作为参数传递:

var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl2');

WebGL 2 是 WebGL 1 的扩展。 WebGL2RenderingContext 接口实现了 WebGLRenderingContext 接口的所有成员。 有一些 WebGL 1 上下文中的方法在使用 WebGL 2 上下文的时候可以接受附加值。 您可以通过 WebGL 1 的参考页了解这些信息。

这个 WebGL 教程 中提供了关于如何开始使用 WebGL 的更多信息、示例以及资源。

常量

请看 WebGL 常量 页面。

状态信息

WebGL2RenderingContext.getIndexedParameter()
返回指定目标的索引值。

缓冲区

WebGL2RenderingContext.copyBufferSubData()
将缓冲区的部分数据复制到另一个缓冲区。
WebGL2RenderingContext.getBufferSubData()
从缓冲区中读取数据,然后将其写入到 ArrayBufferSharedArrayBuffer 中。

帧缓冲区

WebGL2RenderingContext.blitFramebuffer()
将一个像素块从读取帧缓区冲传输到绘制帧缓冲区。
WebGL2RenderingContext.framebufferTextureLayer()
附着一个单层的材质到帧缓冲区。
WebGL2RenderingContext.invalidateFramebuffer()
使附着到缓冲区的内容失效。
WebGL2RenderingContext.invalidateSubFramebuffer()
使附着到缓冲区的部分内容失效。
WebGL2RenderingContext.readBuffer()
选择一个颜色缓冲作为像素的source。

渲染缓冲区

WebGL2RenderingContext.getInternalformatParameter()
Returns information about implementation-dependent support for internal formats.
WebGL2RenderingContext.renderbufferStorageMultisample()
Creates and initializes a renderbuffer object's data store and allows specifying the number of samples to be used.

纹理

WebGL2RenderingContext.texStorage2D()
Specifies all levels of two-dimensional texture storage.
WebGL2RenderingContext.texStorage3D()
Specifies all levels of a three-dimensional texture or two-dimensional array texture.
WebGL2RenderingContext.texImage3D()
Specifies a three-dimensional texture image.
WebGL2RenderingContext.texSubImage3D()
Specifies a sub-rectangle of the current 3D texture.
WebGL2RenderingContext.copyTexSubImage3D()
Copies pixels from the current WebGLFramebuffer into an existing 3D texture sub-image.
WebGL2RenderingContext.compressedTexImage3D()
Specifies a three-dimensional texture image in a compressed format.
WebGL2RenderingContext.compressedTexSubImage3D()
Specifies a three-dimensional sub-rectangle for a texture image in a compressed format.

程序和着色器

WebGL2RenderingContext.getFragDataLocation()
Returns the binding of color numbers to user-defined varying out variables.

Uniforms 和 Attributes

WebGL2RenderingContext.uniform[1234][fiu][v]()
指定一个uniform变量。
WebGL2RenderingContext.uniformMatrix[1234][fv]()
指定一个uniform矩阵变量。
WebGL2RenderingContext.vertexAttribI[iuv]()
Methods specifying integer values for generic vertex attributes.
WebGL2RenderingContext.vertexAttribIPointer()
Specifies integer data formats and locations of vertex attributes in a vertex attributes array.

绘图缓冲区

WebGL2RenderingContext.vertexAttribDivisor()
Modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with gl.drawArraysInstanced() and gl.drawElementsInstanced().
WebGL2RenderingContext.drawArraysInstanced()
Renders primitives from array data. In addition, it can execute multiple instances of the range of elements.
WebGL2RenderingContext.drawElementsInstanced()
Renders primitives from array data. In addition, it can execute multiple instances of a set of elements.
WebGL2RenderingContext.drawRangeElements()
Renders primitives from array data in a given range.
WebGL2RenderingContext.drawBuffers()
Specifies a list of color buffers to be drawn into.
WebGL2RenderingContext.clearBuffer[fiuv]()
Clears buffers from the currently bound framebuffer.

查询对象

Methods for working with WebGLQuery objects.

WebGL2RenderingContext.createQuery()
创建一个新的 WebGLQuery 对象.
WebGL2RenderingContext.deleteQuery()
删除一个指定的 WebGLQuery 对象。
WebGL2RenderingContext.isQuery()
Returns true if a given object is a valid WebGLQuery object.
WebGL2RenderingContext.beginQuery()
开始一个异步查询。
WebGL2RenderingContext.endQuery()
Marks the end of an asynchronous query.
WebGL2RenderingContext.getQuery()
返回一个指定目标的 WebGLQuery 对象。
WebGL2RenderingContext.getQueryParameter()
返回关于一个查询的信息。

采样对象

WebGL2RenderingContext.createSampler()
Creates a new WebGLSampler object.
WebGL2RenderingContext.deleteSampler()
Deletes a given WebGLSampler object.
WebGL2RenderingContext.bindSampler()
Binds a given WebGLSampler to a texture unit.
WebGL2RenderingContext.isSampler()
Returns true if a given object is a valid WebGLSampler object.
WebGL2RenderingContext.samplerParameter[if]()
Sets sampler parameters.
WebGL2RenderingContext.getSamplerParameter()
Returns sampler parameter information.

同步对象

WebGL2RenderingContext.fenceSync()
创建一个 WebGLSync 对象并插入到 GL 命令流中。
WebGL2RenderingContext.isSync()
Returns true if the passed object is a valid WebGLSync object.
WebGL2RenderingContext.deleteSync()
删除一个指定的 WebGLSync 对象。
WebGL2RenderingContext.clientWaitSync()

Blocks and waits for a WebGLSync object to become signaled or a given timeout to be passed.

WebGL2RenderingContext.waitSync()
Returns immediately, but waits on the GL server until the given WebGLSync object is signaled.
WebGL2RenderingContext.getSyncParameter()
根据一个 WebGLSync 对象返回参数信息。

变换反馈

WebGL2RenderingContext.createTransformFeedback()
创建并初始化 WebGLTransformFeedback 对象。
WebGL2RenderingContext.deleteTransformFeedback()
删除一个指定的 WebGLTransformFeedback 对象。
WebGL2RenderingContext.isTransformFeedback()
Returns true if the passed object is a valid WebGLTransformFeedback object.
WebGL2RenderingContext.bindTransformFeedback()
Binds a passed WebGLTransformFeedback object to the current GL state.
WebGL2RenderingContext.beginTransformFeedback()
Starts a transform feedback operation.
WebGL2RenderingContext.endTransformFeedback()
Ends a transform feedback operation.
WebGL2RenderingContext.transformFeedbackVaryings()
Specifies values to record in WebGLTransformFeedback buffers.
WebGL2RenderingContext.getTransformFeedbackVarying()
Returns information about varying variables from WebGLTransformFeedback buffers.
WebGL2RenderingContext.pauseTransformFeedback()
Pauses a transform feedback operation.
WebGL2RenderingContext.resumeTransformFeedback()
Resumes a transform feedback operation.

Uniform 缓冲对象

WebGL2RenderingContext.bindBufferBase()
Binds a given WebGLBuffer to a given binding point (target) at a given index.
WebGL2RenderingContext.bindBufferRange()
Binds a range of a given WebGLBuffer to a given binding point (target) at a given index.
WebGL2RenderingContext.getUniformIndices()

Retrieves the indices of a number of uniforms within a WebGLProgram.

WebGL2RenderingContext.getActiveUniforms()
Retrieves information about active uniforms within a WebGLProgram.
WebGL2RenderingContext.getUniformBlockIndex()
Retrieves the index of a uniform block within a WebGLProgram.
WebGL2RenderingContext.getActiveUniformBlockParameter()
Retrieves information about an active uniform block within a WebGLProgram.
WebGL2RenderingContext.getActiveUniformBlockName()
Retrieves the name of the active uniform block at a given index within a WebGLProgram.
WebGL2RenderingContext.uniformBlockBinding()
Assigns binding points for active uniform blocks.

顶点数组对象

Methods for working with WebGLVertexArrayObject (VAO) objects.

WebGL2RenderingContext.createVertexArray()
创建一个新的 WebGLVertexArrayObject
WebGL2RenderingContext.deleteVertexArray()
删除一个指定的 WebGLVertexArrayObject
WebGL2RenderingContext.isVertexArray()
如果一个指定的 WebGLVertexArrayObject 对象有效则返回 true
WebGL2RenderingContext.bindVertexArray()
绑定一个指定的 WebGLVertexArrayObject 到缓冲。

规范

Specification Status Comment
WebGL 2.0
WebGL2RenderingContext
Editor's Draft Initial definition.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 未实现 [2] Nightly build [1] 未实现 未实现 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 未实现 未实现 未实现 未实现 未实现 未实现

[1] WebGL 2 在FireFox每日构建版中默认开启。在正式版中通过 about:config 设置 webgl.enable-prototype-webgl2 为 true 来启用。

[2] To use an experimental implementation of WebGL 2 in Chrome, you have to start Chrome with the runtime flag --enable-unsafe-es3-apis.

另请参见

文档标签和贡献者

此页面的贡献者: yangchengjian, sunwanxin213
最后编辑者: yangchengjian,