Which way are we supposed to use postprocessing? about react-postprocessing

[drcmda]

looking around here might clear things up: https://github.com/vanruesc/postprocessing

this is the library that react-postprocessing wraps. pp is a very efficient and powerful library, you can hardly compare it to examples/jsm/effectcomposer which is thrown and pieced together, effects buggy as hell, not very performant. so yes, you can use three effectcomposer, or postprocessing. i'd suggest always use pp. either with this abstraction or raw.

i did use jsm/effectcomposer previously because i didn't know pp existed. someone told me to check it out, that's when we began to abstract it.

[unphased]

I think i understand that this repo react-postprocessing does give a different, and somewhat higher level API compared to raw three.js, so that's the reason for the difference, and there's not anything awry at all.

I think the extra control provided by directly configuring the three features will be good for me so I will go down that path.

[unphased]

It's kind of strange that we have to import drei in order to get Effects.d.ts in order to use EffectComposer and such.

But I'm still confused because here:

https://codesandbox.io/s/react-three-fiber-blob-effects-with-renderpass-92ujj?file=/src/index.js
https://codesandbox.io/s/7mfqw?file=/src/index.js
https://codesandbox.io/s/react-three-fiber-untitled-game-4pp5r?file=/src/3d/Effects.js:1123-1137

I'm not able to find where the type of the JSX for effectComposer is coming from.

This one
https://codesandbox.io/s/kdxjj?file=/src/App.js does show me it's Effects.d.ts from drei, but drei is not in the dependencies in the others.

[talentlessguy]

Hey,

see that the more recent codesandboxes that @drcmda has created are using components straight out of three

this is because demos haven't been updated in a while. just that.

Also, I'm confused about why three.js itself has a bunch of stuff for making postprocessing effects, and there is still a separate repo

THREE.js has a set of classes to work with postprocessing effects but that set isn't that big. postprocessing library offers a larger functionality so we use it in rpp

I think i understand that this repo react-postprocessing does give a different, and somewhat higher level API compared to raw three.js, so that's the reason for the difference, and there's not anything awry at all.

rpp and three aren't equivalent, rpp is a React wrapper around pp, while three is a standalone 3D library

[talentlessguy]

I think this should be closed now? that all questions are answered

[unphased]

This kind of thing is obviously always extremely subjective, but I find three.js' bundled effects overall to be superior in quality compared to the https://github.com/vanruesc/postprocessing ones. Especially the bloom. Generally speaking each implementation brings its own benefits and shortcomings to the table, so its already quite clear to me that the best way to go is to work out a sane way to leverage whatever implementations work the best for the use case.

My question morphed a bit, mainly i'm stumped by how to obtain the proper typescript typings for these things that we extend(). Looks like drei comes with some of them so I will try to use that somehow (or figure out why they're not being picked up for me), it's ugly to have to put the global JSX.IntrinsicElements interface overrides in my code.

[drcmda]

three has just shed all types, they're giving up on typescript altogether. so it will get very interesting - with types you're mostly on your own. as to which composer is better, react-three-fiber doesn't limit you, that is the good news. you can pick whatever you like best or find a fitting abstraction for the imperative stuff as we have tried to do with pp and react-pp.

[unphased]

Oh interesting! Thanks for that info. Yeah I'm trying to introduce postprocessing but it effectively eliminates antialiasing, so I'm kinda scrambling. I'd like to use SMAA as it's superior to FXAA. I'll probably need to combine algorithms from different sources to get everything that I want...

I saw that https://codesandbox.io/s/r3f-particles-i-q4d2v has antialiasing, and I was getting super confused about why could have both bloom and antialiasing, then I realized that drei's Effects implements 8x multisampled renderbuffers for WebGL2. I suppose enabling e.g. SSAO with that approach would potentially yield some artifacts. Anyway, things are starting to make sense.