How to blur an image and apply it as a texture to a geometry in the scene, rather than post processing

Questions
1

There is a geometry in the scene. The texture on it requires two one -dimensional Gaussian blur. How does this image processing process be implemented with Threejs?

2

If you need to blur a texture on every frame dynamically, you should probably do it in a custom shader code.

The quickest and dirtiest solution I know is to fake uv gradient when sampling a texture, it’s not Gaussian blur, but it looks like a blur (especially at a low blur strength):

3

Thank you for your reply。
No need for dynamic blur。 I hope to finish processing this image and save it as a texture, or export it as well。 Because it requires two blurs and two fragement shaders.

4

You can load your image using TextureLoader into THREE, then render it on WebGLRenderTarget using custom shader that does Gaussian blur. Render target has a property .texture that you then can use for all intents and purposes.

5

I konw this solution ，but how to set camera ? use OrthographicCamera? Original webgl, or like shdertoy, does not need a camera, but Threejs does not seem to work。

6

The easiest is to work in NDC space, so you need to create BufferGeometry with 4 vertices located at the corners of NDC space (-1, 1) on X and Y and zero Z, to make a quad that will fill in the screen.

Use ShaderMaterial with that to make a mesh.

You vertex shader will look something like this:

	varying vec2 vuv;
	void main() {
		gl_Position = vec4(position, 1.0);
		vuv = uv;
	}

your frag shader will do the blur.

You won’t use any matrices, so your camera setup will not be used, THREE requires a camera to work, so define any camera as a plug, it won’t matter.

7

yeah! I forget this. Thank you！！

8

Another option is to pass the image through canvas 2D and use its blurring filter (i.e. no shaders, no render targets, no separate cameras).

https://codepen.io/boytchev/full/QWZYjMM

image

2 Likes
9

Its work! I also had a solution similar to this idea before。

It is to use SVG to draw images, and use SVG’s built-in Gaussian filters and cropping to achieve the desired results, and then use the SVG image as a texture to paste on the geometry. But this is constantly generating images, and the interface is somewhat blocked.