[WebGL] [basic] non-skinned model

1. gl_Position = projection * view * model * position;

        from local/model position to the position of final clip space

Three Transformation Maxtrix:

• Projection: Projection Transformation Matrix

  transform view coordinate system to clip space coodinate system

• View: View Transformation Matrix

  transform model coordinate system to view coordinnate system(move the position of camera)

• Model: Model Transformation Matrix

  transform local coordinate into model coordinate system/game world coordinate system(absolute coordinate)

• Postition: The local coordinates of the vertices

local coordinate system(relative coordinate system)

• Note:

• the origin of coordinate system of position and model is defined by developer based on requirment.

• the coordinate system of world and model cooresponding to model and postion matrix data respectly:
  

            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 uses Column primary order in default where as C uses Row primary order in default.

In WebGL, matrices are stored in column-major order, which affects matrix arrangement and calculation order. This storage method influences how matrices are defined and used in WebGL. Here are some common practices when working with column-major matrices in WebGL:

1. Matrix Definition and Arrangement ## Matrix Definition and Arrangement With column-major storage, the columns of the matrix are stored sequentially. For example, a 4x4 matrix M in column-major order looks like this:

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

In WebGL, this matrix is represented as a one-dimensional array in column-major order:

   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. Consistent Matrix and Array Format When passing matrix data to WebGL shaders, it’s essential to use a consistent format. For instance, when passing a 4x4 transformation matrix, WebGL’s uniformMatrix4fv function expects the array in column-major order:

   gl.uniformMatrix4fv(location, false, matrix);

Here, false indicates that the matrix should not be transposed. Since WebGL uses column-major order by default, ensure that the data format matches this requirement, as JavaScript’s standard Math library may use row-major order by default.

1. Matrix Multiplication Order In practice, column-major order affects the multiplication sequence of matrices. In this system, matrices are multiplied from right to left, meaning the last transformation is applied first. For example:

The resulting matrix M can be expressed as the product of transformation matrices T, R, and S:

M = T ⋅ R ⋅ S

In this equation:

• S is a scaling matrix,
• R is a rotation matrix,
• T is a translation matrix.

In column-major order, this sequence first applies scaling, then rotation, and finally translation.

1. Using Utility Libraries Using libraries like glMatrix simplifies matrix operations in WebGL. These libraries generally follow column-major order, aligning with WebGL’s requirements and avoiding the need for manual matrix format adjustments. For example:

let modelMatrix = mat4.create();// create a Identity matrix

            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. Debugging and Conversion Understanding column-major storage helps when debugging matrix calculations. If a matrix result is unexpected, check that the data arrangement in shaders matches column-major order.

The above is the detailed content of [WebGL] [basic] non-skinned model. For more information, please follow other related articles on the PHP Chinese website!