Which post processing stack to use?

🌵 Needle Engine
1

So after finding awful colour banding issues with Three.js’ UnrealBloom pass and Gamma Correction passes, I have been recommended this post processing stack: https://github.com/pmndrs/postprocessing

Is there any post processing setup you would recommend? Going to try the one above but I already wasted my time with the Three.js included post processing and it seems that their post processing stack is undeveloped with some colour space issues that run back 2+ years old and a lack of direction vs other solutions

Original Post on Discord

by user 103054507105067008

2

I’m also having issues importing that npm package from ‘‘npm install three postprocessing’’ as it wants to import another version of Three

by user 103054507105067008

3

pmndrs should be the best out there right now

4

Agree. Worth noting that we did some experiments for integrating it nicer with ok results, will have to revisit later. They’re currently doing a big v7 refactor and after that we’ll look at a tighter engine integration again, but you should be able to get things like Bloom to work nonetheless.

5

Once I get past the hurdle of importing it into the project, have you guys ever imported and got it working regardless of the v7 refactor

by user 103054507105067008

6

Simply slapping "postprocessing": "^6.29.1", in devDependencies then running install causes some awful import loop for me where Needle never installs and lots of NPM errors in the console, going to relaunch Unity

by user 103054507105067008

7

You’ll want it in dependencies, not devDependencies, otherwise it doesn’t end up in a build

8

Relaunch did it, think it tried to overwrite the three npm folder then another process always had it

by user 103054507105067008

9

gotcha

by user 103054507105067008

10

How do I overwrite the this.context.composer with the non-matching composer from Postprocessing through? I get this error
Type 'EffectComposer' is missing the following properties from type 'EffectComposer': renderer, renderTarget1, renderTarget2, writeBuffer, and 8 more
Code snippet:

        this.mainComposer = new EffectComposer(this.context.renderer);
        this.mainComposer .addPass(new RenderPass(this.scene, this.context.mainCamera));
        this.mainComposer .addPass(new EffectPass(this.context.mainCamera, new BloomEffect()));
        this.context.composer = this.mainComposer;

by user 103054507105067008

11

I think that’s how you do it - maybe just type checking errors?

12

I get

engine_setup.ts?v=e8c84528:319 Uncaught TypeError: this.composer.setPixelRatio is not a function
    at Context.upd

by user 103054507105067008

13

Looking at the branch where we tried adding that postprocessing package I dont see any specific changes

14

The error is from engine_setup.ts

by user 103054507105067008

15

Right, you can define it temporarely

16

this.composer.setPixelRatio = () => { }

17

Did that, then I get

TypeError: Cannot set properties of null (setting 'setPixelRatio')

by user 103054507105067008

18

From that line added this.context.composer.setPixelRatio = () => { };

by user 103054507105067008

19

Will remove the context

by user 103054507105067008

20

Put it further down the stack ,now it is happy

by user 103054507105067008