Cornell Box Lab v1.0 Beta | ブラウザ上でカスタムコーネルボックスを構築できるWebアプリ！

ブラウザ上のWebGPUでコーネルボックスを構築しリアルタイムにパストレーシングした結果をレンダリング可能な無料ツール「Cornell Box Lab v1.0」をベータ公開しました。

Cornell Box Lab v1.0 Beta

ブラウザ上のWebGPUでコーネルボックスをリアルタイムにパストレーシングする無料ツールです。サーバー側ではレンダリングせず、計算はすべて手元のGPUで実行されます。

• 形状はポリゴンではなく、SDF(符号付き距離関数)によるレイ交差で手続き的に描画
• WebGPU対応ブラウザが必要
• 9言語対応(日本語・英語・フランス語・ドイツ語・韓国語・中国語・スペイン語・ポルトガル語・イタリア語)、ブラウザ言語の自動判定つき
• テーマカラー変更、元に戻す/やり直し(Undo/Redo)

シーン編集(ビュー上で直接操作)

• オブジェクトをクリックで選択、ドラッグで移動
• 選択中のオブジェクトにハンドルを表示
  • 幅・高さ・奥行きの個別スケール、全体拡縮、回転
  • 複製、削除、サイズ/回転のリセット
  • 形状の変更、色・質感の変更
• 複数選択で一括編集
• 壁の衝突検知、オブジェクトの自動上積み
• 部屋のサイズ(幅・高さ・奥行き)を変更可能。オブジェクト配置を部屋サイズに追従させられる
• 壁をクリックして色と質感を調整。
• 地面クリックで「ここにオブジェクトを追加」メニューを表示

形状(10種)

• ボックス / 球体 / シリンダー / コーン / トーラス / カプセル
• 正八面体 / 正二十面体 / 正四面体 / 正十二面体

マテリアル

• 種類は「通常」「発光」「ガラス」から選択
• ラフネス、メタリック
• サブサーフェス散乱(SSS): 色と散乱半径を調整可能
• ガラス: 屈折率(IOR)を調整可能
• クリアコート(ラフネスも調整可能)
• 発光強度
• 壁の6面(天井・床・左・右・奥・手前)にも色と質感を個別に設定
  • 手前の壁は表示されないが、鏡面などの反射には映り込む
  • メニュー側に「最後に触った色・質感を全てに適用」ボタンあり

デカール(画像の投影)

• ロゴなどの画像を壁やオブジェクトに投影(最大5枚)
• 貼り付けた面の移動・回転・拡縮に自動追従
• 移動・サイズ・回転・投影距離をビュー上のハンドルで操作
• 色相・彩度・コントラスト、不透明度、ラフネス、メタリック、発光を個別に調整

光源

• 形状は矩形 / 丸形
• 設置面は天井・床・左右・奥の壁から選択
• 灯数は1 / 4 / 9 / 16 / 25灯
• 強さ、拡散具合(ハード⇔ソフト)、色を調整
• 中央に戻すボタンあり

レンダリング

• ライティング手法(4種)
  • NEE(標準)
  • ReSTIR DI(実験的)
  • ライトプローブ(軽量GI)
  • 軽量(低スペック向け・影あり/GIなし)
• アセット品質は「標準」と「高品質(ベベル形状)」から選択
• バウンス数、フレームあたりサンプル数、視野角(FOV)、露出、自動露出補正
• ビュー変換は Reinhard / ACES(フィルミック) / Raw
• デノイザーはバイラテラル / À-Trous(マルチパス) / なし(カーネル半径・法線・深度・輝度の許容差などを調整可能)
• 待つほどノイズが減るプログレッシブ蓄積。蓄積のリセットも可能
• 縦横比は 1:1 / 4:3 / 3:4 / 16:9 / 9:16
• 解像度は 480 / 640 / 960 / 1280 / ウィンドウ追従

ポストプロセス

• 魚眼、色収差
• AO(GTAO / VBAO / Simple)
• フォグ(密度・高さ減衰・散乱・指向性・色)
• 被写界深度(フォーカス距離・絞り)
• ブルーム、グレア、シャープ
• カラーグレーディング(彩度・コントラスト・明るさ)
• ビネット、グレイン
• CRT風(スキャンライン・湾曲・RGBマスク・蛍光体ブレンド)
• 後処理は蓄積済みの画像に対して適用するため、調整のたびに再計算しなくてよい

プリセット・設定

• 組み込みプリセットを収録
• 現在の設定を .json でエクスポート/インポート

書き出し

• 画像: PNG / JPEG / EXR(マルチパス)
  • EXRには線形HDRカラー、深度(Z)、法線を含み、コンポジット用途に使える
• 3Dモデル: GLB / USD / OBJ
  • 壁とオブジェクトの形状・マテリアルを書き出す。光源とポストプロセスは含まない
• パノラマHDRi: 部屋の中心からの360°を EXR / HDR / PNG / JPEG で書き出し
  • 解像度は 2048×1024 または 4096×2048
  • 別ツールでこの空間をライティングする用途向け
  • プレビュー表示あり

使用技術

描画基盤

• WebGPU: GPU描画・計算のAPI。シェーダーはWGSLで記述
• vgpu (v0.3.1): WebGPUを薄くラップするOSSライブラリ(Vercel Labs製)。実行時の依存はこれ1つだけ
• SDFレイ交差: 形状はポリゴンではなく、符号付き距離関数で手続き的に描画

ライティング・レンダリング手法

• パストレーシング(compute shaderでフレームごとに蓄積)
• Next Event Estimation(NEE)
• ReSTIR DI(実験的)
• ライトプローブによる軽量GI
• バイラテラル / À-Trous デノイズ
• PCGハッシュ乱数(サンプリング用の疑似乱数)

ポストプロセス

• GTAO(Ground-Truth Ambient Occlusion)
• GT-VBAO(Visibility Bitmask AO): norio氏の three-gtvbao に着想
• ACESフィルミックトーンマップ(Narkowicz 2015 の近似式)
• Henyey–Greenstein位相関数: フォグの散乱に使用

書き出しフォーマット

• glTF 2.0(GLB)
• OpenUSD
• OBJ+MTL
• OpenEXR(マルチパス。カラー・深度・法線)
• HDR(Radiance)、PNG、JPEG

開発・配信

• TypeScript / Vite
• Cloudflare Pages(Wranglerで配信)

参考文献・参考資料

• Cornell Box(元祖のテストシーン): Cornell University Program of Computer Graphics
• Narkowicz, K. ACES Filmic Tone Mapping Curve: 解説記事
• Henyey, L. G. & Greenstein, J. L. (1941). Diffuse radiation in the Galaxy. Astrophysical Journal, 93, 70–83: ADS
• Jimenez, J., et al. (2016). Practical Realtime Strategies for Accurate Indirect Occlusion. SIGGRAPH Talks(GTAO): PDF
• Therrien, O., Levesque, S. & Gilet, G. (2023). Screen Space Indirect Lighting with Visibility Bitmask: arXiv:2301.11376
• Bitterli, B., et al. (2020). Spatiotemporal reservoir resampling for real-time ray tracing with dynamic direct lighting. ACM TOG(ReSTIR): 論文ページ
• Khronos glTF 2.0 Specification
• Pixar OpenUSD
• OpenEXR(Academy Software Foundation)
• PCG乱数

リンク