[WebGL] [基本] スキンなしモデル

1. gl_Position = 投影 * ビュー * モデル * 位置;

ローカル/モデルの位置から最終クリップ スペースの位置まで

3 つの変換マトリックス:

• 射影: 射影変換行列

  ビュー座標系をクリップ空間座標系

  に変換します

• ビュー: 変換行列の表示

  モデル座標系をビュー座標系に変換(カメラの位置を移動)

• モデル: モデル変換行列

  ローカル座標をモデル座標系/ゲーム世界座標系(絶対座標)に変換

• 位置: 頂点のローカル座標

ローカル座標系(相対座標系)

• 注:

• 位置とモデルの座標系の原点は、要件に基づいて開発者によって定義されます。

• モデルと位置行列データにそれぞれ対応するワールドとモデルの座標系:
  

            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 | | m12 m22 m32 m42 | | m13 m23 m33 m43 | | m14 m24 m34 m44 |

WebGL では、この行列は列順の 1 次元配列として表されます。

   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 の標準 Math ライブラリはデフォルトで行優先の順序を使用する可能性があるため、データ形式がこの要件と一致していることを確認してください。

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 中国語 Web サイトの他の関連記事を参照してください。