WebGLレイトレーシング：WebGLコンピュートシェーダーによるリアルタイムレイトレーシング

写真のようにリアルな画像で有名なレンダリング技術であるレイトレーシングは、従来、計算負荷が高く、オフラインのレンダリングプロセスに限定されていました。しかし、GPU技術の進歩とコンピュートシェーダーの導入により、WebGL内でのリアルタイムレイトレーシングへの道が開かれ、ウェブベースのアプリケーションに高忠実度のグラフィックスがもたらされました。この記事では、ウェブグラフィックスの限界を押し広げることに関心を持つ世界中の開発者を対象に、WebGLのコンピュートシェーダーを使用したリアルタイムレイトレーシングの実装に関する包括的なガイドを提供します。

レイトレーシングとは？

レイトレーシングは、現実世界での光の進み方をシミュレートします。ポリゴンをラスタライズする代わりに、レイトレーシングはカメラ（または目）から画面上の各ピクセルを通してシーン内にレイ（光線）を投射します。これらのレイはオブジェクトと交差し、そのオブジェクトのマテリアルプロパティに基づいて、光が表面でどのように反射し相互作用するかを計算することでピクセルの色が決定されます。このプロセスには、反射、屈折、影が含まれ、非常にリアルな画像が得られます。

レイトレーシングの主要概念：

• レイキャスティング： カメラからシーン内にレイを射出するプロセス。
• 交差判定： レイがシーン内のオブジェクトとどこで交差するかを決定すること。
• サーフェスノーマル（法線）： 交差点の表面に垂直なベクトルで、反射と屈折の計算に使用されます。
• マテリアルプロパティ： 表面が光とどのように相互作用するかを定義します（例：色、反射率、粗さ）。
• シャドウレイ： 交差点から光源に向かってレイを投射し、その点が影になっているかどうかを判断します。
• 反射レイと屈折レイ： 交差点からレイを投射し、反射と屈折をシミュレートします。

なぜWebGLとコンピュートシェーダーなのか？

WebGLは、プラグインを使用せずにウェブブラウザで2Dおよび3DグラフィックスをレンダリングするためのクロスプラットフォームAPIを提供します。WebGL 2.0で導入されたコンピュートシェーダーは、GPU上での汎用計算を可能にします。これにより、GPUの並列処理能力を活用して、レイトレーシング計算を効率的に実行できます。

レイトレーシングにWebGLを使用する利点：

• クロスプラットフォーム互換性： WebGLは、オペレーティングシステムに関係なく、最新のウェブブラウザで動作します。
• ハードウェアアクセラレーション： 高速なレンダリングのためにGPUを活用します。
• プラグイン不要： ユーザーが追加のソフトウェアをインストールする必要がありません。
• アクセシビリティ： ウェブを通じて、より多くの人々がレイトレーシングにアクセスできるようになります。

コンピュートシェーダーを使用する利点：

• 並列処理： GPUの大規模並列アーキテクチャを活用して、効率的なレイトレーシング計算を行います。
• 柔軟性： レイトレーシングに合わせたカスタムアルゴリズムと最適化が可能です。
• 直接的なGPUアクセス： 従来のレンダリングパイプラインをバイパスし、より高度な制御を可能にします。

実装の概要

WebGLでコンピュートシェーダーを使用してレイトレーシングを実装するには、いくつかの重要なステップが含まれます：

1. WebGLコンテキストの設定： WebGLコンテキストを作成し、必要な拡張機能を有効にします（WebGL 2.0が必要です）。
2. コンピュートシェーダーの作成： レイトレーシング計算を実行するコンピュートシェーダーのGLSLコードを記述します。
3. シェーダーストレージバッファオブジェクト（SSBO）の作成： シーンデータ、レイデータ、最終画像を保存するためにGPU上にメモリを割り当てます。
4. コンピュートシェーダーのディスパッチ： コンピュートシェーダーを起動してデータを処理します。
5. 結果の読み戻し： レンダリングされた画像をSSBOから取得し、画面に表示します。

詳細な実装手順

1. WebGLコンテキストの設定

最初のステップは、WebGL 2.0コンテキストを作成することです。これには、HTMLからcanvas要素を取得し、WebGL2RenderingContextを要求することが含まれます。コンテキストが正常に作成されたことを確認するために、エラーハンドリングが重要です。

            const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl2');

if (!gl) {
  console.error('WebGL 2.0 is not supported.');
}
            

              
                Copy
              
            
          

2. コンピュートシェーダーの作成

レイトレーサーの中核は、GLSLで記述されたコンピュートシェーダーです。このシェーダーは、レイの投射、交差判定、各ピクセルの色の計算を担当します。コンピュートシェーダーは、ワークグループのグリッド上で動作し、それぞれが画像の小さな領域を処理します。

以下は、ピクセル座標に基づいて基本的な色を計算するコンピュートシェーダーの簡略化された例です：

            #version 310 es

layout (local_size_x = 8, local_size_y = 8) in;

layout (std430, binding = 0) buffer OutputBuffer {
  vec4 pixels[];
};

uniform ivec2 resolution;

void main() {
  ivec2 pixelCoord = ivec2(gl_GlobalInvocationID.xy);

  if (pixelCoord.x >= resolution.x || pixelCoord.y >= resolution.y) {
    return;
  }

  float red = float(pixelCoord.x) / float(resolution.x);
  float green = float(pixelCoord.y) / float(resolution.y);
  float blue = 0.5;

  pixels[pixelCoord.y * resolution.x + pixelCoord.x] = vec4(red, green, blue, 1.0);
}

            

              
                Copy
              
            
          

このシェーダーは、8x8のワークグループサイズ、`pixels`という名前の出力バッファ、画面解像度のためのuniform変数を定義します。各ワークアイテム（ピクセル）は、その位置に基づいて色を計算し、出力バッファに書き込みます。

3. シェーダーストレージバッファオブジェクト（SSBO）の作成

SSBOは、CPUとGPUの間で共有されるデータを格納するために使用されます。この場合、SSBOを使用してシーンデータ（例：三角形の頂点、マテリアルプロパティ）、レイデータ、および最終的にレンダリングされた画像を格納します。SSBOを作成し、バインディングポイントにバインドし、初期データを入力します。

            // Create the SSBO
const outputBuffer = gl.createBuffer();
gl.bindBuffer(gl.SHADER_STORAGE_BUFFER, outputBuffer);
gl.bufferData(gl.SHADER_STORAGE_BUFFER, imageWidth * imageHeight * 4 * 4, gl.DYNAMIC_COPY);

// Bind the SSBO to binding point 0
gl.bindBufferBase(gl.SHADER_STORAGE_BUFFER, 0, outputBuffer);

            

              
                Copy
              
            
          

4. コンピュートシェーダーのディスパッチ

コンピュートシェーダーを実行するには、それをディスパッチする必要があります。これには、各次元で起動するワークグループの数を指定することが含まれます。ワークグループの数は、総ピクセル数をシェーダーで定義されたワークグループサイズで割ることによって決定されます。

            const workGroupSizeX = 8;
const workGroupSizeY = 8;
const numWorkGroupsX = Math.ceil(imageWidth / workGroupSizeX);
const numWorkGroupsY = Math.ceil(imageHeight / workGroupSizeY);

gl.dispatchCompute(numWorkGroupsX, numWorkGroupsY, 1);
gl.memoryBarrier(gl.SHADER_STORAGE_BARRIER_BIT);

            

              
                Copy
              
            
          

`gl.dispatchCompute`はコンピュートシェーダーを起動します。`gl.memoryBarrier`は、CPUがSSBOから読み取ろうとする前に、GPUがSSBOへの書き込みを完了したことを保証します。

5. 結果の読み戻し

コンピュートシェーダーの実行が完了した後、レンダリングされた画像をSSBOからCPUに読み戻す必要があります。これには、CPU上にバッファを作成し、`gl.getBufferSubData`を使用してSSBOからCPUバッファにデータをコピーすることが含まれます。最後に、そのデータを使用して画像要素を作成します。

            // Create a buffer on the CPU to hold the image data
const imageData = new Float32Array(imageWidth * imageHeight * 4);

// Bind the SSBO for reading
gl.bindBuffer(gl.SHADER_STORAGE_BUFFER, outputBuffer);
gl.getBufferSubData(gl.SHADER_STORAGE_BUFFER, 0, imageData);

// Create an image element from the data (example using a library like 'OffscreenCanvas')
// Display the image on the screen

            

              
                Copy
              
            
          

シーン表現と高速化構造

レイトレーシングの重要な側面は、シーン内のレイとオブジェクト間の交差点を効率的に見つけることです。各レイをすべてのオブジェクトに対してテストするブルートフォースの交差判定は、計算コストが非常に高くなります。パフォーマンスを向上させるために、高速化構造を使用してシーンデータを整理し、特定のレイと交差する可能性の低いオブジェクトを迅速に除外します。

一般的な高速化構造：

• バウンディングボリューム階層（BVH）： 各ノードがオブジェクトのセットを囲むバウンディングボリュームを表す階層的なツリー構造です。これにより、シーンの大部分を迅速に除外できます。
• Kd-Tree： シーンを再帰的に小さな領域に分割する空間分割データ構造です。
• 空間ハッシュ： シーンをセルのグリッドに分割し、オブジェクトが交差するセルにオブジェクトを格納します。

WebGLレイトレーシングでは、実装が比較的容易でパフォーマンスも良好なため、BVHがしばしば好ましい選択肢となります。BVHの実装には、以下のステップが含まれます：

1. バウンディングボックスの計算： シーン内の各オブジェクト（例：三角形）のバウンディングボックスを計算します。
2. ツリーの構築： 各リーフノードが少数のオブジェクトを含むまで、シーンを再帰的に小さなバウンディングボックスに分割します。一般的な分割基準には、最長軸の中点や表面積ヒューリスティック（SAH）などがあります。
3. トラバーサル： レイトレーシング中に、ルートノードから開始してBVHをトラバースします。レイがノードのバウンディングボックスと交差する場合、その子ノードを再帰的にトラバースします。レイがリーフノードと交差する場合、そのノードに含まれるオブジェクトに対して交差判定を実行します。

GLSLでのBVH構造の例（簡略化）：

            struct BVHNode {
  vec3 min;
  vec3 max;
  int leftChild;
  int rightChild;
  int triangleOffset; // Index of the first triangle in this node
  int triangleCount;  // Number of triangles in this node
};

            

              
                Copy
              
            
          

レイと三角形の交差判定

レイトレーシングで最も基本的な交差判定は、レイと三角形の交差判定です。このテストを実行するためのアルゴリズムは数多く存在しますが、その中でもMöller–Trumboreアルゴリズムは、その効率性と単純さから広く使用されています。

Möller–Trumboreアルゴリズム：

Möller–Trumboreアルゴリズムは、線形方程式系を解くことによって、レイと三角形の交差点を計算します。これには、三角形内の交差点の位置を決定する重心座標の計算が含まれます。重心座標が[0, 1]の範囲内にあり、その合計が1以下の場合、レイは三角形と交差します。

GLSLコードの例：

            bool rayTriangleIntersect(Ray ray, vec3 v0, vec3 v1, vec3 v2, out float t) {
  vec3 edge1 = v1 - v0;
  vec3 edge2 = v2 - v0;
  vec3 h = cross(ray.direction, edge2);
  float a = dot(edge1, h);

  if (a > -0.0001 && a < 0.0001)
    return false;    // Ray is parallel to triangle

  float f = 1.0 / a;
  vec3 s = ray.origin - v0;
  float u = f * dot(s, h);

  if (u < 0.0 || u > 1.0)
    return false;

  vec3 q = cross(s, edge1);
  float v = f * dot(ray.direction, q);

  if (v < 0.0 || u + v > 1.0)
    return false;

  // At this stage we can compute t to find out where the intersection point is on the line.
  t = f * dot(edge2, q);

  if (t > 0.0001) // ray intersection
  {
    return true;
  }
  else // This means that there is a line intersection but not a ray intersection.
    return false;
}

            

              
                Copy
              
            
          

シェーディングとライティング

交差点が見つかったら、次のステップはピクセルの色を計算することです。これには、交差点で光が表面とどのように相互作用するかを決定することが含まれます。一般的なシェーディングモデルには、次のものがあります：

• フォンシェーディング： 光の拡散成分と鏡面反射成分を計算する単純なシェーディングモデル。
• Blinn-Phongシェーディング： 鏡面反射成分を計算するためにハーフウェイベクトルを使用する、フォンシェーディングの改良版。
• 物理ベースレンダリング（PBR）： マテリアルの物理的特性を考慮に入れた、より現実的なシェーディングモデル。

レイトレーシングは、グローバルイルミネーション、反射、屈折など、ラスタライゼーションよりも高度なライティング効果を可能にします。これらの効果は、交差点から追加のレイを投射することで実装できます。

例：拡散光の計算

            vec3 calculateDiffuse(vec3 normal, vec3 lightDirection, vec3 objectColor) {
  float diffuseIntensity = max(dot(normal, lightDirection), 0.0);
  return diffuseIntensity * objectColor;
}

            

              
                Copy
              
            
          

パフォーマンスに関する考慮事項と最適化

レイトレーシングは計算負荷が高く、WebGLでリアルタイムパフォーマンスを達成するには慎重な最適化が必要です。以下にいくつかの主要なテクニックを示します：

• 高速化構造： 前述の通り、BVHのような高速化構造を使用することは、交差判定の回数を減らすために不可欠です。
• 早期レイ終了： 最終的な画像に大きく寄与しないレイは早期に終了させます。たとえば、シャドウレイはオブジェクトに当たった瞬間に終了させることができます。
• 適応サンプリング： シーンの複雑さに応じて、ピクセルあたりのサンプル数を可変にします。ディテールが多い領域や複雑なライティングのある領域は、より多くのサンプルでレンダリングできます。
• デノイジング： デノイジングアルゴリズムを使用してレンダリング画像のノイズを低減し、ピクセルあたりのサンプル数を減らすことを可能にします。
• コンピュートシェーダーの最適化： メモリアクセスを最小限に抑え、ベクトル演算を使用し、分岐を避けることで、コンピュートシェーダーのコードを最適化します。
• ワークグループサイズの調整： さまざまなワークグループサイズを試して、ターゲットGPUに最適な構成を見つけます。
• ハードウェアレイトレーシングの使用（利用可能な場合）： 一部のGPUは現在、レイトレーシング専用のハードウェアを提供しています。WebGLでこの機能を公開する拡張機能を確認し、活用します。

グローバルな例と応用

WebGLにおけるレイトレーシングは、世界中のさまざまな産業で数多くの潜在的な応用があります：

• ゲーム： リアルなライティング、反射、影でウェブベースのゲームの視覚的忠実度を向上させます。
• 製品の可視化： eコマースやマーケティング向けに、写実的なレンダリングで製品のインタラクティブな3Dモデルを作成します。たとえば、スウェーデンの家具会社が、顧客が自宅で正確な照明と反射で家具を視覚化できるようにすることが可能です。
• 建築の可視化： リアルな照明とマテリアルで建築デザインを可視化します。たとえば、ドバイの建築事務所が、正確な太陽光と影のシミュレーションで建物のデザインを披露するためにレイトレーシングを使用できます。
• バーチャルリアリティ（VR）と拡張現実（AR）： レイトレーシング効果を取り入れることで、VRおよびAR体験のリアリズムを向上させます。たとえば、ロンドンの博物館が、レイトレーシングによって強化された視覚的ディテールを持つVRツアーを提供できます。
• 科学的可視化： 複雑な科学データをリアルなレンダリング技術で可視化します。たとえば、日本の研究所が、分子構造を正確な照明と影で可視化するためにレイトレーシングを使用できます。
• 教育： 光学と光輸送の原理を実証するインタラクティブな教育ツールを開発します。

課題と将来の方向性

WebGLでのリアルタイムレイトレーシングはますます実現可能になっていますが、いくつかの課題が残っています：

• パフォーマンス： 複雑なシーンで高いフレームレートを達成することは依然として課題です。
• 複雑さ： 本格的なレイトレーサーを実装するには、相当なプログラミングの労力が必要です。
• ハードウェアサポート： すべてのGPUがコンピュートシェーダーやハードウェアレイトレーシングに必要な拡張機能をサポートしているわけではありません。

WebGLレイトレーシングの将来の方向性には、次のものが含まれます：

• ハードウェアサポートの向上： より多くのGPUが専用のレイトレーシングハードウェアを搭載するにつれて、パフォーマンスは大幅に向上します。
• 標準化されたAPI： WebGLでのハードウェアレイトレーシングのための標準化されたAPIの開発は、実装プロセスを簡素化します。
• 高度なデノイジング技術： より洗練されたデノイジングアルゴリズムにより、より少ないサンプルで高品質の画像が可能になります。
• WebAssembly（Wasm）との統合： レイトレーサーの計算負荷の高い部分を実装するためにWebAssemblyを使用することで、パフォーマンスが向上する可能性があります。

結論

WebGLでコンピュートシェーダーを使用したリアルタイムレイトレーシングは、ウェブグラフィックスに革命をもたらす可能性を秘めた、急速に進化している分野です。レイトレーシングの基礎を理解し、コンピュートシェーダーの能力を活用し、最適化技術を用いることで、開発者はかつてウェブブラウザでは不可能と考えられていた見事な視覚体験を創造できます。ハードウェアとソフトウェアが改善し続けるにつれて、今後数年間で、ウェブ上でのレイトレーシングのさらに印象的な応用が見られることが期待され、それは最新のブラウザを備えたあらゆるデバイスから世界中のオーディエンスにアクセス可能になるでしょう。

このガイドは、WebGLでのリアルタイムレイトレーシングの実装に関わる概念と技術の包括的な概要を提供しました。世界中の開発者がこれらの技術を試し、ウェブグラフィックスの進歩に貢献することを奨励します。