Revision 1128501 of WebGL

<div class="boxed translate-rendered">
<div>{{WebGLSidebar}}</div>

<div class="summary">
<p>WebGL (Web Graphics Library) 是一个用以渲染交互式3D和2D图形的无需插件且兼容下一代浏览器的 JavaScript API。WebGL 引用的JavaScript API遵守OpenGL ES2.0规范，通过HTML5中 &lt;canvas&gt; 元素实现功能。</p>
</div>

<p>目前支持 WebGL 的浏览器有：<a href="https://developer.mozilla.org/en-US/Firefox" title="Firefox 4 for developers">Firefox</a>&nbsp;4+, <a href="https://www.google.com/chrome/" title="https://www.google.com/chrome/">Google Chrome</a> 9+, <a href="https://www.opera.com/" title="https://www.opera.com/">Opera</a>&nbsp;12+, <a href="https://www.apple.com/safari/" title="https://www.apple.com/fr/safari/">Safari </a>5.1+ 和&nbsp;<a href="https://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="https://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+；然而, WebGL一些特性也需要用户的硬件设备支持。</p>

<p><code>&lt;canvas&gt;</code>元素也可以使用&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas 2D</a>&nbsp;来实现在网页中绘制2D图形。</p>

<h2 id="Reference">参考</h2>

<h3 id="Standard_interfaces">标准接口</h3>

<div class="index">
<ul>
 <li>{{domxref("WebGLRenderingContext")}}</li>
 <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li>
 <li>{{domxref("WebGLActiveInfo")}}</li>
 <li>{{domxref("WebGLBuffer")}}</li>
 <li>{{domxref("WebGLContextEvent")}}</li>
 <li>{{domxref("WebGLFramebuffer")}}</li>
 <li>{{domxref("WebGLProgram")}}</li>
 <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li>
 <li>{{domxref("WebGLRenderbuffer")}}</li>
 <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li>
 <li>{{domxref("WebGLShader")}}</li>
 <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
 <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li>
 <li>{{domxref("WebGLTexture")}}</li>
 <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li>
 <li>{{domxref("WebGLUniformLocation")}}</li>
 <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li>
</ul>
</div>

<h3 id="Extensions">扩展接口</h3>

<div class="index">
<ul>
 <li>{{domxref("ANGLE_instanced_arrays")}}</li>
 <li>{{domxref("EXT_blend_minmax")}}</li>
 <li>{{domxref("EXT_color_buffer_half_float")}}</li>
 <li>{{domxref("EXT_disjoint_timer_query")}}</li>
 <li>{{domxref("EXT_frag_depth")}}</li>
 <li>{{domxref("EXT_sRGB")}}</li>
 <li>{{domxref("EXT_shader_texture_lod")}}</li>
 <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
 <li>{{domxref("OES_element_index_uint")}}</li>
 <li>{{domxref("OES_standard_derivatives")}}</li>
 <li>{{domxref("OES_texture_float")}}</li>
 <li>{{domxref("OES_texture_float_linear")}}</li>
 <li>{{domxref("OES_texture_half_float")}}</li>
 <li>{{domxref("OES_texture_half_float_linear")}}</li>
 <li>{{domxref("OES_vertex_array_object")}}</li>
 <li>{{domxref("WEBGL_color_buffer_float")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
 <li>{{domxref("WEBGL_debug_renderer_info")}}</li>
 <li>{{domxref("WEBGL_debug_shaders")}}</li>
 <li>{{domxref("WEBGL_depth_texture")}}</li>
 <li>{{domxref("WEBGL_draw_buffers")}}</li>
 <li>{{domxref("WEBGL_lose_context")}}</li>
 <li>{{domxref("WebGLTimerQueryEXT")}}</li>
 <li>{{domxref("WebGLVertexArrayObjectOES")}}</li>
</ul>
</div>

<h3 id="Events">事件</h3>

<ul>
 <li>{{Event("webglcontextlost")}}</li>
 <li>{{Event("webglcontextrestored")}}</li>
 <li>{{Event("webglcontextcreationerror")}}</li>
</ul>

<h3 id="Constants_and_types">常量和类型</h3>

<ul>
 <li><a href="/zh-CN/docs/Web/API/WebGL_API/Constants"><u><font color="#0066cc">WebGL constants</font></u></a></li>
 <li><a href="/zh-CN/docs/Web/API/WebGL_API/Types"><u><font color="#0066cc">WebGL types</font></u></a></li>
</ul>

<h2 id="Guides_and_tutorials">指南和教程</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/API/WebGL_API/Tutorial">WebGL 教程</a>学习WebGL核心概念的入门指南。WebGL初学者很好的起点。</li>
 <li><a href="/zh-CN/docs/Web/API/WebGL_API/WebGL_best_practices">WebGL best practices</a> 大量技巧和建议来提高你的WebGL的知识。</li>
 <li><a href="/zh-CN/docs/Web/API/WebGL_API/Using_Extensions">Using extensions</a> 在WebGL如何进行有用的扩展。</li>
</ul>

<h3 id="Advanced_tutorials">进阶指南</h3>

<ul>
 <li><a href="/zh-CN/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL model view projection</a>详述了常用于显示3D物体视图的三种核心矩阵：模型，视图和投影矩阵。</li>
 <li><a href="/zh-CN/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a>讲述3D变换矩阵工作原理的指南，这也能在WebGL计算和CSS3变换中派上用场。</li>
</ul>

<h2 id="Resources">资源</h2>

<ul>
 <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a>&nbsp;Nick Desaulniers 主讲的WebGL 基础知识。如果你从未接触过底层的图形编程，这是一个开始学习初级图形编程的好地方。</li>
 <li><a href="https://www.khronos.org/webgl/" title="https://www.khronos.org/webgl/">Khronos WebGL site</a>&nbsp;Khronos Group 的WebGl 官方站点。</li>
 <li><a href="https://learningwebgl.com/blog/?page_id=1217" title="https://learningwebgl.com/blog/">Learning WebGL</a> 一个关于如何使用WebGL的教程站点。</li>
 <li><a href="https://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="https://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> 一个关于WebGL的初级教程。</li>
 <li><a href="https://webglplayground.net" title="https://webglplayground.net">WebGL playground</a> 一个在线创建和分享WebGL的工具站点，非常适合快速创建一个原型或者体验一个成品。</li>
 <li><a href="https://www.webglacademy.com" title="https://www.webglacademy.com">WebGL Academy</a> 通过一个 HTML/JavaScript 编辑器来学习一个基础的WebGl基础知识。</li>
</ul>

<h3 id="Libraries">库</h3>

<ul>
 <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a>&nbsp;创建高性能WebGL应用的JavaScript矩阵矢量库。</li>
 <li><a href="https://sylvester.jcoglan.com/" title="https://sylvester.jcoglan.com/">Sylvester</a>&nbsp;一个开源的 JavaScript矩阵矢量库，不仅为WebGL优化过，而且很健壮。</li>
</ul>

<h2 id="Specifications">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规格</th>
   <th scope="col">状态</th>
   <th scope="col">建议</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('WebGL')}}</td>
   <td>{{Spec2('WebGL')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('WebGL2')}}</td>
   <td>{{Spec2('WebGL2')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">浏览器兼容性</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>9</td>
   <td>11</td>
   <td>12&nbsp;(experiment)</td>
   <td>5.1&nbsp;(experiment)</td>
  </tr>
  <tr>
   <td><a href="https://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="https://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td>
   <td>{{CompatGeckoDesktop("6.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="https://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="https://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td>
   <td>{{CompatGeckoDesktop("10.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td>
   <td>{{CompatGeckoDesktop("13.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td>
   <td>{{CompatGeckoDesktop("15.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</td>
   <td>{{CompatGeckoDesktop("9.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Chrome for Android</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>4</td>
   <td>25 (experiment)</td>
   <td>{{CompatNo}}</td>
   <td>12&nbsp;(experiment)</td>
   <td>8.1</td>
  </tr>
  <tr>
   <td><code>drawingBufferWidth</code>&nbsp;and&nbsp;<code>drawingBufferHeight</code>&nbsp;attributes</td>
   <td>{{CompatGeckoMobile("9.0")}}</td>
   <td>25</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="https://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="https://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td>
   <td>{{CompatGeckoMobile("6.0")}}</td>
   <td>25</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="https://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="https://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td>
   <td>{{CompatGeckoMobile("10.0")}}</td>
   <td>25</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td>
   <td>{{CompatGeckoMobile("13.0")}}</td>
   <td>25</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>OES_element_index_uint</code></td>
   <td>{{CompatUnknown}}</td>
   <td>25</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>OES_vertex_array_object</code></td>
   <td>{{CompatUnknown}}</td>
   <td>25</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td>
   <td>{{CompatGeckoMobile("15.0")}}</td>
   <td>25<br />
    prefixed with WEBKIT_</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>WEBKIT_EXT_texture_filter_nisotropic</code></td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h5 id="1_这个特性目前在试验阶段.">[1] 这个特性目前在试验阶段.</h5>

<p>&nbsp;</p>

<h3 id="兼容性说明">兼容性说明</h3>

<p>除了浏览器，GPU本身也需要支持这个特性. 举个例子, S3 纹理压缩 (S3TC) 只可以用在基于图睿的GPU处理器. 大多数浏览器支持&nbsp;<code>webgl</code> context name, 但是旧的浏览器支持&nbsp;<code>experimental-webgl更好些</code>. 除此之外, 即将来临的&nbsp;WebGL 2 只会向后兼容，在未来将使用新的上下文名称&nbsp;<code>experimental-webgl2</code>&nbsp;(目前正在测试中).</p>

<h3 id="Gecko备忘">Gecko备忘</h3>

<h4 id="WebGL调试与检测">WebGL调试与检测</h4>

<p>开始使用Gecko 10.0 {{geckoRelease("10.0")}}, 在测试中，这里有两个参数可以让你来控制WebGL性能:</p>

<dl>
 <dt><code>webgl.min_capability_mode</code></dt>
 <dd>一个以布尔值存储的属性。当它的值为<code>True</code>时，将会启用最小性能模式。当这个模式启用时。WebGL将会仅提供由其标准指定的最基本的功能集和性能支持。这样可以确保您的WebGL代码能够在性能的设备和浏览器上正确运行。它的默认值是<code>False</code>。</dd>
 <dt><code>webgl.disable_extensions</code></dt>
 <dd>一个以布尔值存储的属性。当它的值为<code>True</code>时，会禁用所有的WebGL拓展。它的默认值是<code>False。</code></dd>
</dl>

<h2 id="See_also">参见</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API">Canvas(画布)</a></li>
 <li><a href="/zh-CN/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">兼容性信息关于WebGL的扩展</a></li>
</ul>
</div>