Allow to Use Roughness for SSR in Three.js

[Stanislav-Sobolev]

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]

@gonnavis Do you mind looking at this issue?

[gonnavis]

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]

@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]

@Mugen87 FWIW godotengine/godot#69828

[Mugen87]

This has been implemented via #31649. When providng SSRNode roughness data, the SSR will create a mipmap chain with blurred versions of the reflection buffer. Depending on a fragment's roughness value, an appropriate (filtered) mip is selected. That is a similar approach to how PMREM works and matches UnitySSR.

[Stanislav-Sobolev]

@Mugen87 Thanks for pointing this out! 👍
I saw that #31649 was just merged into dev, but as far as I can see it’s not included in the latest release (0.179.1 from August 17).
Looking forward to the r180 release to try it out.