[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();// 创建单位矩阵

   let modelMatrix = mat4.create();// create a Identity matrix
//M = T ⋅ R ⋅ S the principle of mutiply of matrix is from right to left <----- caused by colum major order
   mat4.translate(modelMatrix, modelMatrix, [x, y, z]); // Translation
   mat4.rotate(modelMatrix, modelMatrix, angle, [0, 1, 0]); // Rotation
   mat4.scale(modelMatrix, modelMatrix, [sx, sy, sz]); // Scaling

1. 调试和转换 了解列主存储有助于调试矩阵计算。如果矩阵结果是意外的，请检查着色器中的数据排列是否与列优先顺序匹配。