Hello everyone, I’m a new user of three.js, recently met a weird problem while trying to apply UnrealBloomPass to my renderer.
shortly, after applied the UnrealBloomPass, the output become very low res, which looks like this:
But If I remove the bloom pass, everything turns normal:
Anyway to fix the problem…?
Code attached: https://codesandbox.io/s/low-resolution-bug-iw4zo?file=/src/App.tsx
Hi, welcome to the forum.
The image with bloom is probably low res because it’s not anti-aliased, you can’t use native anti-aliasing with postprocessing. Try removing
antialias: true from your renderer options, and instead adding a anti-aliasing postprocessing pass before the bloom pass.
you also forgot to set the size of the composer :
Or set size and pixel ratio of renderer before you pass
renderer into composer.
Means these lines:
have to be before this line:
const composer = new EffectComposer(renderer);
@felixmariotto @felixmariotto Thanks for your reply, it solved my problem!
Reason: The resolution of the render target used for glow blur is reduced by half when it is initialized.
solve: Use a new post process to merge glow and glow foreground.