WebGL

  • 版本网址缩略名: WebGL
  • 版本标题: WebGL
  • 版本 id: 6177
  • 创建于:
  • 创建者: bean
  • 是否是当前版本?
  • 评论 5 words added, 2 words removed

修订内容

WebGL 提供了一个几近完全符合 OpenGL ES 2.0 标准的 API 库,它能够在 HTML5 的 canvas 元素中被使用,为互联网浏览器带来 3D 图形支持。目前对 WebGL 提供支持的浏览器有 Firefox 4Google Chrome 9。

开发主题

初识 WebGL
如何创建 WebGL 内容
使用 WebGL 创建 2D 内容
如何使用 WebGL 渲染简单的平面图形。
Using shaders to apply color in WebGL
Demonstrates how to add color to shapes using shaders.
使用 WebGL 操纵对象
Shows how to rotate and translate objects to create simple animations.
使用 WebGL 创建 3D 对象
演示如何创建并操纵一个 3D 对象(以一个盒子为例)。
在 WebGL 中使用纹理
Demonstrates how to map textures onto the faces of an object.
在 WebGL 中运用光照
如何在您的 WebGL 内容中模拟光照效果。
Animating textures in WebGL
Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.
WebGL 最佳练习
关于改进您 WebGL 内容的技巧与相关建议。
Cross-domain textures
Information about loading textures from domains other than the one from which your content was loaded.
使用扩展
如何在 WebGL 中使用扩展(extension)。

资源

WebGL Specification
定义 WebGL 标准。
Khronos WebGL site
Khronos Group 关于 WebGL 的主站点。
Learning WebGL
一个提供使用 WebGL 教程的站点。
The WebGL Cookbook
A web site with handy recipes for writing WebGL code.
Planet WebGL
A feed aggregator for people involved in the WebGL community.
ewgl-matrices
A blazing fast matrix library for WebGL
glMatrix
JavaScript Matrix and Vector library for High Performance WebGL apps
mjs
A JavaScript vector and matrix math library, optimized for WebGL usage.
Sylvester
An open source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.
WebGL playground
An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.

浏览器兼容性

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("2.0") }} 9 {{ CompatNo() }} {{ CompatNo() }} {{ CompatNightly() }}
Context name experimental-webgl experimental-webgl n/a n/a experimental-webgl
OES_texture_float {{ CompatGeckoDesktop("6.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
OES_standard_derivatives {{ CompatGeckoDesktop("10.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
EXT_texture_filter_anisotropic {{ CompatGeckoDesktop("13.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
WEBGL_compressed_texture_s3tc {{ CompatGeckoDesktop("15.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
drawingBufferWidth and drawingBufferHeight attributes {{ CompatGeckoDesktop("9.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Context name {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
OES_texture_float {{ CompatGeckoMobile("6.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
OES_standard_derivatives {{ CompatGeckoMobile("10.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
EXT_texture_filter_anisotropic {{ CompatGeckoMobile("13.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
WEBGL_compressed_texture_s3tc {{ CompatGeckoMobile("15.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
drawingBufferWidth and drawingBufferHeight attributes {{ CompatGeckoMobile("9.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Gecko 备忘

WebGL debugging and testing

Starting with Gecko 10.0 {{ geckoRelease("10.0") }}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:

webgl.min_capability_mode
A Boolean property that, when true, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is false by default.
webgl.disable_extensions
A Boolean property that, when true, disables all WebGL extensions. This is false by default.

{{ HTML5ArticleTOC() }}

{{ languages( {"es": "es/WebGL", "de": "de/WebGL", "ja": "ja/WebGL" } ) }}

修订版来源

<p>WebGL 提供了一个几近完全符合 OpenGL ES 2.0 标准的 API 库,它能够在 HTML5 的 <a href="/zh-cn/HTML/Canvas" title="cn/HTML/Canvas"><code>canvas</code></a> 元素中被使用,为互联网浏览器带来 3D 图形支持。目前对 WebGL 提供支持的浏览器有 <a href="/en/Firefox_4_for_developers" title="en/Firefox 4 for developers">Firefox 4</a> 和 <a class="external" href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9。</p>
<table class="mainpage-table"> <tbody> <tr> <td width="50%"> <h2>开发主题</h2> <dl> <dt><a href="/cn/WebGL/Getting_started_with_WebGL" title="cn/WebGL/Getting_started_with_WebGL">初识 WebGL</a></dt> <dd>如何创建 WebGL 内容</dd> <dt><a href="/cn/WebGL/Adding_2D_content_to_a_WebGL_context" title="cn/WebGL/Adding_2D_content_to_a_WebGL_context">使用 WebGL 创建 2D 内容</a></dt> <dd>如何使用 WebGL 渲染简单的平面图形。</dd> <dt><a href="/en/WebGL/Using_shaders_to_apply_color_in_WebGL" title="en/WebGL/Using shaders to apply color in WebGL">Using shaders to apply color in WebGL</a></dt> <dd>Demonstrates how to add color to shapes using shaders.</dd> <dt><a href="/cn/WebGL/Animating_objects_with_WebGL" title="cn/WebGL/Animating_objects_with_WebGL">使用 WebGL 操纵对象</a></dt> <dd>Shows how to rotate and translate objects to create simple animations.</dd> <dt><a href="/cn/WebGL/Creating_3D_objects_using_WebGL" title="cn/WebGL/Creating_3D_objects_using_WebGL">使用 WebGL 创建 3D 对象</a></dt> <dd>演示如何创建并操纵一个 3D 对象(以一个盒子为例)。</dd> <dt><a href="/cn/WebGL/Using_textures_in_WebGL" title="cn/WebGL/Using_textures_in_WebGL">在 WebGL 中使用纹理</a></dt> <dd>Demonstrates how to map textures onto the faces of an object.</dd> <dt><a href="/cn/WebGL/Lighting_in_WebGL" title="cn/WebGL/Lighting_in_WebGL">在 WebGL 中运用光照</a></dt> <dd>如何在您的 WebGL 内容中模拟光照效果。</dd> <dt><a href="/en/WebGL/Animating_textures_in_WebGL" title="en/WebGL/Animating textures in WebGL">Animating textures in WebGL</a></dt> <dd>Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.</dd> <dt><a href="/cn/WebGL/WebGL_best_practices" title="cn/WebGL/WebGL_best_practices">WebGL 最佳练习</a></dt> <dd>关于改进您 WebGL 内容的技巧与相关建议。</dd> <dt><a href="/en/WebGL/Cross-Domain_Textures" title="en/WebGL/Cross-Domain Textures">Cross-domain textures</a></dt> <dd>Information about loading textures from domains other than the one from which your content was loaded.</dd> <dt><a href="/cn/WebGL/Using_Extensions" title="cn/WebGL/Using_Extensions">使用扩展</a></dt> <dd>如何在 WebGL 中使用扩展(extension)。</dd> </dl> </td> <td width="50%"> <h2>资源</h2> <dl> <dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/" title="https://www.khronos.org/registry/webgl/specs/1.0/">WebGL Specification</a></dt> <dd>定义 WebGL 标准。</dd> <dt><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a></dt> <dd>Khronos Group 关于 WebGL 的主站点。</dd> <dt><a class="external" href="http://learningwebgl.com/blog/" title="http://learningwebgl.com/blog/">Learning WebGL</a></dt> <dd>一个提供使用 WebGL 教程的站点。</dd> <dt><a class="external" href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">The WebGL Cookbook</a></dt> <dd>A web site with handy recipes for writing WebGL code.</dd> <dt><a class="external" href="http://planet-webgl.org/" title="http://planet-webgl.org/">Planet WebGL</a></dt> <dd>A feed aggregator for people involved in the WebGL community.</dd> <dt><a class="external" href="http://code.google.com/p/ewgl-matrices/" title="http://code.google.com/p/ewgl-matrices/">ewgl-matrices</a></dt> <dd>A blazing fast matrix library for WebGL</dd> <dt><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a></dt> <dd>JavaScript Matrix and Vector library for High Performance WebGL apps</dd> <dt><a class="external" href="http://code.google.com/p/webgl-mjs/" title="http://code.google.com/p/webgl-mjs/">mjs</a></dt> <dd><span>A JavaScript vector and matrix math library, optimized for WebGL usage.</span></dd> <dt><a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a></dt> <dd>An open source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.</dd> <dt><a class="external" href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a></dt> <dd>An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</dd> </dl> </td> </tr> </tbody>
</table>
<h2>浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<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>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNightly() }}</td> </tr> <tr> <td>Context name</td> <td><code>experimental-webgl</code></td> <td><code>experimental-webgl</code></td> <td>n/a</td> <td>n/a</td> <td><code>experimental-webgl</code></td> </tr> <tr> <td><a class="external" href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://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 class="external" href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://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="/en/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="en/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="/en/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="en/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>Android</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td>Context name</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td><a class="external" href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td> <td>{{ CompatGeckoMobile("6.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td><a class="external" href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td> <td>{{ CompatGeckoMobile("10.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td><a class="external" href="/en/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="en/WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td> <td>{{ CompatGeckoMobile("13.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td><a class="external" href="/en/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="en/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td> <td>{{ CompatGeckoMobile("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>{{ CompatGeckoMobile("9.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3>Gecko 备忘</h3>
<h5>WebGL debugging and testing</h5>
<p>Starting with Gecko 10.0 {{ geckoRelease("10.0") }}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:</p>
<dl> <dt><code>webgl.min_capability_mode</code></dt> <dd>A Boolean property that, when <code>true</code>, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is <code>false</code> by default.</dd> <dt><code>webgl.disable_extensions</code></dt> <dd>A Boolean property that, when <code>true</code>, disables all WebGL extensions. This is <code>false</code> by default.</dd>
</dl>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( {"es": "es/WebGL", "de": "de/WebGL", "ja": "ja/WebGL" } ) }}</p>
恢复到这个版本