基本の 3D 理論の解説

この記事では、これから 3D を始める際に知っておくと便利な基礎理論をすべて解説しています。

座標系

3D は本来、三次元空間における図形の表現に関するすべてのものであり、その位置を計算するために座標系が使用されます。

座標系

WebGL は右手系座標系を利用します。上記の図のように x 軸は右方向へ、y 軸は上方向へ、z 軸は画面の外の方向へ向かいます。

オブジェクト

さまざまな種類のオブジェクトは頂点を用いて構築されます。頂点は空間上の点であり、座標系における 3D の位置を持ち、たいていはいくつか追加で情報が定義されています。すべての頂点は、これらの属性によって記述されます。

位置: 3D 空間での位置 (x, y, z) を特定します。
色: RGBA 値を持ちます (R、G、B は赤、緑、青のチャンネルを、alpha は透過度を - すべての値の範囲は 0.0 から 1.0 までです)。
法線: 頂点が向いている方向を記述する方法です。
テクスチャ: 頂点が、単純な色の代わりに、その一部である表面を装飾するために使用できる 2D 画像です。

この情報を用いて形状を構築することができます - 次は立方体の例です。

Cube

形から定義される表面は頂点同士の表面となります。例えば、立方体は 8 つの異なる頂点(空間上の点)と 6 つの異なる表面を持ち、それぞれの表面が 4 つの頂点から構築されています。法線は表面がどの方向に向いているかを定義します。そしてまた、立方体の端で点が接続されています。形状は頂点と法線から構築され、また材質は色や画像のテクスチャになります。形状が材質と接続されている場合、メッシュを得ることができます。

レンダリングパイプライン

レンダリングパイプラインは画面上に画像を準備し、出力するためのプロセスです。画像のレンダリングパイプラインは 3D オブジェクトを頂点を用いて作図された 単純なオブジェクト(プリミティブ) から作り、処理を加え、断片(フラグメント) を計算し、そして 2D の画面上に ピクセル として出力します。

Rendering pipeline

上記の図で使われる専門用語は以下の通りです:

プリミティブ (Primitive): パイプラインへの入力 - これは頂点から構築され、三角形や点、ラインとなります。
断片 (Fragment): ピクセルを 3D に投影したもの、すべての属性はピクセルと同じ属性を持つ。
ピクセル (Pixel): 画面上の 2D のグリッドに配置された点、それぞれ RGBA の色を持ちます。

頂点とフラグメントの処理はプログラミング可能です - 自分自身でシェーダーを書いて出力を操作することができます。

頂点の処理

頂点の処理は個々の座標の情報をつなげることでプリミティブを作成し、それらの座標を 3D 空間のビューアーで見られるように設定します。これは風景の写真を撮る準備に似ています - 最初にオブジェクトを配置し、カメラを設定し、そして撮影します。

Vertex processing

この処理には 4 つの段階があります。最初の処理はオブジェクトを配置するのに必要な処理で、これはモデル変換 (model transformation) と呼ばれています。そして視野変換 (view transformation) で 3D 空間上のカメラの位置の設定と向きを設定をします。カメラには位置、方角、角度の 3 つの引数があります。これは新しいシーンを作成したときに定義しなくてはなりません。

Camera

投影変換 (Projection transformation) (または透視変換 (perspective transformation) とも呼ばれます) はカメラの設定を定義します。これはカメラから何が見えるのかを設定します - 設定には field of view(視野)、aspect ratio(アスペクト比) そして任意の 近く(near) と 遠くの平面(far planes) を含みます。これらを学ぶには Three.js の Camera の段落の記事を読んでください。

Camera settings