How to make a blurred background environment?

Questions
6

I gave it a try with the blurTexture function from

and you’re right, higher amounts of passes don’t really do much. I updated the blurTexture to do a specified number of passes:

/** Adapted from https://discourse.threejs.org/t/39433 */
function blurTexture(renderer: WebGLRenderer, texture: Texture, blurAmount = 1) {
	console.log('blur amount', blurAmount)
	const width = texture.image.width
	const height = texture.image.height

	const cameraRTT = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
	const sceneRTT = new ThreeScene()

	// render targets

	const renderTarget1 = new WebGLRenderTarget(width, height)
	const renderTarget2 = new WebGLRenderTarget(width, height)

	// shader materials

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

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

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

	vBlurMaterial.uniforms.tDiffuse.value = renderTarget1.texture
	vBlurMaterial.uniforms.v.value = 1 / height

	// fullscreen quad

	const planeGeometry = new PlaneGeometry(2, 2)

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

	let lastTexture = texture

	// passes

	while (blurAmount--) {
		// horizontal pass

		fullScreenQuad.material = hBlurMaterial
		hBlurMaterial.uniforms.tDiffuse.value = lastTexture

		renderer.setRenderTarget(renderTarget1)
		renderer.render(sceneRTT, cameraRTT)
		renderer.setRenderTarget(null)

		lastTexture = renderTarget1.texture

		// vertical pass

		fullScreenQuad.material = vBlurMaterial
		vBlurMaterial.uniforms.tDiffuse.value = lastTexture

		renderer.setRenderTarget(renderTarget2)
		renderer.render(sceneRTT, cameraRTT)
		renderer.setRenderTarget(null)

		lastTexture = renderTarget2.texture
	}

	//

	return renderTarget2.texture
}

I think there’s a better way to do this…