playcanvas / engine

JavaScript game engine built on WebGL, WebGPU, WebXR and glTF
https://playcanvas.com
MIT License
9.67k stars 1.35k forks source link

Create modern looking bloom post-effect #5187

Closed mvaligursky closed 11 months ago

mvaligursky commented 1 year ago

Currently, the engine only has a simple bloom effect, and a modern implementation is needed.

references: https://learnopengl.com/Guest-Articles/2022/Phys.-Based-Bloom https://www.froyok.fr/blog/2021-09-ue4-custom-lens-flare/ https://twitter.com/iced_coffee_dev/status/1617580408576565251?t=OYAlQMbMAx4PYCKlx7HplQ&s=03

SashaRX commented 1 year ago

I experimented with it on this tutorial https://playcanv.as/b/491d8a85

willeastcott commented 1 year ago

That looks cool, @SashaRX. Did you experience any problems or limitations using the technique from that article?

SashaRX commented 1 year ago

That looks cool, @SashaRX. Did you experience any problems or limitations using the technique from that article?

In general, everything went really fast, despite my poor programming skills). I still haven't worked out how to use blendState and pc.drawQuadWithShader. Here it uses render to hdr render target, I use linear space, it's possible that this is not correct everywhere, since I didn't specify that albedo should be srgb for example, but it seems to be correct.

MAG-AdrianMeredith commented 1 year ago

Looks good I'll be interested to see how that compares to our version. I made a custom enhancement to playcanvas hdr mode so that it renders to 11bits not 16bit. This was a lot faster to render on my m1 macbook (3-4ms). The one issue still remaining is alpha blended objects look different like they are being double tonemapped or something....

p.s. I mostly followed this one https://www.youtube.com/watch?v=tI70-HIc5ro

image
mvaligursky commented 1 year ago

I'm definitely keen to have this working on 11bits as well, to have a wider device support as well. Part of the reason is that WebGPU does not currently handle float texture linear sampling .. and so that's a good way to get it to run there too.

Both results look fantastic.

GSterbrant commented 1 year ago

I am also adding this link to the UE current bloom method for visibility: https://www.froyok.fr/blog/2021-12-ue4-custom-bloom/

mvaligursky commented 1 year ago

Another awesome work on this: https://forum.playcanvas.com/t/physically-based-hdr-bloom/31759

mvaligursky commented 1 year ago

@GSterbrant - you did some work on this as well, could you please create a PR for this (just attach the file in current state), link the PR here and close the PR (for now), just to keep reference to that file.

mvaligursky commented 1 year ago

https://twitter.com/turanszkij/status/1680836739399667713

MAG-AdrianMeredith commented 1 year ago

I like that custom ue4 one. I believe I can share the source to my implementation if you're interested though its still not 100% imo

mvaligursky commented 1 year ago

Ideally we'd implement in using this system when ready: https://github.com/playcanvas/engine/issues/5687