postprocessing VS react-postprocessing

We will replace our render pass and our effects pass from three with effects from postprocessing library by Poimandres. Let's start by importing it (add to importmap + call inside script)

I've been trying to import Poimandres's "Post Processing" library into a Three.js scene file within my SvelteKit project, but keep encountering the "Cannot use import statement outside a module" error when running my Vite dev server, despite everything appearing to be in order. VSCode is showing no errors, the library's IntelliSense tooltips work and the production build seems to work properly. I also haven't had any issues importing other modules.

I think it makes little sense to use jsm/effectcomposer when https://github.com/pmndrs/postprocessing exists. The jsm composer has been catching dust years whereas postpro is actively maintained. postpro is faster because it merges all passes into one uber shader, it takes care of encoding automatically, it has support for alpha, stencil and individual mesh selection, and it has effects that are truly pushing the edge, like https://twitter.com/0beqz/status/1632109961768476672?s=46&t=wv5EJPuK32MHxbjV0bW_FA

I was able to add outlines to my instancedMeshes using a shehata-outline pass in the vanilla version of pmndrs post-processing

pmndrs/postprocessing https://github.com/pmndrs/postprocessing

i don't think unrealbloom supports that, it renders opaque. use https://github.com/pmndrs/postprocessing use the mipMapBlur option on the bloom effect and you get the same as unrealbloom, but pp supports alpha. other than that the composer is better in every way, it creates an uber shader from all the passes.

hopefully this issue and the linked codesandbox example helps as it matches the situation I just described: https://github.com/pmndrs/postprocessing/issues/243

postprocessing

i think what you need is AO, ambient occlusion. don't have a plain vanilla example of this but you can play with the values here https://codesandbox.io/s/hi-key-bubbles-forked-worwb?file=/src/App.js:2783-2941 to see if that would make a difference for you. the library is this one: https://github.com/vanruesc/postprocessing

don't forget postprocessing, this is a far more powerful option than jsm/effects, and it's often more efficient, too.

For the post processing I used @react-three/post-processing components, and to get the look just right I created a debug panel using Leva to adjust some values (like bokeh blur).

I'm attempting to implement custom post processing in react three fiber but I do not know how to go about it. I've tried to use these links as reference:https://github.com/pmndrs/react-postprocessing/blob/master/api.mdhttps://github.com/pmndrs/postprocessing/wiki/Custom-Passeshttps://github.com/pmndrs/postprocessing/wiki/Custom-Effects

Hi all I've been fiddling with three.js for some time now! and recently started using react-three-fiber just because it's easy to use and declarative. I was wondering if someone here could help me out creating a custom postprocessing effect for my r3f project. I have the shader code already and I have seen pmndrs' code to extend three.js effect class but I'm unable to implement it with the shader code I have. the link to pmndr's / paul Hanchel's code Here and shader code for lens distortion effect Here or on stack overflow here. please assume I know nothing! thanks in advance!

looks like an active bug when using three r135 and above https://github.com/pmndrs/react-postprocessing/issues/111

React Three Fiber with Drei and Postprocessing