WebGL入门

WebGL

一、什么是WebGL

WebGL是一种JavaScript API，用于在不使用插件的情况下在任何兼容的网页浏览器中呈现交互式2D和3D图形。WebGL完全集成到浏览器的所有网页标准中，可将影像处理和效果的GPU加速使用方式当做网页Canvas的一部分。WebGL元素可以加入其他HTML元素之中并与网页或网页背景的其他部分混合。WebGL程序由JavaScript编写的句柄和OpenGL Shading Language（GLSL）编写的着色器代码组成，该语言类似于C或C++，并在电脑的图形处理器（GPU）上执行。WebGL由非营利Khronos Group设计和维护。

WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染（部分计算GPU），这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。总结一下，WebGL的本质 —— JavaScript操作OpenGL接口。

二、如何使用WebGL

1.WebGL需要依赖canvas这个载体获取对应的绘图上下文
2.WebGL API基于OpenGL ES，函数命名相对应
3.WebGL基于多缓冲区模型

三、WebGL的流程原理

简单说来，WebGL绘制过程包括以下三步：

1. 获取顶点坐标
2. 图元装配（即画出一个个三角形）
3. 光栅化（生成片元，即一个个像素点）