diff options
Diffstat (limited to 'files/zh-cn/web/api/webgl2renderingcontext/index.html')
-rw-r--r-- | files/zh-cn/web/api/webgl2renderingcontext/index.html | 272 |
1 files changed, 272 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/webgl2renderingcontext/index.html b/files/zh-cn/web/api/webgl2renderingcontext/index.html new file mode 100644 index 0000000000..faac90295a --- /dev/null +++ b/files/zh-cn/web/api/webgl2renderingcontext/index.html @@ -0,0 +1,272 @@ +--- +title: WebGL2RenderingContext +slug: Web/API/WebGL2RenderingContext +translation_of: Web/API/WebGL2RenderingContext +--- +<div>{{APIRef("WebGL")}} {{SeeCompatTable}}</div> + +<p><strong>WebGL2RenderingContext</strong> 接口在底层使用了OpenGL ES 3.0 为 HTML 的 {{HTMLElement("canvas")}} 元素提供了绘图上下文。</p> + +<p>要获取该接口的实例对象需要调用一个 <canvas> 标签对象的 {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} 函数,并将 "webgl2" 作为参数传递:</p> + +<pre class="brush: js notranslate">var canvas = document.getElementById('myCanvas'); +var gl = canvas.getContext('webgl2'); +</pre> + +<div class="note"> +<p>WebGL 2 是 WebGL 1 的扩展。 <code>WebGL2RenderingContext</code> 接口实现了 {{domxref("WebGLRenderingContext")}} 接口的所有成员。 有一些 WebGL 1 上下文中的方法在使用 WebGL 2 上下文的时候可以接受附加值。 您可以通过 WebGL 1 的参考页了解这些信息。</p> +</div> + +<p>这个 <a href="/en-US/docs/Web/API/WebGL_API/Tutorial" title="WebGL tutorial">WebGL 教程</a> 中提供了关于如何开始使用 WebGL 的更多信息、示例以及资源。</p> + +<h2 id="常量">常量</h2> + +<p>请看 <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL 常量</a> 页面。</p> + +<h2 id="状态信息">状态信息</h2> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.getIndexedParameter()")}}</dt> + <dd>返回指定目标的索引值。</dd> +</dl> + +<h2 id="缓冲区">缓冲区</h2> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.copyBufferSubData()")}}</dt> + <dd>将缓冲区的部分数据复制到另一个缓冲区。</dd> + <dt>{{domxref("WebGL2RenderingContext.getBufferSubData()")}}</dt> + <dd>从缓冲区中读取数据,然后将其写入到 {{jsxref("ArrayBuffer")}} 或 {{jsxref("SharedArrayBuffer")}} 中。</dd> +</dl> + +<h2 id="帧缓冲区">帧缓冲区</h2> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.blitFramebuffer()")}}</dt> + <dd>将一个像素块从读取帧缓冲区传输到绘制帧缓冲区。</dd> + <dt>{{domxref("WebGL2RenderingContext.framebufferTextureLayer()")}}</dt> + <dd>附着一个单层的材质到帧缓冲区。</dd> + <dt>{{domxref("WebGL2RenderingContext.invalidateFramebuffer()")}}</dt> + <dd>使附着到缓冲区的内容失效。</dd> + <dt>{{domxref("WebGL2RenderingContext.invalidateSubFramebuffer()")}}</dt> + <dd>使附着到缓冲区的部分内容失效。</dd> + <dt>{{domxref("WebGL2RenderingContext.readBuffer()")}}</dt> + <dd>选择一个颜色缓冲作为像素的source。</dd> +</dl> + +<h2 id="渲染缓冲区">渲染缓冲区</h2> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.getInternalformatParameter()")}}</dt> + <dd>Returns information about implementation-dependent support for internal formats.</dd> + <dt>{{domxref("WebGL2RenderingContext.renderbufferStorageMultisample()")}}</dt> + <dd>Creates and initializes a renderbuffer object's data store and allows specifying the number of samples to be used.</dd> +</dl> + +<h2 id="纹理">纹理</h2> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.texStorage2D()")}}</dt> + <dd>Specifies all levels of two-dimensional texture storage.</dd> + <dt>{{domxref("WebGL2RenderingContext.texStorage3D()")}}</dt> + <dd>Specifies all levels of a three-dimensional texture or two-dimensional array texture.</dd> + <dt>{{domxref("WebGL2RenderingContext.texImage3D()")}}</dt> + <dd>Specifies a three-dimensional texture image.</dd> + <dt>{{domxref("WebGL2RenderingContext.texSubImage3D()")}}</dt> + <dd>Specifies a sub-rectangle of the current 3D texture.</dd> + <dt>{{domxref("WebGL2RenderingContext.copyTexSubImage3D()")}}</dt> + <dd>Copies pixels from the current <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLFramebuffer" title="The WebGLFramebuffer interface is part of the WebGL API and represents a collection of buffers that serve as a rendering destination."><code>WebGLFramebuffer</code></a> into an existing 3D texture sub-image.</dd> + <dt>{{domxref("WebGL2RenderingContext.compressedTexImage3D()")}}</dt> + <dd>Specifies a three-dimensional texture image in a compressed format.</dd> + <dt>{{domxref("WebGL2RenderingContext.compressedTexSubImage3D()")}}</dt> + <dd>Specifies a three-dimensional sub-rectangle for a texture image in a compressed format.</dd> +</dl> + +<h2 id="程序和着色器">程序和着色器</h2> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.getFragDataLocation()")}}</dt> + <dd>Returns the binding of color numbers to user-defined varying out variables.</dd> +</dl> + +<h2 id="Uniforms_和_Attributes">Uniforms 和 Attributes</h2> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.uniform()", "WebGL2RenderingContext.uniform[1234][fiu][v]()")}}</dt> + <dd>指定一个uniform变量。</dd> + <dt>{{domxref("WebGL2RenderingContext.uniformMatrix()", "WebGL2RenderingContext.uniformMatrix[1234][fv]()")}}</dt> + <dd>指定一个uniform矩阵变量。</dd> + <dt>{{domxref("WebGL2RenderingContext.vertexAttribI()", "WebGL2RenderingContext.vertexAttribI[iuv]()")}}</dt> + <dd>Methods specifying integer values for generic vertex attributes.</dd> + <dt>{{domxref("WebGL2RenderingContext.vertexAttribIPointer()")}}</dt> + <dd>Specifies integer data formats and locations of vertex attributes in a vertex attributes array.</dd> +</dl> + +<h2 id="绘图缓冲区">绘图缓冲区</h2> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</dt> + <dd>Modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with {{domxref("WebGL2RenderingContext.drawArraysInstanced()", "gl.drawArraysInstanced()")}} and {{domxref("WebGL2RenderingContext.drawElementsInstanced()", "gl.drawElementsInstanced()")}}.</dd> + <dt>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</dt> + <dd>Renders primitives from array data. In addition, it can execute multiple instances of the range of elements.</dd> + <dt>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</dt> + <dd>Renders primitives from array data. In addition, it can execute multiple instances of a set of elements.</dd> + <dt>{{domxref("WebGL2RenderingContext.drawRangeElements()")}}</dt> + <dd>Renders primitives from array data in a given range.</dd> + <dt>{{domxref("WebGL2RenderingContext.drawBuffers()")}}</dt> + <dd>Specifies a list of color buffers to be drawn into.</dd> + <dt>{{domxref("WebGL2RenderingContext.clearBuffer()", "WebGL2RenderingContext.clearBuffer[fiuv]()")}}</dt> + <dd>Clears buffers from the currently bound framebuffer.</dd> +</dl> + +<h2 id="查询对象">查询对象</h2> + +<p>Methods for working with {{domxref("WebGLQuery")}} objects.</p> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.createQuery()")}}</dt> + <dd>创建一个新的 {{domxref("WebGLQuery")}} 对象.</dd> + <dt>{{domxref("WebGL2RenderingContext.deleteQuery()")}}</dt> + <dd>删除一个指定的 {{domxref("WebGLQuery")}} 对象。</dd> + <dt>{{domxref("WebGL2RenderingContext.isQuery()")}}</dt> + <dd>Returns <code>true</code> if a given object is a valid {{domxref("WebGLQuery")}} object.</dd> + <dt>{{domxref("WebGL2RenderingContext.beginQuery()")}}</dt> + <dd>开始一个异步查询。</dd> + <dt>{{domxref("WebGL2RenderingContext.endQuery()")}}</dt> + <dd>Marks the end of an asynchronous query.</dd> + <dt>{{domxref("WebGL2RenderingContext.getQuery()")}}</dt> + <dd>返回一个指定目标的 {{domxref("WebGLQuery")}} 对象。</dd> + <dt>{{domxref("WebGL2RenderingContext.getQueryParameter()")}}</dt> + <dd>返回关于一个查询的信息。</dd> +</dl> + +<h2 id="采样对象">采样对象</h2> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.createSampler()")}}</dt> + <dd>Creates a new {{domxref("WebGLSampler")}} object.</dd> + <dt>{{domxref("WebGL2RenderingContext.deleteSampler()")}}</dt> + <dd>Deletes a given {{domxref("WebGLSampler")}} object.</dd> + <dt>{{domxref("WebGL2RenderingContext.bindSampler()")}}</dt> + <dd>Binds a given {{domxref("WebGLSampler")}} to a texture unit.</dd> + <dt>{{domxref("WebGL2RenderingContext.isSampler()")}}</dt> + <dd>Returns <code>true</code> if a given object is a valid {{domxref("WebGLSampler")}} object.</dd> + <dt>{{domxref("WebGL2RenderingContext.samplerParameter()", "WebGL2RenderingContext.samplerParameter[if]()")}}</dt> + <dd>Sets sampler parameters.</dd> + <dt>{{domxref("WebGL2RenderingContext.getSamplerParameter()")}}</dt> + <dd>Returns sampler parameter information.</dd> +</dl> + +<h2 id="同步对象">同步对象</h2> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.fenceSync()")}}</dt> + <dd>创建一个 {{domxref("WebGLSync")}} 对象并插入到 GL 命令流中。</dd> + <dt>{{domxref("WebGL2RenderingContext.isSync()")}}</dt> + <dd>Returns <code>true</code> if the passed object is a valid {{domxref("WebGLSync")}} object.</dd> + <dt>{{domxref("WebGL2RenderingContext.deleteSync()")}}</dt> + <dd>删除一个指定的 {{domxref("WebGLSync")}} 对象。</dd> + <dt>{{domxref("WebGL2RenderingContext.clientWaitSync()")}}</dt> + <dd> + <p>Blocks and waits for a {{domxref("WebGLSync")}} object to become signaled or a given timeout to be passed.</p> + </dd> + <dt>{{domxref("WebGL2RenderingContext.waitSync()")}}</dt> + <dd>Returns immediately, but waits on the GL server until the given {{domxref("WebGLSync")}} object is signaled.</dd> + <dt>{{domxref("WebGL2RenderingContext.getSyncParameter()")}}</dt> + <dd>根据一个 {{domxref("WebGLSync")}} 对象返回参数信息。</dd> +</dl> + +<h2 id="变换反馈">变换反馈</h2> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.createTransformFeedback()")}}</dt> + <dd>创建并初始化 {{domxref("WebGLTransformFeedback")}} 对象。</dd> + <dt>{{domxref("WebGL2RenderingContext.deleteTransformFeedback()")}}</dt> + <dd>删除一个指定的 {{domxref("WebGLTransformFeedback")}} 对象。</dd> + <dt>{{domxref("WebGL2RenderingContext.isTransformFeedback()")}}</dt> + <dd>Returns <code>true</code> if the passed object is a valid {{domxref("WebGLTransformFeedback")}} object.</dd> + <dt>{{domxref("WebGL2RenderingContext.bindTransformFeedback()")}}</dt> + <dd>Binds a passed {{domxref("WebGLTransformFeedback")}} object to the current GL state.</dd> + <dt>{{domxref("WebGL2RenderingContext.beginTransformFeedback()")}}</dt> + <dd>Starts a transform feedback operation.</dd> + <dt>{{domxref("WebGL2RenderingContext.endTransformFeedback()")}}</dt> + <dd>Ends a transform feedback operation.</dd> + <dt>{{domxref("WebGL2RenderingContext.transformFeedbackVaryings()")}}</dt> + <dd>Specifies values to record in {{domxref("WebGLTransformFeedback")}} buffers.</dd> + <dt>{{domxref("WebGL2RenderingContext.getTransformFeedbackVarying()")}}</dt> + <dd>Returns information about varying variables from {{domxref("WebGLTransformFeedback")}} buffers.</dd> + <dt>{{domxref("WebGL2RenderingContext.pauseTransformFeedback()")}}</dt> + <dd>Pauses a transform feedback operation.</dd> + <dt>{{domxref("WebGL2RenderingContext.resumeTransformFeedback()")}}</dt> + <dd>Resumes a transform feedback operation.</dd> +</dl> + +<h2 id="Uniform_缓冲对象">Uniform 缓冲对象</h2> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.bindBufferBase()")}}</dt> + <dd>Binds a given {{domxref("WebGLBuffer")}} to a given binding point (<code>target</code>) at a given <code>index</code>.</dd> + <dt>{{domxref("WebGL2RenderingContext.bindBufferRange()")}}</dt> + <dd>Binds a range of a given {{domxref("WebGLBuffer")}} to a given binding point (<code>target</code>) at a given <code>index</code>.</dd> + <dt>{{domxref("WebGL2RenderingContext.getUniformIndices()")}}</dt> + <dd> + <p>Retrieves the indices of a number of uniforms within a {{domxref("WebGLProgram")}}.</p> + </dd> + <dt>{{domxref("WebGL2RenderingContext.getActiveUniforms()")}}</dt> + <dd>Retrieves information about active uniforms within a {{domxref("WebGLProgram")}}.</dd> + <dt>{{domxref("WebGL2RenderingContext.getUniformBlockIndex()")}}</dt> + <dd>Retrieves the index of a uniform block within a {{domxref("WebGLProgram")}}.</dd> + <dt>{{domxref("WebGL2RenderingContext.getActiveUniformBlockParameter()")}}</dt> + <dd>Retrieves information about an active uniform block within a {{domxref("WebGLProgram")}}.</dd> + <dt>{{domxref("WebGL2RenderingContext.getActiveUniformBlockName()")}}</dt> + <dd>Retrieves the name of the active uniform block at a given index within a {{domxref("WebGLProgram")}}.</dd> + <dt>{{domxref("WebGL2RenderingContext.uniformBlockBinding()")}}</dt> + <dd>Assigns binding points for active uniform blocks.</dd> +</dl> + +<h2 id="顶点数组对象">顶点数组对象</h2> + +<p>Methods for working with {{domxref("WebGLVertexArrayObject")}} (VAO) objects.</p> + +<dl> + <dt>{{domxref("WebGL2RenderingContext.createVertexArray()")}}</dt> + <dd>创建一个新的 {{domxref("WebGLVertexArrayObject")}}。</dd> + <dt>{{domxref("WebGL2RenderingContext.deleteVertexArray()")}}</dt> + <dd>删除一个指定的 {{domxref("WebGLVertexArrayObject")}}。</dd> + <dt>{{domxref("WebGL2RenderingContext.isVertexArray()")}}</dt> + <dd>如果一个指定的 {{domxref("WebGLVertexArrayObject")}} 对象有效则返回 <code>true</code>。</dd> + <dt>{{domxref("WebGL2RenderingContext.bindVertexArray()")}}</dt> + <dd>绑定一个指定的 {{domxref("WebGLVertexArrayObject")}} 到缓冲。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7", "WebGL2RenderingContext")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表格由结构化数据生成。如果你想贡献数据,可以看看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送 pull request.</p> +</div> + +<p>{{Compat("api.WebGL2RenderingContext")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("WebGLRenderingContext")}}</li> +</ul> |