尝试搭建webgl游戏引擎-创建正方体

上一篇尝试搭建webgl游戏引擎-文字的创建
简单记录了一下文字和图片的创建。

顶点疑惑

文章写的道理非常的简单，但是实际开发的时候，还是有一些细节和API的要学习的。
其中有一点，我之前一直没有弄懂。
就是顶点

以前就知道像素，以为在shader里都是像素，在fs里用uv判断进行着色好使，
但是到了vs里就不好使了，问了别人才知道正常图片就4个顶点，uv判断不是0就是1。

后来经过不断学习，对顶点的认识也逐渐加深了一些。
才有了现在还可以尝试着空手创建一个正方体。

基于之前的内容，知道要创建正方体，

首先需要定义其顶点位置

正方体有6个面，8个顶点。
每3个面共享1个顶点。

按照这样的顺序，定义正方体中心为0点。
边长为2（这样是方便每个点都是由1组成的，感觉好算和好看一些）
就可以写出所有点的坐标了。
比如3号点的坐标是（-1,-1,1）。

然后定义顶点索引

webgl里，只有绘制点和绘制三角面的功能。
而每个面都是由4个顶点构成。
所以需要将4个顶点组合成两个三角形。
需要按照右手法则逆时针组合。
比如front面，就由（1，2，3）和（1，3，4）
这两个顶点组合构成一个面。
然后按照顺序，将所有三角面都指定一下。
当然传到数组里的时候，第一个点需要是数字0

有了坐标和索引就可以绘制正方体了

将坐标和索引作为buffer绑定到webgl渲染管线里就可以调用shader绘制了。
用到的是如下两个方法。

gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);

其实想想，和绘制图片其实差别也不大

涉及到面的属性插值问题

前面说到，只需定义8个顶点就可以通过索引绘制一个正方体了。
不过在后面给正方体的面加颜色的时候就出问题了。
因为三个面共享一个顶点，如果给这个顶点设置颜色，那么三个面就会被影响并插值颜色。
（虽然可以做出好看的效果）
并且还有后面做光照法线的问题。
所以就需要更细致的顶点定义了
每个面独享4个顶点。
那么就是64=24个顶点。
当然也可以用83=24来算（原来的1个点被拆成3个）

虽然是24个点，但是其坐标还是只有8种。
索引也需要针对这么多点进行指定。不过有迹可循，循序都是一致的，知识索引号增加了而已。

面的贴图和光照

已经将正方体定义成24个顶点了，耦合度降低，内存占用增多。
可以做的事情就也更多了。
现在可以为正方体的各个面贴上图片。
贴图片的方法和普通的二维图片一样，只需要定义出各个顶点所对应的uv值即可。
创建纹理，绑定通道，设定源，设置参数，开启通道。
一顿操作下来，就可以将图片贴上去了。

光照会相对复杂一点，这个放到后面章节说。
这里提到一点是，正方体的旋转会导致法线的不对应。
需要对正方体的法线进行变换以对应坐标的变换。
这里就是矩阵最烦人的逆转置矩阵。
需要了解到矩阵的一些难懂的知识，反正查了很多文章，才鼓捣出来。
当然，如果是正交缩放，刚性变换。其实可以只用旋转矩阵就行。
因为旋转矩阵的逆转置矩阵就是自己。

结束

好了，就记录到这里。也写了不少字。
之后有想法了，要好好的把矩阵记录一下。
下一篇文章写简单的场景管理。