基本の 3D理論の説明

本記事では 3D を始める人が知るべき基本的な理論について説明します。

座標系

3D とは一般的に 3D空間内で描写されているすべての形であり、それらの位置を計算するために座標系が使われています。

Coordinate system

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): スクリーン上の二次元のグリッドに配置された点、それぞれ RGBA の色を持つ。

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

頂点の処理

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

Vertex processing

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

Camera

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

Camera settings