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

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?

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):

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.

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.

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。

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.

yeah! I forget this. Thank you!!

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).



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.