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
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
pmndrs should be the best out there right now
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.
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
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
You’ll want it in dependencies, not devDependencies, otherwise it doesn’t end up in a build
Relaunch did it, think it tried to overwrite the three npm folder then another process always had it
by user 103054507105067008
gotcha
by user 103054507105067008
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
I think that’s how you do it - maybe just type checking errors?
I get
engine_setup.ts?v=e8c84528:319 Uncaught TypeError: this.composer.setPixelRatio is not a function
at Context.upd
by user 103054507105067008
Looking at the branch where we tried adding that postprocessing package I dont see any specific changes
The error is from engine_setup.ts
by user 103054507105067008
Right, you can define it temporarely
this.composer.setPixelRatio = () => { }
Did that, then I get
TypeError: Cannot set properties of null (setting 'setPixelRatio')
by user 103054507105067008
From that line added this.context.composer.setPixelRatio = () => { };
by user 103054507105067008
Will remove the context
by user 103054507105067008
Put it further down the stack ,now it is happy
by user 103054507105067008