[WebGL] [de base] modèle sans skin

1. gl_Position = projection * vue * modèle * position;

        de la position locale/modèle à la position de l'espace de clip final

Trois transformations Maxtrix :

• Projection : Matrice de transformation de projection

  transformer le système de coordonnées de vue en système de coordonnées de l'espace de découpe

• Afficher : Afficher la matrice de transformation

  transformer le système de coordonnées du modèle en afficher le système de coordonnées(déplacer la position de la caméra)

• Modèle : Matrice de transformation du modèle

  transformer coordonnées locales en système de coordonnées du modèle/système de coordonnées du monde du jeu (coordonnées absolues)

• Position : Les coordonnées locales des sommets

système de coordonnées local (système de coordonnées relatives)

• Remarque :

• l'origine du système de coordonnées de la position et du modèle est définie par le développeur en fonction des exigences.

• le système de coordonnées du monde et du modèle correspondant respectivement aux données du modèle et de la matrice de position :
  

            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 utilise l'ordre principal des colonnes par défaut alors que C utilise l'ordre principal des lignes par défaut.

Dans WebGL, les matrices sont stockées dans ordre majeur des colonnes, ce qui affecte la disposition des matrices et l'ordre de calcul. Cette méthode de stockage influence la façon dont les matrices sont définies et utilisées dans WebGL. Voici quelques pratiques courantes lorsque vous travaillez avec des matrices de colonnes principales dans WebGL :

1. Définition et disposition de la matrice ## Définition et disposition de la matrice Avec le stockage en colonnes principales, les colonnes de la matrice sont stockées séquentiellement. Par exemple, une matrice 4x4 M dans l'ordre des colonnes principales ressemble à ceci :

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

En WebGL, cette matrice est représentée sous la forme d'un tableau unidimensionnel dans l'ordre des colonnes :

   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. Format de matrice et de tableau cohérent Lors de la transmission de données matricielles aux shaders WebGL, il est essentiel d'utiliser un format cohérent. Par exemple, lors du passage d'une matrice de transformation 4x4, la fonction uniformMatrix4fv de WebGL attend le tableau dans l'ordre des colonnes principales :

   gl.uniformMatrix4fv(location, false, matrix);

Ici, false indique que la matrice ne doit pas être transposée. Étant donné que WebGL utilise l'ordre des colonnes par défaut, assurez-vous que le format des données correspond à cette exigence, car la bibliothèque Math standard de JavaScript peut utiliser l'ordre des lignes par défaut.

1. Ordre de multiplication matricielle En pratique, l’ordre des colonnes majeures affecte la séquence de multiplication des matrices. Dans ce système, les matrices sont multipliées de droite à gauche, ce qui signifie que la dernière transformation est appliquée en premier. Par exemple :

La matrice résultante M peut être exprimée comme le produit des matrices de transformation T, R et S :

M = T ⋅ R ⋅ S

Dans cette équation :

• S est une matrice de mise à l'échelle,
• R est une matrice de rotation,
• T est une matrice de traduction.

Dans l'ordre des colonnes principales, cette séquence applique d'abord la mise à l'échelle, puis la rotation et enfin la translation.

1. Utilisation des bibliothèques d'utilitaires L'utilisation de bibliothèques comme glMatrix simplifie les opérations matricielles dans WebGL. Ces bibliothèques suivent généralement l'ordre des colonnes principales, s'alignant sur les exigences de WebGL et évitant le besoin d'ajustements manuels du format de matrice. Par exemple :

laissez modelMatrix = mat4.create();// créer une matrice d'identité

            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. Débogage et conversion Comprendre le stockage dans les colonnes principales est utile lors du débogage des calculs matriciels. Si un résultat de matrice est inattendu, vérifiez que la disposition des données dans les shaders correspond à l'ordre des colonnes principales.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!