はじめに
SVGの宣言的描画やCanvasの命令的描画とは異なり、WebGLは並列GPU処理を利用してイメージを描画します。この描画モードは、基盤となるGPUやメモリなどに直接入り込むため、複雑ですが強力です。データ量が多く、視覚効果の要求が高いシーンに適しています。
グラフィカルな描画プロセス
- データはCPUによって特定の構造を持つ幾何学的情報に処理されます。
- この情報はGPUに送られて処理されます。GPUでは、ラスター情報を生成するために2つのステップがあります。
- ラスター情報はフレームバッファに出力され、最終的にスクリーンにレンダリングされます。
基本概念
- タッパー：点、線分、三角形など、WebGL が直接処理できるグラフィカルな単位。その他のイメージ以外のグラフィックを処理するには、タプルに変換する必要があります。
- ラスタ：イメージを構成するピクセルの配列。
- フレームバッファ：描画処理中、ピクセル情報はメモリアドレスのブロックであるフレームバッファに保存されます。
- ラスタライズ：バーテックスシェーダーからピクセルポイントを抽出し、コードを実行するためにピースワイズシェーダーにタプルを渡すプロセス。
シェーダー
WebGLには、頂点シェーダと区分シェーダの2つのシェーダがあります。
バーテックスシェーダ
グラフの頂点データの処理を担当。頂点の情報を変更することができます。
主な役割
- gl_Positionによる頂点の設定
- スライスシェーダにデータを渡すための投票変数を定義します。
フィルムエレメントの着色
ラスタライズ後の情報の処理、つまり指定されたタプル内のピクセル点の色付けを担当します。
照明効果
光源、媒体、反射のタイプによって決まります。
一般的に使用される光源には、アンビエントライト、パラレルライト、ポイントライト、スポットライトの4種類があります。
反射には拡散反射と鏡面反射の2種類があります。
空間への接続
タンジェント空間は、ジオメトリの頂点が位置する平面の頂点 uv 座標と法線からなる特殊な座標系です。
接空間の3軸は一般にT、B、Nの文字で表されるため、接空間はTBN空間とも呼ばれます。Tは接線、Bは副接線、Nは法線を表します。
1つはジオメトリの頂点データからタンジェントとサブタンジェントを計算し、法線ベクトルと組み合わせてTBN行列を構成する方法です。もう1つの方法は、偏導関数を使用して、接線と副接線が頂点で事前に計算されないようにする方法です。
ノーマルマッピング
具体的には、法線マッピングはサーフェスの法線データを保存するためにイメージを使用します。このイメージは法線テクスチャと呼ばれ、その上の各ピクセルが法線データの1つの座標点に対応します。法線テクスチャに格納された法線ベクトルデータとTBN行列に基づいて、実際の法線が計算され、実際の法線を使って光の反射が計算されます。
z-fighting
WebGL で深度検出をオンにして 3D オブジェクトを描画する場合、エンジンは自動的に 3D オブジェクトの深度を計算し、視聴者に近いオブジェクトの顔が、視聴者に背を向けている遠いオブジェクトの顔から隠れるようにします。このマスキングは具体的にどのように行われるのですか？カメラ空間におけるオブジェクトのZ座標に基づいています。
ただし、2 つの面が同じ z 座標を持ち、重なり合っている特殊なケースがあります。この場合、エンジンはA面を最初にレンダリングし、次にB面を最初にレンダリングすることがあります。
座標がまったく同じでないように設定することは、Zファイトを解決する一つの方法です。
