目录

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> 元素中使用。

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

WebGL MDN API

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

指南和教程

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

指南 

WebGL 中的数据

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

WebGL 最佳实践

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

使用扩展

WebGL 扩展的使用指南。

教程

WebGL 教程

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

示例

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

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

高级教程

WebGL 模型视图投影

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

Web 中的矩阵运算

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

资源

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

库

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

规范

 

 

浏览器兼容性

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 and send us a pull request.

Update compatibility data on GitHub

Legend

Full support 

Full support

See implementation notes.

See implementation notes.

WebGL 2

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 and send us a pull request.

Update compatibility data on GitHub

Legend

Full support 

Full support

No support 

No support

兼容性说明

不仅是浏览器，GPU本身也需要支持该特性。比如 S3 纹理压缩 (S3TC) 只在基于图睿的GPU的设备上可用。大多数浏览器可以通过 webgl 这一上下文名称来使用 WebGL，但是旧的浏览器需要使用 experimental-webgl。另外，将来的 WebGL 2 只会向后兼容，其使用的上下文名称为 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(画布)
• 兼容性信息关于WebGL的扩展

 WebGL 中文版

多端阅读《WebGL 中文版》:

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

中文学习目录 

1. WebGL 中文教程

2.   WebGL 基础

   1. WebGL 基本原理

   2. WebGL 是如何工作的

   3. WebGL 着色器和 GLSL

3.   图像处理

   1. WebGL 图像处理

   2. WebGL 图像处理（续）

4.   2D 转换、旋转、伸缩、矩阵

   1. WebGL 2D 图像转换

   2. WebGL 2D 图像旋转

   3. WebGL 2D 图像伸缩

   4. WebGL 2D 矩阵

5.   3D

   1. WebGL 3D 正交

   2. WebGL 3D 透视

   3. WebGL 3D 摄像机

6.   结构与组织

   1. WebGL 更少代码，更多乐趣

   2. WebGL 绘制多个东西

   3. WebGL 场景图

7.   文本

   1. WebGL 文本 HTML

   2. WebGL 文本 Canvas 2D

   3. WebGL 文本 纹理

   4. WebGL 文本 使用字符纹理

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