JavaScript 2D 3D 图形库API webGL

快来打我* 2024-04-17 23:37 62阅读 0赞

**目录**

WebGL MDN API

指南和教程

指南

教程

示例

高级教程

资源

库

规范

浏览器兼容性

WebGL 1

Legend

WebGL 2

Legend

兼容性说明

Gecko备忘

参见

WebGL 中文版

多端阅读《WebGL 中文版》:

中文学习目录

--------------------

WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 [`<canvas>`][canvas] 元素中使用。

目前支持 WebGL 的浏览器有：[Firefox][] 4+, [Google Chrome][] 9+, [Opera][] 12+, [Safari ][Safari]5.1+ 和 [Internet Explorer][] 11+；然而, WebGL一些特性也需要用户的硬件设备支持。

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTU1NzMyMy02MGNmYTlhM2YxOGFmZDRmLmdpZj9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzkwNS9mb3JtYXQvd2VicA][]

# WebGL MDN API #

[https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL\_API][https_developer.mozilla.org_zh-CN_docs_Web_API_WebGL_API]

## 指南和教程 ##

下面，您将找到各种指南，以帮助您学习WebGL概念和教程，提供分步课程和示例。

### 指南  ###

[WebGL 中的数据][WebGL]

编写WebGL代码时使用的变量，缓冲区和其他类型数据的指南。

[WebGL 最佳实践][WebGL 1]

提示和建议，以帮助您提高WebGL内容的质量，性能和可靠性。

[使用扩展][Link 1]

WebGL 扩展的使用指南。

### 教程 ###

[WebGL 教程][WebGL 2]

WebGL 核心概念的初学者指南。如果您以前没有 WebGL 的经验，那么这是一个很好的起点。

### 示例 ###

[一个基础的 WebGL 的 2D 动画示例][WebGL _ 2D]

此示例演示了单色形状的简单动画。检查的主题是适应宽高比差异，从多个着色器集合构建着色器程序的功能，以及 WebGL 绘图的基础知识。

### 高级教程 ###

[WebGL 模型视图投影][WebGL 3]

详述了常用于显示3D物体视图的三种核心矩阵：模型，视图和投影矩阵。

[Web 中的矩阵运算][Web]

讲述 3D 变换矩阵工作原理的指南 —— 这也能在WebGL计算和CSS3变换中派上用场。

## 资源 ##

*  [Raw WebGL: WebGL入门][Raw WebGL_ WebGL] Nick Desaulniers 主讲的WebGL 基础知识。如果你从未接触过底层的图形编程，这是一个开始学习初级图形编程的好地方。
 *  [WebGL官网][WebGL 4] Khronos Group 的WebGL官方站点。
 *  [学习WebGL][WebGL 5] 一个关于如何使用WebGL的教程站点。
 *  [WebGL基础][WebGL 6] 一个关于WebGL的基础教程。
 *  [WebGL试炼][WebGL 7] 一个在线创建和分享WebGL的工具站点，非常适合快速创建一个原型或者体验一个成品。
 *  [WebGL Academy][] 通过一个 HTML/JavaScript 编辑器来学习一个基础的WebGl基础知识。
 *  [WebGL Stats][] 一个统计WebGL在不同平台上能力表现的网站。

### 库 ###

*  [glMatrix][] 创建高性能WebGL应用的JavaScript矩阵矢量库。
 *  [Sylvester][] 一个开源的 JavaScript矩阵矢量库，不仅为WebGL优化过，而且很健壮。

## 规范 ##

<table> 
 <thead> 
  <tr> 
   <th>Specification</th> 
   <th>Status</th> 
   <th>Comment</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.khronos.org/registry/webgl/specs/latest/1.0/" rel="nofollow">WebGL 1.0</a></td> 
   <td>Recommendation</td> 
   <td>初始定义。基于 OpenGL ES 2.0</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.khronos.org/registry/webgl/specs/latest/2.0/" rel="nofollow">WebGL 2.0</a></td> 
   <td>Editor's Draft</td> 
   <td>在 WebGL 1 基础上构建。基于 OpenGL ES 3.0</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.khronos.org/opengles/sdk/docs/man/xhtml/" rel="nofollow">OpenGL ES 2.0</a></td> 
   <td>Standard</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.khronos.org/opengles/sdk/docs/man3/html/" rel="nofollow">OpenGL ES 3.0</a></td> 
   <td>Standard</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## 浏览器兼容性 ##

### WebGL 1 ###

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out [https://github.com/mdn/browser-compat-data][https_github.com_mdn_browser-compat-data] and send us a pull request.

[Update compatibility data on GitHub][https_github.com_mdn_browser-compat-data]

<table> 
 <thead> 
  <tr> 
   <td>&nbsp;</td> 
   <th colspan="6">Desktop</th> 
   <th colspan="6">Mobile</th> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <th>Chrome</th> 
   <th>Edge</th> 
   <th>Firefox</th> 
   <th>Internet Explorer</th> 
   <th>Opera</th> 
   <th>Safari</th> 
   <th>Android webview</th> 
   <th>Chrome for Android</th> 
   <th>Firefox for Android</th> 
   <th>Opera for Android</th> 
   <th>Safari on iOS</th> 
   <th>Samsung Internet</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext" rel="nofollow"><code>WebGLRenderingContext</code></a></th> 
   <td>Full support9</td> 
   <td>Full support12 <p>Notes</p> 打开</td> 
   <td>Full support4</td> 
   <td>Full support11 <p>Notes</p> 打开</td> 
   <td>Full support12</td> 
   <td>Full support5.1</td> 
   <td>Full supportYes</td> 
   <td>Full support25</td> 
   <td>Full supportYes</td> 
   <td>Full support12</td> 
   <td>Full support8.1</td> 
   <td>Full supportYes</td> 
  </tr> 
 </tbody> 
</table>

### Legend ###

Full support

See implementation notes.

### WebGL 2 ###

[Update compatibility data on GitHub][https_github.com_mdn_browser-compat-data]

<table> 
 <thead> 
  <tr> 
   <td>&nbsp;</td> 
   <th colspan="6">Desktop</th> 
   <th colspan="6">Mobile</th> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <th>Chrome</th> 
   <th>Edge</th> 
   <th>Firefox</th> 
   <th>Internet Explorer</th> 
   <th>Opera</th> 
   <th>Safari</th> 
   <th>Android webview</th> 
   <th>Chrome for Android</th> 
   <th>Firefox for Android</th> 
   <th>Opera for Android</th> 
   <th>Safari on iOS</th> 
   <th>Samsung Internet</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL2RenderingContext" rel="nofollow"><code>WebGL2RenderingContext</code></a></th> 
   <td>Full support56</td> 
   <td>No supportNo</td> 
   <td>Full support51</td> 
   <td>No supportNo</td> 
   <td>Full support43</td> 
   <td>No supportNo</td> 
   <td>Full support58</td> 
   <td>Full support58</td> 
   <td>Full support51</td> 
   <td>Full support43</td> 
   <td>No supportNo</td> 
   <td>Full support7.0</td> 
  </tr> 
 </tbody> 
</table>

### Legend ###

Full support

No support

### 兼容性说明 ###

不仅是浏览器，GPU本身也需要支持该特性。比如 S3 纹理压缩 (S3TC) 只在基于图睿的GPU的设备上可用。大多数浏览器可以通过 `webgl` 这一上下文名称来使用 WebGL，但是旧的浏览器需要使用 `experimental-webgl`。另外，将来的 [WebGL 2][WebGL 2 1] 只会向后兼容，其使用的上下文名称为 `webgl2` 。

### Gecko备忘 ###

WebGL调试与检测

开始使用Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), 在测试中，这里有两个参数可以让你来控制WebGL性能:

`webgl.min_capability_mode`

一个以布尔值存储的属性。当它的值为`True`时，将会启用最小性能模式。当这个模式启用时，WebGL将会仅提供由其标准指定的最基本的功能集和性能支持。这样可以确保您的WebGL代码能够在性能的设备和浏览器上正确运行。它的默认值是`False`。

`webgl.disable_extensions`

一个以布尔值存储的属性。当它的值为`True`时，会禁用所有的WebGL拓展。它的默认值是`False`。

## 参见 ##

*  [Canvas(画布)][Canvas]
 *  [兼容性信息关于WebGL的扩展][WebGL 8]

#  WebGL 中文版 #

## 多端阅读《WebGL 中文版》: ##

*  **在PC/MAC上查看：**下载w3cschool客户端，进入客户端后通过搜索当前教程手册的名称并下载，就可以查看当前离线教程文档。[下载WebGL 中文版离线版客户端][WebGL 9]
 *  **在手机APP上查看：**请从各大安卓应用商店、苹果App Store搜索并下载w3cschool手机客户端，在App中搜索当前教程手册的名称查看。[下载w3cschool手机App端][w3cschool_App]
 *  **在手机上查看文档：**[https://m.w3cschool.cn/webgl/][https_m.w3cschool.cn_webgl]

## 中文学习目录  ##

1.  [WebGL 中文教程][WebGL 10]
2.    [WebGL 基础][WebGL 11]
    
    1.  [WebGL 基本原理][WebGL 12]
    2.  [WebGL 是如何工作的][WebGL 13]
    3.  [WebGL 着色器和 GLSL][WebGL _ GLSL]
3.    [图像处理][Link 2]
    
    1.  [WebGL 图像处理][WebGL 14]
    2.  [WebGL 图像处理（续）][WebGL 15]
4.    [2D 转换、旋转、伸缩、矩阵][2D]
    
    1.  [WebGL 2D 图像转换][WebGL 2D]
    2.  [WebGL 2D 图像旋转][WebGL 2D 1]
    3.  [WebGL 2D 图像伸缩][WebGL 2D 2]
    4.  [WebGL 2D 矩阵][WebGL 2D 3]
5.    [3D][]
    
    1.  [WebGL 3D 正交][WebGL 3D]
    2.  [WebGL 3D 透视][WebGL 3D 1]
    3.  [WebGL 3D 摄像机][WebGL 3D 2]
6.    [结构与组织][Link 3]
    
    1.  [WebGL 更少代码，更多乐趣][WebGL 16]
    2.  [WebGL 绘制多个东西][WebGL 17]
    3.  [WebGL 场景图][WebGL 18]
7.    [文本][Link 4]
    
    1.  [WebGL 文本 HTML][WebGL _ HTML]
    2.  [WebGL 文本 Canvas 2D][WebGL _ Canvas 2D]
    3.  [WebGL 文本 纹理][WebGL _]
    4.  [WebGL 文本 使用字符纹理][WebGL _ 1]

更多学习：[http://www.hewebgl.com/][http_www.hewebgl.com]

[canvas]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas
[Firefox]: https://developer.mozilla.org/en-US/Firefox
[Google Chrome]: http://www.google.com/chrome/
[Opera]: http://www.opera.com/
[Safari]: http://www.apple.com/safari/
[Internet Explorer]: http://windows.microsoft.com/en-us/internet-explorer/browser-ie
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTU1NzMyMy02MGNmYTlhM2YxOGFmZDRmLmdpZj9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzkwNS9mb3JtYXQvd2VicA]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTU1NzMyMy02MGNmYTlhM2YxOGFmZDRmLmdpZj9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzkwNS9mb3JtYXQvd2VicA
[https_developer.mozilla.org_zh-CN_docs_Web_API_WebGL_API]: https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API
[WebGL]: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Data
[WebGL 1]: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Using_Extensions
[WebGL 2]: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial
[WebGL _ 2D]: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Basic_2D_animation_example
[WebGL 3]: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection
[Web]: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web
[Raw WebGL_ WebGL]: https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage
[WebGL 4]: http://www.khronos.org/webgl/
[WebGL 5]: http://learningwebgl.com/blog/?page_id=1217
[WebGL 6]: http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/
[WebGL 7]: http://webglplayground.net/
[WebGL Academy]: http://www.webglacademy.com/
[WebGL Stats]: http://webglstats.com/
[glMatrix]: https://github.com/toji/gl-matrix
[Sylvester]: http://sylvester.jcoglan.com/
[https_github.com_mdn_browser-compat-data]: https://github.com/mdn/browser-compat-data
[WebGL 2 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL2RenderingContext
[Canvas]: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
[WebGL 8]: https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility
[WebGL 9]: https://www.w3cschool.cn/download/webgl.html#downloadpc
[w3cschool_App]: https://www.w3cschool.cn/download/
[https_m.w3cschool.cn_webgl]: https://m.w3cschool.cn/webgl/
[WebGL 10]: https://www.w3cschool.cn/webgl/vjxu1jt0.html
[WebGL 11]: https://www.w3cschool.cn/webgl/6fg21oh0.html
[WebGL 12]: https://www.w3cschool.cn/webgl/i4gf1oh1.html
[WebGL 13]: https://www.w3cschool.cn/webgl/157h1oh3.html
[WebGL _ GLSL]: https://www.w3cschool.cn/webgl/pezm1oh5.html
[Link 2]: https://www.w3cschool.cn/webgl/xd4t1oh6.html
[WebGL 14]: https://www.w3cschool.cn/webgl/rleo1oh7.html
[WebGL 15]: https://www.w3cschool.cn/webgl/atu21oha.html
[2D]: https://www.w3cschool.cn/webgl/zfue1ohc.html
[WebGL 2D]: https://www.w3cschool.cn/webgl/sxfr1ohd.html
[WebGL 2D 1]: https://www.w3cschool.cn/webgl/oc431ohg.html
[WebGL 2D 2]: https://www.w3cschool.cn/webgl/5te81ohi.html
[WebGL 2D 3]: https://www.w3cschool.cn/webgl/4wfo1ohk.html
[3D]: https://www.w3cschool.cn/webgl/rn1a1ohm.html
[WebGL 3D]: https://www.w3cschool.cn/webgl/c58x1ohn.html
[WebGL 3D 1]: https://www.w3cschool.cn/webgl/glnw1ohq.html
[WebGL 3D 2]: https://www.w3cschool.cn/webgl/4lwv1ohs.html
[Link 3]: https://www.w3cschool.cn/webgl/i3p51oh8.html
[WebGL 16]: https://www.w3cschool.cn/webgl/ocuj1ohu.html
[WebGL 17]: https://www.w3cschool.cn/webgl/ha5f1oh9.html
[WebGL 18]: https://www.w3cschool.cn/webgl/1sxt1ohb.html
[Link 4]: https://www.w3cschool.cn/webgl/2bmx1ohe.html
[WebGL _ HTML]: https://www.w3cschool.cn/webgl/m2641ohf.html
[WebGL _ Canvas 2D]: https://www.w3cschool.cn/webgl/9s721ohh.html
[WebGL _]: https://www.w3cschool.cn/webgl/8qtp1ohj.html
[WebGL _ 1]: https://www.w3cschool.cn/webgl/pa3b1ohl.html
[http_www.hewebgl.com]: http://www.hewebgl.com/