JavaScript WebGL 基础疑惑点

引子

尝试 JavaScript WebGL 绘制一条直线 之后总算是熟悉了一点，但还是有些疑惑，在此集中记录一下。

• Origin
• My GitHub

顶点坐标范围为什么要在 -1.0 到 1.0 之间 ？

在绘制直线的示例中，如果按照 Canvas 的大小修改顶点坐标，发现大都看不到对应的点。查资料说每个顶点的 x，y，z 坐标都应该在 -1.0 到 1.0 之间，超出这个坐标范围的顶点都将不可见。原因是整个过程中涉及到多个坐标系统的转换。

多个坐标系转换的优点是，一些操作或运算在特定的坐标系中才有意义且更方便容易。一个顶点到最后展示到屏幕，主要经历了下面一些坐标系转换：

1. 局部空间中的局部坐标（Local Coordinate），是物体的起始坐标。
2. 接着通过模型矩阵变换，变为世界空间的世界坐标（World Coordinate）。这些坐标相对于世界的全局原点，它们会和其它物体一起相对于世界的原点进行摆放。
3. 接着通过观察矩阵变换，变为观察空间的观察坐标（View Coordinate），使得每个坐标都是从摄像机或者说观察者的角度进行观察的。
4. 接着需要将其投影到裁剪空间的裁剪坐标（Clip Coordinate）。裁剪坐标会被处理至 -1.0 到 1.0 的范围内，并判断哪些顶点将会出现在屏幕上。
5. 最后，将裁剪坐标变换为屏幕空间的屏幕坐标（Screen Coordinate），使用一个叫做视口变换(Viewport Transform)的过程。视口变换将位于 -1.0 到 1.0 范围的坐标变换到由 glViewport 函数所定义的坐标范围内。变换出来的坐标将会送到光栅器，将其转化为片元。

多次缓冲数据是覆盖还是增量 ？

缓冲是分类型的，尝试了下 gl.ARRAY_BUFFER 类型每次相同的变量会覆盖之前的数据。

这是基于绘制直线