[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 默认使用行主顺序。

在WebGL中，矩阵按列主顺序存储，这会影响矩阵排列和计算顺序。这种存储方法影响矩阵在 WebGL 中的定义和使用方式。以下是在 WebGL 中使用列主矩阵时的一些常见做法：

1. 矩阵定义和排列 ## 矩阵定义和排列 使用列优先存储时，矩阵的列按顺序存储。例如，按列优先顺序的 4x4 矩阵 M 如下所示：

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

在 WebGL 中，该矩阵表示为按列优先顺序的一维数组：

   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
   ];

1. 一致的矩阵和数组格式 将矩阵数据传递给 WebGL 着色器时，必须使用一致的格式。例如，当传递 4x4 转换矩阵时，WebGL 的uniformMatrix4fv 函数期望数组按列优先顺序排列：

   gl.uniformMatrix4fv(location, false, matrix);

这里， 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中文网其他相关文章！