当前位置：首页 > 文章列表 > 文章 > 前端 > [WebGL] [基础]非蒙皮模型

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

来源：dev.to 2024-12-09 16:40:07 0浏览收藏

从现在开始，努力学习吧！本文《[WebGL] [基础]非蒙皮模型》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

[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 中使用列主矩阵时的一些常见做法：

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

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

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

   gl.uniformmatrix4fv(location, false, matrix);

这里， false 表示矩阵不应该转置。由于 webgl 默认使用列优先顺序，请确保数据格式符合此要求，因为 javascript 的标准数学库可能默认使用行优先顺序。

矩阵乘法顺序 实际上，列主顺序会影响矩阵的乘法顺序。在此系统中，矩阵相乘从右到左，这意味着首先应用最后一个变换。例如：

所得矩阵m可以表示为变换矩阵t、r和s的乘积：

m = t ⋅ r ⋅ s

在此等式中：

s 是缩放矩阵，
r 是旋转矩阵，
t 是平移矩阵。

按照列优先顺序，此序列首先应用缩放，然后应用旋转，最后应用平移。

使用实用程序库 使用 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