Postprocessing example

[Nek]

Hello!

Is there a post-processing example available somewhere? As far as I can understand I can use Portals for it, but my overall experience isn't good enough to figure it out by myself.

Thanks for the great project!

[CodyJasonBennett]

You can create a full-screen postprocessing effect by rendering to a mesh with a triangle geometry that doesn't regard camera or model transforms. It will thus be incompatible with frustum culling, but this is a practice you can apply to any graphics library to save on fragment cost (very important for mobile, pmndrs/postprocessing does this).

https://codesandbox.io/s/react-ogl-postprocessing-ct013j

Portals allow you to render JSX into objects in or outside of react but also notably modify scene and other state from hooks like useOGL and useFrame, so you can build an intelligent effects composer from components and use the state model to create inputs/outputs.

To be honest, I wouldn't recommend OGL or by extension this library for any production work. Its WebGL state model is very fragile which is unfortunately by design, and we're seeing WebGPU shipping to platforms as early as April. If you're after a small & modern graphics library, I'd look into something like https://github.com/codyjasonbennett/four. This isn't on NPM yet, and was literally from a 13KB code-golf, but it has replaced OGL for me for the foreseeable future.

[Nek]

Thanks a lot for a thorough answer and the hint about four. I'll look into it.