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

Allow to Use Roughness for SSR in Three.js #28752

Open
Stanislav-Sobolev opened this issue Jun 27, 2024 · 4 comments
Open

Allow to Use Roughness for SSR in Three.js #28752

Stanislav-Sobolev opened this issue Jun 27, 2024 · 4 comments
Labels

Comments

@Stanislav-Sobolev
Copy link

Description

I am using post-processing with WebGL 2.0 and encountered a limitation in the SSRShader. Currently, the shader uses only the metalness value to determine if SSR should be applied to a fragment:

float metalness = texture2D(tMetalness, vUv).r;
if (metalness == 0.0) return;

This limitation results in the same glossy reflection for all objects, regardless of their surface properties.

Solution

I propose to extend the SSRShader functionality by utilizing both metalness (for opacity/alpha SSR) and roughness (to determine the strength of SSR reflections). I have customized the shader to use ORM textures and modified it as follows:

float roughness = texture2D(tReflectance, vUv).g;
float metalness = texture2D(tReflectance, vUv).b;
if (metalness == 0.0) return;

float reflectionStrength = 1.0 * roughness;
gl_FragColor.xyz = reflectColor.xyz * reflectionStrength;
gl_FragColor.a = op * roughness * metalness;

This modification allows achieving more realistic reflections by adjusting their strength based on the roughness value.

Alternatives

Currently, the only alternative is to manually customize the shader code to incorporate roughness, as shown above. This approach is not ideal for all users and may lead to inconsistencies and maintenance challenges.

Additional context

Supporting roughness in the SSRShader to blur reflections based on roughness strength would allow for more accurate and varied reflections, improving visual realism for both metallic and non-metallic surfaces. This enhancement would greatly benefit the Three.js community and enhance the overall rendering quality.

Thank you for considering this request.

@Mugen87 Mugen87 added the Addons label Jun 27, 2024
@Mugen87
Copy link
Collaborator

Mugen87 commented Jun 29, 2024

@gonnavis Do you mind looking at this issue?

@gonnavis
Copy link
Contributor

gonnavis commented Jun 29, 2024

Sorry, I'm busy at work and might not have much time recently. I've tried something similar before #21487, but full PBR integration was too challenging for me and I couldn't complete it yet. However, it might still be helpful as a reference.

@Mugen87
Copy link
Collaborator

Mugen87 commented Nov 11, 2024

@WestLangley I wonder what your opinion is on this topic. Right now, SSRNode relies the most basic approach by using the fragment's metalness value to modulate the SSR's opacity. A high metalness will result in more SSR reflections and vice versa. I'm not sure how to incorporate roughness into this process though. I'm trying to find out if it is actually correct to modulate the SSR color (or reflected color) based on the roughness. Also looking for a good reference.

@WestLangley
Copy link
Collaborator

@Mugen87 FWIW godotengine/godot#69828

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

No branches or pull requests

4 participants