compute_effect

English | 日本語

概要

compute_effect は、AO / Shadow Map / SSR に加えて、Compute Toon / Compute DoF / Compute Bloom / Compute Edge も同じ高水準 API で扱えるかを検証するサンプルです。標準の Space と Shape で作った scene を入力にし、core に採用した webg/ComputeEffectPipeline.js が G-buffer、shadow、screen-space effect、post effect、最終出力までの順序を管理します。

ComputeEffectPipeline
  -> GeometryBufferPass
  -> ShadowMapPass / SpotShadowMapPass
  -> ComputeShadowPass / ComputeSpotShadowPass
  -> SsaoPass
  -> ComputeSsrPass
  -> ComputeEffectComposer
  -> ComputeToonPass
  -> ComputeDofPass
  -> ComputeBloomPass
  -> ComputeEffectToneMapPass
  -> ComputeEdgePass

Shadow Map は既定では directional light として処理されます。アプリケーション側で shadow.type: "spot" と shadow.spot の位置、方向、FOV、inner / outer angle を渡すと、同じ ComputeEffectPipeline から spot light shadow も選択できます。directional と spot は同じG-bufferを入力にしますが、shadow mapの投影方法と影評価passが異なるため、実行中に切り替える場合は renderScene() と encode() の両方へ同じ shadow.type を渡します。

ComputeEffectComposer は SSR の反射を作業用 color へ合成する段階を担当し、ComputeEffectToneMapPass はその後に 1 回だけ表示用の色変換を担当します。Toon は表示変換より前の color を段階化し、輪郭線とは別の役割として扱います。DoF と Bloom も同じく表示変換より前で処理され、Edge は表示変換後の最終 color に重ねます。

このサンプルでは ComputeEffectPipeline の gbufferColorMode を "litMaterial" に設定し、G-buffer color に材質色だけでなく直接光の diffuse / specular を含めた状態で確認します。これにより、SSR などの反射表現を使っているのに直接光のハイライトだけが消える不自然さを避け、通常の scene 表示に近い見た目から postprocess の効果を比較できます。Albedo を分離した高度な deferred lighting や material debug が必要な場合は、"albedo" へ切り替えて確認します。

実行方法

• 実行ファイルは ./compute_effect.html です
• WebGPU 対応ブラウザで開き、CommandPalette と Help Panel の 0.5 秒平均負荷も確認してください

操作

• Drag: camera orbit
• Double tap canvas または /: CommandPalette を開く

CommandPalette から SSAO / Shadow Map / SSR / Toon / DoF / Bloom / Edge の ON/OFF を切り替えられます。Toon の段階数、Edge の太さと合成モード、SSR の composer mode（mix / add）、ToneMap の reinhard / linear、exposure、saturation、gamma、Shadow Ambient、Direct Intensity、反射率、背景色も同じ palette から調整できます。

Toon / DoF / Bloom / Edge は初期状態では OFF にしてあり、必要な effect だけを追加して負荷と見た目を確認できます。Help Panel には CPU / GPU Compute / GPU Render / GPU Total の 0.5 秒平均値を表示します。瞬間値ではなく短い平均値にすることで、palette 操作後の負荷変化を読み取りやすくしています。

確認ポイント

• main.js が低水準 pass の bind group や storage texture を直接扱わず、pipeline.renderScene(...) と pipeline.encode(...) で統合 effect を実行できていること
• ComputeEffectPipeline が GeometryBufferPass の normal/depth を SSAO、directional / spot Shadow Map 評価、SSR、DoF で共有していること
• Toon -> DoF -> Bloom -> Edge の post effect が、composer 後段の任意追加 effect として扱えること
• Help Panel の CPU / GPU Compute / GPU Render / GPU Total が 0.5 秒平均で更新されること

この sample は ../../webg/ComputeEffectPipeline.js を直接 import し、sample 専用の複製実装を持たない構成です。