Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TSL: Introduce viewportSafeUV() #29025

Merged
merged 2 commits into from
Jul 30, 2024
Merged

TSL: Introduce viewportSafeUV() #29025

merged 2 commits into from
Jul 30, 2024

Conversation

sunag
Copy link
Collaborator

@sunag sunag commented Jul 30, 2024

Related issue: #28761 (comment)

Description

viewportSafeUV() is a safe uv function for refraction purposes

@sunag sunag added this to the r168 milestone Jul 30, 2024
Copy link

📦 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

@sunag sunag marked this pull request as ready for review July 30, 2024 23:04
@sunag sunag merged commit 6364788 into mrdoob:dev Jul 30, 2024
12 checks passed
@sunag sunag deleted the dev-ref branch July 30, 2024 23:12
@mrdoob
Copy link
Owner

mrdoob commented Jul 31, 2024

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:

Screenshot 2024-07-31 at 2 05 51 PM

@sunag
Copy link
Collaborator Author

sunag commented Jul 31, 2024

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
Copy link
Owner

mrdoob commented Jul 31, 2024

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 😇

@@ -126,7 +126,7 @@

// renderer

renderer = new THREE.WebGPURenderer( { antialias: true } );
renderer = new THREE.WebGPURenderer( /*{ antialias: true }*/ );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants