Examples: Added hashBlur and improve webgpu_backdrop_area example

[sunag]

Description

hashBlur is more performant in tests, the main reason is because it doesn't need mipmaps, and it seems to have satisfactory quality, although with noise it has a better smoother blur transition amount.

• added hashBlur
• improve webgpu_backdrop_area example

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	689.82 170.9	689.82 170.9	+0 B +0 B
WebGPU	812.47 218.85	812.49 218.86	+16 B +5 B
WebGPU Nodes	811.98 218.72	812 218.73	+16 B +5 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	462.84 111.78	462.84 111.78	+0 B +0 B
WebGPU	536.55 144.82	536.56 144.82	+16 B +6 B
WebGPU Nodes	492.66 134.54	492.68 134.55	+16 B +6 B

[mrdoob]

Very nice!

Should transmission use it too?

[Mugen87]

There might be texture nodes without uvNode so maybe:

const targetUV = textureNode.uvNode || uv();

Without this fix, I can't use the blur with ssrPass.getTextureNode().

[sunag]

Should transmission use it too?

That's the goal, although I still didn't get the same approximate result.

[Mugen87]

I've tried to blur the result of a reflector but encountered an issue with both hash and gaussian blur: https://jsfiddle.net/c79ak854/1/

• When orbiting the camera around the scene, the blurred reflections of hashBlur get an offset.

• When using gaussianBlur(), the reflections are completely missing:

[sunag]

#29619

It was necessary 3 fixes, but now it's working.

hashBlur

gaussian blur

[mrdoob]

I noticed webgpu_ocean has a similar issue:

https://threejs.org/examples/webgpu_ocean.html

Screen.Recording.2024-10-11.at.12.14.18.PM.mov

[sunag]

Fixed too :) #29626