compute_effect

English | 日本語

Overview

compute_effect is a sample for checking whether AO, Shadow Map, SSR, Compute Toon, Compute DoF, Compute Bloom, and Compute Edge can live behind one higher-level API. The application provides a normal Space made from Shape objects, while the core-adopted webg/ComputeEffectPipeline.js owns the G-buffer, shadow, screen-space effects, post effects, and final output order.

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

Shadow Map uses a directional light by default. When the application passes shadow.type: "spot" together with shadow.spot position, direction, FOV, and inner / outer angles, the same ComputeEffectPipeline can select spot-light shadows. Directional and spot shadows share the same G-buffer input, but they use different shadow-map projections and shadow evaluation passes, so runtime switching must pass the same shadow.type to both renderScene() and encode().

ComputeEffectComposer handles SSR reflection composition into a working color, and ComputeEffectToneMapPass applies the display-facing color mapping once after later lighting-style effects. Toon quantizes the color before that display mapping, DoF and Bloom also run before the display mapping, and Edge is overlaid on the final display-facing color.

This sample sets ComputeEffectPipeline gbufferColorMode to "litMaterial" so the G-buffer color includes not only material color but also direct diffuse / specular lighting. That keeps direct-light highlights visible while SSR and other postprocess effects are enabled, making the result closer to an ordinary scene render. Switch to "albedo" only when advanced deferred lighting or material debugging needs a separated albedo buffer.

How to Run

• Open ./compute_effect.html
• Use a WebGPU-capable browser, and check the CommandPalette and the 0.5-second averaged Help Panel load

Controls

• Drag: camera orbit
• Double tap the canvas or press /: open the CommandPalette

The CommandPalette controls SSAO / Shadow Map / SSR / Toon / DoF / Bloom / Edge on and off. It also exposes Toon levels, Edge thickness and blend mode, SSR composer mode (mix / add), ToneMap reinhard / linear, exposure, saturation, gamma, Shadow Ambient, Direct Intensity, reflectivity, and background color.

Toon, DoF, Bloom, and Edge start disabled so each additional effect can be inspected separately. The Help Panel shows 0.5-second averages for CPU, GPU Compute, GPU Render, and GPU Total load. Short averages are easier to read than instantaneous values when comparing the cost of palette changes.

Checkpoints

• main.js can run the integrated effects through pipeline.renderScene(...) and pipeline.encode(...) without directly handling low-level bind groups or storage textures
• ComputeEffectPipeline shares GeometryBufferPass normal/depth outputs across SSAO, directional / spot shadow evaluation, SSR, and DoF
• Toon -> DoF -> Bloom -> Edge behaves as an optional post-effect chain after composition
• CPU / GPU Compute / GPU Render / GPU Total values update in the Help Panel as 0.5-second averages

This sample imports ../../webg/ComputeEffectPipeline.js directly and no longer keeps a sample-local duplicate implementation.