我们希望3D图像也能在网页中实现，这样我们可以利用网页这个快捷的传播途径，进行更多可能的创作。随着HTML5的到来，WebGL的出现使得其成为可能，WebGL使得JS支持硬件3D加速渲染（同样的CSS3也得到了硬件3D加速渲染和动画）。
HTML5中的Canvas本身搭配的是2D绘图的API，但如果使用一些库，它也可以用于3D渲染，在不支持WebGL和CSS 3D的平台上，这是通常的代替方法。

3D图形基础

在我们开始了解WebGL之前，我们首先要掌握一些3D绘图的基本知识。

3D计算机图形是使用三个维度来表示几何数据（通常是笛卡尔坐标系），并存储在计算机中，用于计算和绘制成屏幕上2D图像的一类图形。它可以被存储起来随时浏览，也可用于实时显示。

3D图形元素

一个3D图形不是我们想象的，一个创建就可以完完整整体现在你的眼前。
可能你一开始使用Three.js（一个封装了WebGL API的库）去写一些东西，你会觉得很疑惑，为什么我们需要创建很多个对象，最后再把它们组合在一起呢？这样是不是太麻烦了？
其实在其他图形编程里，往往也是使用这样的过程方法，把一个物体分成基本的形状和不同的材质元素等等，最后组合在一起，这样也是为了方便我们去编写不同的结果。

一个3D图形元素往往由下面这些元素组成：

3D坐标系：没有坐标，我们就无法确定每个物体放置的位置。
网格、多边形与顶点：这些都是我们确定物体形状的东西。
材质、纹理与光源：这些是为了确定物体的外观。
变换与矩阵：方便我们去进行物理运动的计算。
相机、透视、视口与投影：这些确定了我们肉眼看到的绘制的这个世界的视觉范围。
着色器：它是一段代码，为了渲染出一个网格的最终图像，开发者需要准确定义各个元素以及它们之间是如何相互作用而生成最终的图像，这个工作就是由着色器来完成的。着色器实现了把网格像素点投影到屏幕上的算法。通常是用C语言编写，并且会被编译成GPU可以执行的代码。

Tips：着色器相关的补充

WebGL和CSS自定义滤镜都是使用OpenGL ES着色语言定义着色器。

CSS滤镜中，着色器是可以配置的，着色器用来被定义CSS3滤镜的时候，被称为自定义滤镜。

2D Canvas API不支持可编程着色器。

WebGL基础

对WebGL的简单认识：

WebGL是一套API。
WebGL基于OpenGL ES 2.0（其中ES是嵌入式系统，表示用于小型计算机设备）。
可以与其他web页面元素结合。
为创建动态web应用而生。
跨平台的。
免费的。

WebGL运作过程

创建一个Canvas。
获取Canvas元素中的绘图上下文。
初始化视口。
创建包含待渲染数据（一般是顶点）的缓冲。
创建定义顶点缓冲到屏幕空间转换规则的矩阵。
创建一到多个着色器。
参数初始化着色器
绘制。

绘图图元

WebGL基于图元进行绘制。
图元就是不同类型的基本几何图案，包括了：三角形、点和线。三角形是最常用的。通常使用：

三角形集（数组存储）
三角形条带
图元如果以数组形式存储，这个数组就叫做缓冲，等待被绘制的顶点数据在缓冲中被定义。

浏览器为了WebGL引入新的数据类型，比如Float32Array。这是一类缓冲数组，也成为类型化数组，是一种以二进制为存储方式的JS类型。它访问速度更快，耗费内存也更小。

着色器

一个着色器通常由两个部分组成：

顶点着色器：负责把物体的坐标转换为2D显示区域中的坐标。
片段着色器：计算转换好的顶点像素的最终颜色输出，基于各个元素比如颜色、纹理、光源等数值输入。