WebGL■用WebGL绘制一个正方形 |算法|浏览器|照

如果你对用代码绘图感兴趣， 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空间，片元着色器负责生成最后的颜色输出到每个转换后的顶点元素，而颜色的输入则可以是纯色、纹理、光源、材质。