need help for bloom effect with twgl

[tiye]

Googled and found no existing examples. I found some useful information related to how to use framebuffers and how bloom effect is calculated, but it turned out still difficult to write a viable version for twgl

• https://stackoverflow.com/a/8682663/883571
• https://webplatform.github.io/docs/tutorials/post-processing_with_webgl/index.html

is there any example or plugin I could refer to?

also found an example based on regl https://github.com/rreusser/bloom-effect-example however it doesn't fit my current use case.

[greggman]

IIRC A bloom filter is a multi-step process

1. Render the scene to a texture (scene-texture)
2. Render the scene-texture to another texture (bright-texture) with a shader that discards any pixels below a certain brightness level. How you compute brightness is up to you.
3. Blur the previous bright-texture into a blur-texture (this might take 2 steps for speed)
4. Draw the (scene-texture) blended (added) with blur-texture.

This article goes over the steps, including step 3 using 2 steps.

See: https://learnopengl.com/Advanced-Lighting/Bloom

Step 2 can also be done with special data where you mark certain materials as "glowing". It'd be up to you how to specify that data. Some people use a glow texture (white = glow, black = no-glow), some use special materials. In any case in step 1 (or 1.5) you'd generate a glow-texture to tell you which pixels to keep in step 2, rather than just choosing some brightness

[greggman]

Here's an example just mostly following the article linked above

https://jsgist.org/?src=56ac45885fa7245707c5e649b0fa8879

[tiye]

excuse me, is there any example for glowing WebGPU textures? I tried to reuse the steps but with code from blur sample, it was really slow. I'm still confused on how to apply glowing to texture_2d and texture_storage_2d in WebGPU..

[greggman]

doing a blur in WebGPU can be done no differently than a blur in WebGL. Just copy the steps from the WebGL answer and example above and convert them to WebGPU. There is no reason to use texture_storage_2d. All the same techniques used in the WebGL example will work in WebGPU.