[WebGL] [基礎]非蒙皮模型

1. gl_Position = 投影 * 視圖 * 模型 * 位置;

        從本地/模型位置到最終剪輯空間的位置

三變換Maxtrix：

• 投影：投影變換矩陣

  將視圖座標系轉換為裁切空間座標系

• 視圖：視圖變換矩陣 將模型座標系轉換為視圖座標系

  （移動相機位置）

• 模型：模型轉換矩陣 將本地座標轉換為模型座標系/遊戲世界座標系（絕對座標）

Postition：頂點的局部座標

局部座標系（相對座標系）

注意：

• 
  位置和模型座標係原點由開發者根據需求定義。

            Absolute(World) Y+ axis
                 Y (0, 1, 0)
               |
               |                           Local(Model) Y+ axis
               |                             |  /
               |                             | /
               |                             |
               |                  ---------- o (1, 0, 1)  ← Local(Model) Origin ---- Local X+ axis
               |                           / |  
               |                          /  |
               |                         /   |
               |                        /    |
               |                       /     | 
               |______________________/______|__________ X (1, 0, 0)  Absolute(World) X+ axis
              /                     Local(Model) Z+ axis
             /
            /
           /
          Z (0, 0, 1)
   Absolute(World) Z+ axis

分別對應模型和位置矩陣資料的世界座標系和模型座標系：

2. WebGL 預設使用列主順序，而 C 預設使用行主順序。

1. 在WebGL中，矩陣依列主順序存儲，這會影響矩陣排列和計算順序。這種儲存方法會影響矩陣在 WebGL 中的定義和使用方式。以下是在 WebGL 中使用列主矩陣時的一些常見做法：

矩陣定義與排列

## 矩陣定義與排列 使用列優先儲存時，矩陣的列會依序儲存。例如，按列優先順序的 4x4 矩陣

M

如下所示：

   const matrix = [
     m11, m21, m31, m41,  // First column
     m12, m22, m32, m42,  // Second column
     m13, m23, m33, m43,  // Third column
     m14, m24, m34, m44   // Fourth column
   ];

M = | m11 m21 m31 m41 | m11 m21 m31 m41 | m11 m21 m31 m41 | m11 m21 m31 m41 | m12 m22 m32 m42 | m12 m22 m32 m41 | m12 m22 m32 m42 | m12 m22 m32 m42 m12 m22 m32 m42 | m12 m22 m32 m42 m12 m22 m32 m32 43 | m13 m23 m33 m43 | m13 m23 m33 m43 | m13 m23 m33 m43 | m14 m24 m34 m44 |

1. 在 WebGL 中，此矩陣表示為按列優先順序的一維數組：

   gl.uniformMatrix4fv(location, false, matrix);

一致的矩陣與陣列格式

將矩陣資料傳遞給 WebGL 著色器時，必須使用一致的格式。例如，當傳遞 4x4 轉換矩陣時，WebGL 的uniformMatrix4fv 函數期望數組會按列優先順序排列： 這裡， false 表示矩陣不應該轉置。由於 WebGL 預設使用列優先順序，請確保資料格式符合此要求，因為 JavaScript 的標準數學庫可能預設使用行優先順序。

1. 矩陣乘法順序 實際上，列主順序會影響矩陣的乘法順序。在此系統中，矩陣相乘從右到左，這意味著首先應用最後一個變換。例如：

所得矩陣M可以表示為變換矩陣T、R和S的積：

M = T ⋅ R ⋅ S

在此等式中：

• S 是縮放矩陣，
• R 是旋轉矩陣，
• T 是平移矩陣。

依照列優先順序，此序列首先套用縮放，然後套用旋轉，最後套用平移。

1. 使用實用程式庫 使用 glMatrix 等函式庫可以簡化 WebGL 中的矩陣運算。這些庫通常遵循列主順序，符合 WebGL 的要求並避免手動矩陣格式調整的需要。例如：

let modelMatrix = mat4.create();// 建立單位矩陣

            Absolute(World) Y+ axis
                 Y (0, 1, 0)
               |
               |                           Local(Model) Y+ axis
               |                             |  /
               |                             | /
               |                             |
               |                  ---------- o (1, 0, 1)  ← Local(Model) Origin ---- Local X+ axis
               |                           / |  
               |                          /  |
               |                         /   |
               |                        /    |
               |                       /     | 
               |______________________/______|__________ X (1, 0, 0)  Absolute(World) X+ axis
              /                     Local(Model) Z+ axis
             /
            /
           /
          Z (0, 0, 1)
   Absolute(World) Z+ axis

1. 調試與轉換 了解列主存儲有助於調試矩陣計算。如果矩陣結果是意外的，請檢查著色器中的資料排列是否與列優先順序相符。

以上是[WebGL] [基礎]非蒙皮模型的詳細內容。更多資訊請關注PHP中文網其他相關文章！