---
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>要获取该接口的实例对象需要调用一个  &lt;canvas&gt;  标签对象的 {{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>