如果你对用代码绘图感兴趣，WebGL是最容易入手的一个切入口。一个浏览器、一个编辑器，再略懂一些前端开发的知识，就可以开始绘图了。
使用WebGL把图形渲染到页面中，需要执行如下步骤：
- 创建一个画布元素；
- 获取画布的上下文；
- 初始化视口；
- 创建一个或多个包含渲染数据的数组（通常是顶点数组）；
- 创建一个或多个矩阵，将顶点数组变换到屏幕空间中；
- 创建一个或多个着色器来实现绘制算法；
- 使用参数初始化着色器
- 绘制
画布元素与绘制上下文
首先要创建一个canvas元素，获取到canvas的DOM对象后，在使用WebGL的getContext()获取上下文。
创建canvas元素、获取上下文
初始化视口设置视口，需要将WebGL的上下文和canvas对象作为参数传入，viewport(x,y,width,heigt)方法有四个参数,分别表示：
- x：视口的左下角水平坐标。默认值：0。
- y：视口的左下角垂直坐标。默认值：0。
- width：设定视口的宽度。默认值：canvas的宽度。
- height：设定视口的高度。默认值：canvas的高度。
初始化视口
Buffer、ArrayBuffer和类型化数组WebGL的绘制是由图元组成的，图元的类型包括三角形（三角形数组）、三角形带、点和线。图元使用的数据组称为Buffer，它定义了顶点的位置。每个顶点的位置都包含x、y、z值。
三角形带是一种基本的渲染图元，它先使用前三个顶点画出第一个三角形，再使用后两个顶点与下一个顶点结合绘制一个三角形，以此类推。
创建顶点数组
创建矩阵在绘制正方形之前，先要建立两个矩阵。首先，我们需要一个矩阵来定义正方形在3D坐标系中相对于相机的位置。这个矩阵也被称为模型视图矩阵，它综合了模型的变换和相机之间的关系。
第二个矩阵是投影矩阵，这个矩阵将被用于在着色器中将相机空间模型的3D坐标转换为绘制视口的2D坐标。投影矩阵难以想象，几乎没有人会手动编写计算投影矩阵的代码，而都是由框架来自动完成的。
模型视图矩阵、投影矩阵
创建着色器着色球定义了如何将3D物体的像素切实地绘制在屏幕上，一个着色器可以同时应用在多个物体上。
着色器由两个部分组成：顶点着色器和片元着色器。顶点着色器负责将物体的坐标转换到2D空间，片元着色器负责生成最后的颜色输出到每个转换后的顶点元素，而颜色的输入则可以是纯色、纹理、光源、材质。
创建着色器
顶点着色、片元着色器执行代码段
初始化着色程序
绘制图元接下来编写绘制函数。首先，函数会先清理一下画布并用黑色作为背景色。然后将顶点数组和矩阵作为输入传递给着色器。最后调用drawArrays()方法绘制正方形。
绘制图元
函数调用
函数调用
图片呈现
,
