How to make a blurred background environment?

This is a common thing in sketchfab and i believe i have seen it in threejs examples as well but can’t remember where. Is there something in threejs that would allow me to do this with a regular environment map? I’m referring to the background only, i would still like objects to have reflections.

I don’t think it “just works” yet but there are a couple PRs that would enable it (#18241 and #20463). Alternatively you could generate a blurry background texture separately from the environment map and use them together. I believe you can do that on the fly with PREMGenerator, though you may have to use fromScene on a scene with the background texture to apply your own blur.

3 Likes

oh wow, thanks! can’t wait for those to come in! i tried fromscene, but it complains about the blurradius being too high due to max_samples set to 20, which seems to produce a very tame blur. i tried to fork it with 1000 samples to get close to what i see on sketchfab. it’s almost there, but i see a weird “pinch”, you see it when you move the camera around, is that normal? https://codesandbox.io/s/color-grading-forked-wtoe7?file=/src/App.js

i tried to fork it with 1000 samples to get close to what i see on sketchfab. it’s almost there, but i see a weird “pinch”, you see it when you move the camera around, is that normal?

I don’t use PMREMGenerator a lot so I’m less familiar with the details of it’s implementation. It’s possible it’s a bug but at the same time it sounds like it may not have been designed to handle so many samples.

1 Like