WebGLの研究ノート（5）：変換ライブラリ

WebGLの描画を開始する前に、我々は3次元空間マトリクスおよびベクトル演算のために自分でする必要があり、インターネットの使用は、これらの複雑な数学的な操作を実現するために自分自身を避けるために、変換ライブラリを成熟しています。

私たちは、ここで選択したGL-行列ライブラリのダウンロードです： https://github.com/toji/gl-matrix

操作を変換

最終開始描画の前に、我々は、3D座標系の世界はWebGLのオブジェクトの座標系を変換し、最終的なドローの位置を決定する必要があります。

モデル変換（プロセスの頂点シェーダステージ）

変換モデルは、世界座標系におけるモデルの位置を決定するために使用される、すべてのモデルは、世界は、マトリックスの座標系モデル変換に同じ座標系内のすべてのモデル（すなわち、ワールド座標系）の翻訳を含むことを確認しなければなりません回転や拡大縮小。

ビューは、（プロセスの頂点シェーダステージ）変換します

世界座標系をした後では十分ではありません、あなたはまた、マトリックスカメラはまた、観察者の視野の位置と角度を表すために使用される座標系内に配置されている必要があります。

モデルビュー変換（プロセスの頂点シェーダステージ）

この変換は、変換行列及び変換モデルビュー変換を乗算することによって得られます。

 

射影変換（プロセスの頂点シェーダステージ）

このステップでは、我々は、オブジェクトの最終座標がカメラに見えますが、人間の目が見ることができる、と我々はまだシーンを異なる、我々は世界で物事を見るようなは、はるかに小さい効果に近い視点からのもの投影変換は、変換のこれらの効果を達成するために使用されます。

正射影

正射影は、オブジェクトの平行投影が直交射影においてはるかに小さい視覚効果の近くにないとみなすことができ、典型的には（かかわらず、大きな距離の同一の、突起が一般2Dまたは2.5Dで使用されて見えますゲーム内の3D文字2Dシーン）を、UIの3Dゲームは、この投影を達成するために使用されるであろう。

次のように正射影ライブラリコードを使用して作成されたGL-行列です。

1  VAR M4 = glMatrix.mat4.create（）;
 2  // 投影領域決意の各顔の大きさを設定することによって
3。 glMatrix.mat4.ortho（M4、-100、100、-100、100、-100、100） ;

透視投影

透視投影は、はるかに小さい視覚効果の近くに、投影は、一般的な3Dゲームで使用されている3Dの世界を見るために、人間の目をシミュレートすることができます。

以下のコードGL-行列のライブラリを使用して透視投影を作成します。

1つの VAR M4 = glMatrix.mat4.create（）;
 2  // 方法1：垂直範囲、及び投影領域のアスペクト比を決定近遠心面
3 glMatrix.mat4.perspective（M4、1、1、0、100 ）;
 4  // 方法2：各顔の大きさを設定することによって決定投影領域
5 glMatrix.mat4.frustum（M4、-100、100、-100、100、-100、100）。

透視除算（プロセスのプリミティブアセンブリステージ）

即ちX、Y、Z成分で割ったWコンポーネントの斜視分割三次元透視効果を生成するために、（デフォルト値wが1です）。

詳しい情報は見つけることができます：https://www.jianshu.com/p/7e701d7bfd79

ビューポート変換（プロセスのプリミティブアセンブリステージ）

ビューポート変換は、幾何学的変換を介して定義されているコンピュータグラフィックスにおいて、2次元平面上の三次元空間における主要被写体の投影、クリッピング後のオブジェクトの射影変換され、指定された領域に表示される画面を変換します。

ユーザが2つのメソッドを呼び出すことにより、変換ステップを制御することができます。

gl.viewPort

ピクセル単位で、最終的な表示位置とサイズを決定します。

gl.depthRange

最終的な深さ領域を決定することは、範囲[0-1]から選択される、表示することができます。

以下に示すように完全な変換ライン（形質転換株）

変換の順序の重要性

3Dアプリケーションは、行列の乗算は非常に重要であり、我々は2個の乗算器行列切り替え後の結果は、入手が同じではないことに注意する必要があります。

MN≠NM

以下は、異なる結果を得るために異なる変換ための図直感的な理解で見ることができます。

 

変換行列スタック

一般的に、一般的に、すなわち、単純な標的との複合体のモデル継承モデルを有するマトリックススタック構造、に使用されます。例えば、自転車は二輪、三脚、およびそれらの他のコンポーネントから構成されています。前方に自転車の移動、後輪に続く最初の前輪回転は、前方に体全体を翻訳した後、回転させ、その上に行く時に連続してその性能は、このバイクは前方に移動します。

また、私たちが必要とするとき、たとえば、地球上の表は、この内部テーブル上の座標位置を、グローバル座標とローカル座標の概念を必要とする、複雑なモデルを描く実装し、それはテーブルと4脚、これらの5つのモデルが含まれていますデータ行列は、相対的なローカル座標のテーブルではなく、グローバル座標を記録する、私たちはテーブルのマトリックスの変化は、内部の5つのローカル行列モデルを変更する必要がないことを願っています。

スタック

マトリックススタックにおけるマトリックス乗算後の電流値、スタックに新しいマトリックスとしてスタックは、スタックは、現在のマトリクスのローカル座標で使用されるマトリックスであることが理解されよう。

ポップ

ポップ・スタック・マトリックス、マトリックスは、親の座標行列のローカル座標上のスタックの現在のトップです。

変換行列スタックによってテーブルを描きます。

1. マトリックステーブルに圧入。
2. マトリクステーブルトップのグローバル座標を得るために、デスクトップ上の行列と行列乗算をスタック。
3. オブジェクトがテーブル上に描画する必要がマトリクステーブルに圧入、スタックの最上部は、行列の行列乗算にオブジェクトを描画する必要が使用されてもよいです。
4. デスクトップオブジェクトを描画する必要、ポップスタックマトリックスを有していない（すなわち、マトリックスのデスクトップ）。
5. この時点で、すなわち、マトリックスの第一脚部内のスタックの上部とスタック行列行列行列乗算のテーブルトップは、マトリックスは、第一の脚部のグローバル座標を得ます。

など、あなたはすべてのモデルを描いたまで。

例

https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_3/index.html