这是我参与「第四届青训营 」笔记创作活动的第14天

本文围绕WebGL来介绍：1.为什么要用WebGL? 2.怎样创建WebGL？3.一些好玩的WebGL绘制图以及学习资料和WebGL库

Why WebGL?

怎样创建WebGL

创建流程

创建WebGL上下文

下图中，第一段代码是浏览器支持WebGL，第二段代码适用于不支持WebGL的浏览器，不过当今浏览器基本都支持WebGL，所以只看第一段就好。

着色器

在标准的WebGL管线里，有两个着色器,WebGL画物体就依靠这两个着色器

顶点着色器 Vertex Shader：处理图形轮廓,描述顶点的特性（位置、颜色等）的程序.

片元着色器 Fragment Shader:像素点光栅化以后映射到该着色器中，处理颜色，进行着片元处理过程的程序。

创建程序

利用program将两个着色器连结起来，并且和之前创建好的上下文联系起来。

将图形的顶点坐标传到类型数组中（有整数、浮点数等类型区别），利用顶点坐标与上下文绑定后将数据送到缓冲区里。

WebGL中利用四个浮点数来表示颜色，每个浮点数范围是0-1（例如（1.0，0.2，0.0，0.1）），可以通过调节浮点数大小来修改颜色，根据每个像素点位置来修改可以调成渐变色。

更深一步理解WebGL

通过上一小节的学习我们可以发现，仅仅是画一个简单的三角形我们就已经写了一大长串代码，如果再加上了渐变效果就更复杂了，和canvas2D（如下图代码）比起来更是复杂不少，而且我们要利用顶点着色器和片元着色器进行图形绘制，需要我们准确的计算出每个顶点的位置，甚至3D绘制的话还需要空间几何等知识，显然这对WebGL的使用者来说是不太友好的。

既然如此。那么我们为什么要使用WebGL呢？

这是因为WebGL的性能是很好的，尤其是3D对比canvas有着很大的提升，以及如果我们大批量绘制图形，比如十万个三角形，canvas画法是由指令控制的，只能一个个像素点绘制，而WebGL可以做到将十万个三角形的顶点放到一个大的数组里，计算好每个顶点位置，然后同时进行绘制，这样大大提高了性能与效率。

实现图形移动

通过数学公式，也可以通过矩阵形式来实现旋转、平移和缩放等。

平移要通过矩阵形式来表示的话比较复杂，需要利用齐次矩阵来表示，这样相较于旋转和缩放升维了，也就是二维的平面变化通过三维的齐次矩阵来表示，升维了。

一些好看的图形

下面是一些WebGL的推荐资料以及好玩的库，里面有很多现成的好玩的绘制图形，有时间可以去逛一逛。