关于javascript: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 类型每次雷同的变量会笼罩之前的数据。

这是基于绘制直线示例，最初只绘制了垂直直线：

  let vertices = [-0.5, 0, 0.0, 0.5, 0, 0.0]; // 程度直线
  let vertices2 = [0, 0.5, 0.0, 0, -0.5, 0.0]; // 垂直直线
  setBuffers(glContext, vertices);
  setBuffers(glContext, vertices2);

vertexAttribPointer 解析顶点一次就足够了？

在频繁绘制的场景中，vertexAttribPointer 每次都须要从新解析顶点，还是解析一次就足够了？

在绘制直线示例的根底上尝试发现：

1. 要先保障已缓冲了数据，该函数能力无效解析。
2. 每次更新了缓冲，须要从新解析能力失效。

enableVertexAttribArray 办法也是相似。

useProgram 函数激活一次就足够了？

在频繁绘制的场景中，useProgram 是否须要从新激活？

在绘制直线示例的根底上尝试发现 只须要激活一次，这是示例。

基于的坐标系是什么？

基于的坐标系是右手坐标系。

按如下的步骤做：

• 沿着正 y 轴方向伸出你的右臂，手指着上方。
• 大拇指指向右方。
• 食指指向上方。
• 中指向下蜿蜒 90 度。

如果你的动作正确，那么你的大拇指指向正 x 轴方向，食指指向正 y 轴方向，中指指向正 z 轴方向。

常见的变量类型有那些？

摘自官网提供的 WebGL 1.0 卡片索引。

存储限定符

• const：编译时常量，或只读函数参数。
• attribute：用这个润饰的变量，示意是用于顶点着色器和 OpenGL ES 之间的链接。
• varying：用这个润饰的变量，示意是用于顶点着色器和片元着色器之间的链接。
• uniform：用这个润饰的变量，示意全局且惟一的变量，能够在任意阶段拜访到，变量的值会始终保留。

根本类型

内置的输出 / 输入变量有那些？

摘自官网提供的 WebGL 1.0 卡片索引。

顶点着色器非凡变量

输出：

片元着色器非凡变量

输出：

输入：

参考资料

• WebGL lessons
• 坐标零碎