https://github.com/rreusser/bloom-effect-example

sub-optimal regl-based bloom effect in nearly-vanilla WebGL
https://github.com/rreusser/bloom-effect-example

Last synced: about 2 months ago
JSON representation

sub-optimal regl-based bloom effect in nearly-vanilla WebGL

• Host: GitHub
• URL: https://github.com/rreusser/bloom-effect-example
• Owner: rreusser
• License: mit
• Created: 2020-02-17T05:19:00.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-05T08:45:45.000Z (about 2 years ago)
• Last Synced: 2024-10-20T12:44:00.864Z (2 months ago)
• Language: JavaScript
• Homepage: https://rreusser.github.io/bloom-effect-example/
• Size: 2.46 MB
• Stars: 28
• Watchers: 3
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Bloom Effect Example

> [regl](https://github.com/regl-project/regl)-based bloom effect in nearly-vanilla WebGL

## Introduction

This example performs a bloom effect in WebGL using a [separable Gaussian blur](https://github.com/Jam3/glsl-fast-gaussian-blur). To achieve a relatively smooth blur with relatively few passes, it downsamples the full-size framebuffer when computing the blur and performs blur passes of, for example, radius 32, 16, 8, 4, 2, and finally 1 pixel. That makes it not really an exact Gaussian blur, but seems to get the job done.

Please be advised that the goal here is not an optimal implementation of a bloom effect but more to present a way to implement post-processing effects like these effects in [regl](https://github.com/regl-project/regl). I hope maybe this repo is useful for someone, but don't overestimate its value. 😄  The standard if you really want to perform real-time bloom seems to be some combination of mip-maps/image pyramids and [Kawase's method](https://software.intel.com/en-us/blogs/2014/07/15/an-investigation-of-fast-real-time-gpu-based-image-blur-algorithms).

Update: I've added an FFT implementation as well which performs a full convoution and uses some sort of star pattern instead of a gaussian kernel.

[Live example](https://rreusser.github.io/bloom-effect-example/)

![bloom](./docs/bloom.jpg)

## License

© 2020 Ricky Reusser. MIT License.