bloom
English | 日本語

Overview
- This sample uses
BloomPassto render the 3D scene once into an offscreenRenderTarget, then composites bloom before returning the result to the canvas - It is a minimal implementation for confirming that postprocess can be added as an independent layer even before introducing PBR or shadow maps
WebgAppis used for startup and CommandPalette display, while the 3D scene itself is switched to offscreen rendering withautoDrawScene: false- The operation guide is collected at the upper left with
buildHelpPanelOptions()andshowOverlayPanel(), and when it is not needed the body can be folded away so only theShow Helpbutton remains - In addition to the specular highlight on the center sphere, strongly emissive warm, blue, and pink small spheres are placed so it is easier to see how colored glow spreads into the darker background
How to Run
- Open ./bloom.html
- Use a browser with WebGPU support, and check the help panel and CommandPalette together with the sample when needed
webg Features Used
buildHelpPanelOptions() + showOverlayPanel(): builds the standard help panel at the upper left and toggles the visibility of the operation guideEyeRig(type="orbit"): orbit viewpoint for looking around the whole sceneRenderTarget: offscreen color/depth texture that serves as the drawing destination for the 3D sceneWebgApp.light.mode = "world-node": uses a flow where the light is placed in world space instead of being fixed to the cameraShape: generates the glow objects and the floor geometryCommandPalette: shows and edits current bloom parameter values in one settings panel
Checkpoints
- Confirm that the 3D scene is not drawn directly to the canvas but first to the offscreen target, then displayed after bloom compositing
- Confirm that blur appears around the center sphere and the bright orbs, and that only the bright parts spread rather than the whole image simply becoming blurry
- Confirm that glow also appears around the warm, blue, and pink emissive spheres in the upper-back area of the screen, so colored bloom is visible over the dark background
- Confirm that the help panel appears at the upper left, that pressing
Hide Helpleaves only theShow Helpbutton, and thatShow Helprestores it - Confirm that CommandPalette shows current values directly on steppers, selectors, and toggles, and that the values can be edited in place
- When
Btoggles bloom on or off, confirm that only the presence of the postprocess changes while the scene itself stays the same - When changing threshold with
1 / 2, strength with3 / 4, blur iterations with5 / 6, and blur radius with7 / 8, confirm that the visual result and the CommandPalette values match - When changing
extractIntensitywithA / S, confirm how strongly the colored emissive spheres and highlights are routed into the extract view - When
Uswitches blur quality between full and half, confirm how the blur appearance and blur-target size change - When changing
softKneewithQ / W,extractIntensitywithA / S, exposure withT / Y, and tone-map mode withG, confirm how the extraction boundary and final composite appearance change - In the
Tone MapandExposurerows on the CommandPalette, confirm that the colors are tone-mapped after bloom compositing - Confirm that the threshold boundary does not switch abruptly, and that
softKneemakes highlights near the boundary extract more smoothly - Because bloom extraction uses not only luma but also
max(rgb)more strongly, confirm that strongly emissive blue and pink colors enter the extract view more easily - Use
Vto switch betweencomposite / scene / extract / extractHeat / blurA / blurBand confirm that the extract colors themselves and the gain shown as heat can be inspected separately - Confirm that even when the viewport size changes,
BloomPass.resizeToScreen()keeps the offscreen target in sync so bloom positions do not slip and resolution does not break - Confirm that rotating only the camera does not make the highlight positions follow perfectly, showing that a world-fixed light is in use
- On narrow screens, confirm that CommandPalette can be opened only when needed, so parameter controls do not keep covering the scene
Controls
Hide Help / Show Helpin the upper-left help panel: show or hide the operation-guide body text- Drag / arrow keys: orbit camera rotation
- Mouse wheel /
[ / ]: zoom B: toggle bloom on or off1 / 2: decrease or increase threshold3 / 4: decrease or increase bloom strength5 / 6: decrease or increase blur iterations7 / 8: decrease or increase blur radiusU: switch blur quality between full and halfQ / W: decrease or increasesoftKneeA / S: decrease or increaseextractIntensityT / Y: decrease or increase exposureG: switch tone-map mode betweenoff / reinhard / acesV: switch display betweencomposite / scene / extract / extractHeat / blurA / blurBSpace: pause or resume orb rotationR: restore bloom parameters to their defaults