How to make a blurred background environment?

[trusktr]

That’s nice for values closer to 1.0, but it has unwanted pixelation for values like 0.3.

The TriangleBlurShader is the nicest so far:

How to blur a background Texture?

Looks like the TriangleBlurShader works a lot better. Here’s an fiddle using triangle blur: Edit fiddle - JSFiddle - Code Playground. The function is: const {OrthographicCamera, Scene, WebGLRenderTarget, ShaderMaterial, UniformsUtils, PlaneGeometry, Mesh, TriangleBlurShader, Vector2} = THREE function makeTriangleBlurShader(iterations = 10) { // Remove texture, because texture is a reserved word in WebGL 2 const {texture, ...uniforms} = TriangleBlurShader.uniforms const TriangleBlurShader2…

but now the problem is there’s a seam on one side of the background:

Note how it is not too blurry, but also not pixelated. Here’s the same scene with same background, but using backgroundBlurriness 0.1:

It is not as smooth.

Now I need to study backgroundBlurriness to see how to make it seamless.