compute_dof

Overview

DoF is a postprocess that keeps surfaces near the focus distance sharp while blurring the foreground and background to create depth. This sample implements DoF with Compute Shader and uses staged blur so the appearance and GPU cost can be adjusted in a predictable way.

The frame first renders the 3D scene into a RenderTarget with both color and sampleable depth. The scene color is then downsampled into three low-resolution targets for small, medium, and large blur, and each target is blurred by the internal stage blur helper in webg/ComputeDofPass.js. The final dispatch reads the depth texture, converts non-linear depth back into view-space distance, compares it with focusDistance, and blends the original scene with the three blur results per pixel.

ComputeDofPass is the official webg core class for Compute Shader DoF. This sample imports webg/ComputeDofPass.js directly and demonstrates staged blur, sample spacing, and low-resolution targets through the official core API.

How To Run

Open ./compute_dof.html
Use a browser with WebGPU support, and check the help panel and CommandPalette together with the sample
Open the CommandPalette by double tapping the canvas or pressing /

Implementation Notes

focus distance is the distance that remains sharp. focus range is not the distance to maximum blur; it is the distance width of one blur stage. The shader converts the depth difference into a stage position with abs(depth - focusDistance) / focusRange: 0..1 moves from scene color to small blur, 1..2 moves from small to medium blur, 2..3 moves from medium to large blur, and values above 3 use large blur.

blur radius controls the tap range used by each blur pass. blur iterations controls how many horizontal/vertical blur rounds are stacked. sample step controls the pixel spacing between taps: sampleStep=1 reads neighboring pixels, while sampleStep=2 reads every other pixel with the same tap count. The sample widens blur by combining sample step and lower-resolution targets instead of only increasing tap count or iterations.

small scale, medium scale, and large scale control each blur target resolution relative to the canvas. The defaults are 0.7 for small, 0.5 for medium, and 0.3 for large. Lowering a scale reduces the number of pixels processed by that stage's downsample and blur passes, so the GPU cost should usually drop for that part of the pipeline. The final composite and scene render still run at full resolution, so total frame cost will not necessarily drop by the same ratio.

What To Check

Press V to switch between scene / depth / focus / blur / blurSmall / blurMedium / blurLarge / composite. depth checks depth linearization, focus shows the focus band and the signed foreground/background stages, and blurSmall, blurMedium, and blurLarge show each blur texture before compositing.

In focus view, the focus band is shown as 0, foreground stages are shown as -1 / -2 / -3, and background stages are shown as 1 / 2 / 3. Use this view to inspect how a single object moves through the blur stages. If an edge appears to change too suddenly, adjust focus range, sample step, and the stage scales.

This sample focuses on staged blur that is practical for Compute Shader. It does not try to reproduce physically exact circular bokeh, but it is designed to make the tradeoff between quality, GPU load, and controllability easy to observe in a real-time WebGPU sample.