How to blur a background Texture?

Questions
, , ,
1

Hi everyone,
I have a png image that I want to load it as texture. But, I want to show it blurry, like this:
Original image loaded:

immagine
immagine1920×1440 102 KB

Want to achive this:
Gull_portrait_ca_usa
Gull_portrait_ca_usa2272×1704 164 KB

This is my source code:

const backgroundImg = './assets/backgroundImg.png';
this.bgTexture = await new TextureLoader().loadAsync(backgroundImg);
// how to make loaded image blurry?
this.scene.background = this.bgTexture;

thanks for the replies

2

add blur to the image

let image=new RGBLoader().
image.load( 'bird.png' , img => {
	new BlurredEnvMapGenerator( renderer ).generate( img , 0 )
} )
3

Can you please specify where does BlurredEnvMapGenerator come from?

4

threejs to bvh BlurredEnvMapGenerator

5

Its using mipmap level for bluring
gl_FragColor = textureCubeUV( envMap, rayDirection, blur );

1 Like
6

Just want to add that the code uses the mipmaps from PMREMGenerator. These are different ones than the default mipmaps generated by gl.generateMipmap().

Related: Ability to reuse the PMREM generated texture from scene.environment - #5 by Mugen87

Apart from that, I’m not even sure something like BlurredEnvMapGenerator is useful for the OP since the original post just adds a “normal” texture to Scene.background (so no env map).

It’s probably best if you prepare the texture offline with a tool like GIMP before using it in your app. Alternatively, you can work with render-to-texture and use HorizontalBlurShader and VerticalBlurShader to apply a gaussian blur and then use the resulting render target as the background.

3 Likes
7

I really appreciate for your replay. Can you show an example how to implement render-to-texture using HorizontalBlurShader and VerticalBlurShader in order to modify the texture?
Thanks

8

Here is a complete live example: Edit fiddle - JSFiddle - Code Playground

And the plain code:

let camera, scene, renderer;

init().then( render );

async function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);

  scene = new THREE.Scene();
  
  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const loader = new THREE.TextureLoader();
  const texture = await loader.loadAsync('https://threejs.org/examples/textures/uv_grid_opengl.jpg');
  //scene.background = texture;

  scene.background = blurTexture( texture );

}

function blurTexture(texture) {

  const width = texture.image.width;
  const height = texture.image.height;

  const cameraRTT = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
  const sceneRTT = new THREE.Scene();

  // render targets

  const renderTargetTemp = new THREE.WebGLRenderTarget(width, height);
  const renderTargetFinal = new THREE.WebGLRenderTarget(width, height);

  // shader materials

  const hBlurMaterial = new THREE.ShaderMaterial({
    vertexShader: THREE.HorizontalBlurShader.vertexShader,
    fragmentShader: THREE.HorizontalBlurShader.fragmentShader,
    uniforms: THREE.UniformsUtils.clone(THREE.HorizontalBlurShader.uniforms)
  });

  hBlurMaterial.uniforms.tDiffuse.value = texture;
  hBlurMaterial.uniforms.h.value = 1 / width;

  const vBlurMaterial = new THREE.ShaderMaterial({
    vertexShader: THREE.VerticalBlurShader.vertexShader,
    fragmentShader: THREE.VerticalBlurShader.fragmentShader,
    uniforms: THREE.UniformsUtils.clone(THREE.VerticalBlurShader.uniforms)
  });

  vBlurMaterial.uniforms.tDiffuse.value = renderTargetTemp.texture;
  vBlurMaterial.uniforms.v.value = 1 / height;

  // fullscreen quad

  const planeGeometry = new THREE.PlaneGeometry(2, 2);

  const fullScreenQuad = new THREE.Mesh(planeGeometry, hBlurMaterial);
  sceneRTT.add(fullScreenQuad);

  // first pass

  renderer.setRenderTarget(renderTargetTemp);
  renderer.render(sceneRTT, cameraRTT);
  renderer.setRenderTarget(null);

  // second pass

  fullScreenQuad.material = vBlurMaterial;

  renderer.setRenderTarget(renderTargetFinal);
  renderer.render(sceneRTT, cameraRTT)
  renderer.setRenderTarget(null);
  
  //
  
  return renderTargetFinal.texture;


}

function render() {

  renderer.render(scene, camera);

}
5 Likes