TSL: Introduce viewportSafeUV()

[sunag]

Related issue: #28761 (comment)

Description

viewportSafeUV() is a safe uv function for refraction purposes

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

Filesize dev	Filesize PR	Diff
684 kB (169.4 kB)	684 kB (169.4 kB)	+0 B

🌳 Bundle size after tree-shaking

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

Filesize dev	Filesize PR	Diff
460.9 kB (111.2 kB)	460.9 kB (111.2 kB)	+0 B

[mrdoob]

Looking better!

I'm still seeing some artifacts though:

Screen.Recording.2024-07-31.at.2.05.37.PM.mov

Notice the part that loses refraction behind the ball:

[sunag]

I'm not sure if it will be easy to solve some of these details, maybe it will need a spatial and temporal approach. It is possible to see some of these flaws in some popular games too, since they use similar approaches. It could be less noticeable by reducing the strength of normal too.

We have to consider that the materials currently with transmission in WebGLRenderer should suffer from these same problems as I show in the example below.

Not that this should be good news, but maybe something our users aren't caring about as much, I think.

// Using WebGLRenderer
const planeRefractor = new THREE.Mesh( planeGeo, new THREE.MeshPhysicalMaterial() );
planeRefractor.material.transparent = true;
planeRefractor.material.transmission = 1;
planeRefractor.material.roughness = .5;

refraction.-.Google.Chrome.2024-07-31.02-56-32.mp4

[mrdoob]

I see I see...

I guess we just need to update the example so it doesn't show the artifact.
Moving the camera a bit hides it already 😇

[wcandillon]

@sunag I have to disable also antialias for the example to work as well. Can you provide me context on this?

[wcandillon]

What I did is set the antiAlias to false like here and handle the pixel density manually in the ctx:

    const context = ref.current!.getContext("webgpu")!;
    const canvas = context.canvas;
    canvas.width = canvas.clientWidth * PixelRatio.get();
    canvas.height = canvas.clientHeight * PixelRatio.get();

let me know if you have any thoughts on this.