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
• 座標系統