How to blur a background?

Hi! I loaded hdr. How i can blur it?

Please provide a little bit more context of what you are trying to achieve. For example show how you have coded your current background with a simple live demo.

I loaded hdr via this code

new RGBELoader()
					.setType( THREE.UnsignedByteType )
					.setPath( 'textures/hdr/' )
					.load( 'door.hdr', function ( texture ) {
						var cubeGenerator = new EquirectangularToCubeGenerator( texture, { resolution: 1024 } );
						cubeGenerator.update( renderer );
						var pmremGenerator = new PMREMGenerator( cubeGenerator.renderTarget.texture );
						pmremGenerator.update( renderer );
						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
						pmremCubeUVPacker.update( renderer );
						var envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;

and sets it to background scene.background = cubeGenerator.renderTarget;
i want to blur it such as scetchfab’s background

now i have something like this:

Um, I’m afraid we never had this use case before. One obvious workaround is to blur the images before you use them in your app.

Ok, i understood. I have another question about multi-material. I use sceneUtils to load three different materials on my object. But its created 3 mesh on my scene that can be very expensive on mobiles. Is there way to use multi-material? I saw an example with using nodeMaterial. Maybe its can help me?

I’m not sure what you mean with the reference to NodeMaterial but using multiple materials on a 3D object will always cause multiple draw calls.

How i can make performance of my app a little better in this case?

I mean this example https://threejs.org/examples/?q=node#webgl_materials_nodes

The default example (basic/mesh-standard) is not a multi-material mesh. It’s just a single material with a special normal map.

Ok, but what about performance? How i can make it less expensive for mobile?

Well, avoid using multiple materials^^. Sometimes you can put all surface color information into a single texture and render it uniformly. There are still many other options like geometry merging or instanced rendering that can improve the performance. However, what technique is actually appropriate highly depends on your use case.

2 Likes

How i can merge geometry of multiMaterialObject using this pattern?
var mesh = SceneUtils.createMultiMaterialObject( child.geometry, [ material1, material2, material3 ] ); scene.add(mesh);

It seems you are looking for BufferGeometryUtils.mergeBufferGeometries(). This method is used in multiple examples e.g.:

https://threejs.org/examples/webgl_geometry_minecraft

Wouldn’t blurring image beforehand produce blurred reflections in the object? I guess the OP wanted to achieve a simulated out-of-focus background thus making the object more prominent (like in real camera).

Would DOF post processing plugin blur the env map in the scene? Still making a simple calculation on image data like this would be much faster?

@fallenartist right but scene.background and scene.environment are two different properties - you could have lo-res background and hi-res environment.

2 Likes

Still, how do you blur a cube map?

photoshop will work.

on 2nd thought it will be tricky, you would need to pad every image with 4 other images from the cubemap before you blur it. some manual labor right there ) but maybe can be automated via actions.

OR - you could do it in 3j, alright - just use CubeCamera with lower resolution on the empty scene.

Errr, do NOT do that. It sucks, the blur quality is bad:


Solution: https://github.com/mrdoob/three.js/issues/18942#issuecomment-602116388

I did not mean colors when I said the quality was bad, @Mugen87 - I was sure you would figure out colors one way or another. But this blocky pixelization that makes you actually see the cube edges - I dont think that could be fixed in CubeCamera. So one needs blurred but still high resolution cubemap.