推奨事項: NSDT シーン エディターを使用して 3D アプリケーション シーンを迅速に構築する
座標系
3D は本質的に、3D 空間で形状を表現し、座標系を使用してその位置を計算することです。
WebGL は正しい座標系を使用します。上の図に示すように、軸は右を指し、軸は上を指し、軸は画面外を指します。xyz
物体
頂点を使用して、さまざまなタイプのオブジェクトを構築します。頂点は、座標系内で独自の 3D 位置を持つ空間内の点であり、通常は頂点を定義する追加情報が含まれます。各頂点は次の属性によって説明されます。
- 位置: 3D 空間 (,,) で識別します。
xyz - カラー: RGBA 値を保持します (R、G、B は赤、緑、青のチャネル、アルファは透明度を表します。すべての値の範囲は から です)。
0.01.0 - Normal:頂点の方向を記述する方法。
- テクスチャ: 頂点は、単なる色ではなく、頂点が属するサーフェスの 2D イメージを装飾するために使用できます。
この情報を使用してジオメトリを構築できます。立方体の例を次に示します。
特定の形状の面は、頂点間の平面です。たとえば、立方体には 8 つの異なる頂点 (空間内の点) と 6 つの異なる面があり、それぞれが 4 つの頂点で構成されます。法線は面の向きを定義します。また、点と点を結ぶことで立方体の辺を作成しています。ジオメトリは頂点と面から構築されますが、マテリアルは色または画像を使用するテクスチャです。ジオメトリをマテリアルに接続すると、メッシュが得られます。
レンダリングパイプライン
レンダリング パイプラインは、画像を準備して画面に出力するプロセスです。グラフィックス レンダリング パイプラインは、頂点を使用して記述されたプリミティブから構築された 3D オブジェクトを取得し、処理を適用し、フラグメントを計算して、2D 画面上にピクセルとしてレンダリングします。
上の図で使用されている用語は次のとおりです。
- プリミティブ: パイプラインへの入力 - 三角形、点、または線の頂点から構築されます。
- フラグメント: ピクセルと同じプロパティをすべて備えたピクセルの 3D 投影。
- ピクセル: RGBA カラーを使用して 2D グリッドに配置された画面上の点。
頂点とフラグメントの処理はプログラム可能です。独自のシェーダーを作成して出力を操作できます。
頂点処理
頂点処理は、個々の頂点に関する情報をプリミティブに結合し、閲覧者が見えるように 3D 空間での座標を設定する行為です。それは、あらかじめ用意した風景の写真を撮るようなものです。まず被写体を配置し、カメラを設定してから撮影する必要があります。
この処理には 4 つのフェーズがあります。最初のフェーズには、モデル変換として知られるワールド内のオブジェクトの配置が含まれます。次に、ビュー変換があります。これは、3D 空間でのカメラの位置決めと方向の設定を担当します。カメラには、位置、向き、方向という 3 つのパラメータがあり、新しく作成されたシーンに対してこれらを定義する必要があります。
次に、射影変換 (透視変換とも呼ばれます) によってカメラの設定が定義されます。カメラが見ることができるものを設定します。構成には、視野、アスペクト比、およびオプションの近平面と遠平面が含まれます。これらについては、three.js の記事のカメラの段落をお読みください。
最後のステップはビューポート変換です。これには、出力レンダリング パイプラインで次に行われるすべての処理が含まれます。
ラスタライズ
ラスタライズは、プリミティブ (接続された頂点) をフラグメントのセットに変換します。
これらのフラグメント (つまり、3D ピクセルの 2D 投影) はピクセル グリッドに位置合わせされるため、最終的には出力ビニング段階で 2D スクリーン ディスプレイ上にピクセルとして印刷できます。
フラグメント処理
フラグメント処理はテクスチャと照明に重点を置き、指定されたパラメータに基づいて最終的な色を計算します。
テクスチャ
テクスチャは、オブジェクトをより美しく、よりリアルに見せるために 2D 空間で使用される 3D 画像です。画像要素がピクセルから組み立てられるのと同じように、テクスチャはテクセルと呼ばれる個々のテクスチャ要素から組み立てられます。レンダリング パイプラインのフラグメント処理段階でオブジェクトにテクスチャを適用すると、必要に応じてラッピングやフィルタリングを行って微調整することができます。
テクスチャ ラッピングを使用すると、2D オブジェクトの周囲に 3D 画像を繰り返すことができます。ネイティブ解像度またはテクスチャ イメージが表示されたフラグメントと異なる場合、テクスチャ フィルタリングが適用され、それに応じて縮小または拡大されます。
照明
画面上に見える色は、光源とオブジェクトのマテリアルの表面の色が相互作用した結果です。光が吸収または反射される可能性があります。WebGL に実装された標準のPhong 照明モデルには、次の 4 つの基本的な照明タイプがあります。
- 拡散: 太陽などの遠方の指向性光。
- 鏡面反射: 部屋の電球や懐中電灯のような光の点。
- 環境: 通常の光がシーン内のすべてに適用されます。
- 自己照明: 物体から直接放射される光。
出力マージ
出力操作フェーズでは、3D 空間のプリミティブのすべてのフラグメントがピクセルの 2D グリッドに変換され、画面ディスプレイに印刷されます。
出力のマージ中に、必要のない情報を無視するために一部の処理も適用されます。たとえば、画面の外側または他のオブジェクトの背後にあるオブジェクトのパラメータは計算されないため、表示されません。