3D RENDERING HISTORY
CHAPTER 06 · WEBGPU / WGSL / COMPUTE SHADER

一本ずつのレイを、GPUで並列に。

第5章の解析的な交差判定をWGSLのCompute Shaderへ移し、反射や影のための二次レイまで追跡する。物体と交差する計算をGPUの各スレッドで実行します。

LIVE · WEBGPU COMPUTEscript-start

WebGPUを初期化しています…

アダプターの情報を確認中

GPU処理の完了待ち時間を表示します

操作

WebGPUが使えない端末では、その理由を表示します。Canvas 2Dへの無言のフォールバックは行いません。

01 / PRIMARY RAY

各画素をGPUのスレッドに

8×8スレッドを1ワークグループとして起動し、球2個と床との交差を計算。最短の正の距離から法線と色を求めます。

02 / SECONDARY RAYS

影と反射もレイで調べる

「影」をONにすると光源方向への遮蔽検査を追加。反射回数を増やすと反射方向に次のレイを飛ばします。

03 / GPU PIPELINE

計算と画面表示は別

Compute Shaderで rgba8unorm のGPUテクスチャに書き込み、画面表示は専用の頂点・フラグメントシェーダーに渡します。

レイトレーシングの種類に注意

この教材はCompute Shaderによるソフトウェア交差判定です。専用のハードウェアRTパイプラインやBVHを使う実装ではありません。また確率的なパストレーシングでもなく、球と平面に限った鏡面反射の練習用実装です。

レイ方程式・反射・WGSL・制約を教科書で読む ↗