SSRPass: Support hierarchy and different intensity.

[gonnavis]

Demo

Supporting different metalness is a feature I have always wanted to add, and it is also a must-have feature.
But I have not been sure which method is the best, one material for each metalness, layer or something else?
It wasn't until I saw the codes in Pass.js that I realized can render object3D directly, not necessarily scene. I think this should be the best way.
So now just use one metalnessMaterial, change it's metalness and render one object3D in a loop.
https://github.com/gonnavis/three.js/blob/c40ddf2d1114cdbf38e7da2386173267d5e5c659/examples/jsm/postprocessing/SSRPass.js#L603

But I'm still not sure, should I use the metalness property of object directly, or add a custom property to selects?
Is the logic of selects should applied consistently, rather than as an option?
Use scene.tranverse or scene.children.forEach?
I'm still looking for the most suitable solution, and want to avoid breaking changes as much as possible.

[mrdoob]

But I'm still not sure, should I use the metalness property of object directly

That sounds good to me.

[gonnavis]

Bound Material's metalness to SSRPass's opacity, but the result seems not very well.

Blender use Material's specular to control SSR's opacity, but MeshStandardMaterial has not specular.
Seems still needs an independent ssrOpacity parameter. 🤔

Demo

Blender

[mrdoob]

I think envMapIntensity is our specular?

/cc @WestLangley

[gonnavis]

I think envMapIntensity is our specular?

Bound SSRPass's opacity to Material's envMapIntensity.

Demo
Looking better and feel more reasonable.

[WestLangley]

I think envMapIntensity is our specular?

No, I believe Blender's Principled BSDF specular property equates to the reflectivity property of MeshPhysicalMaterial.

[gonnavis]

I believe Blender's Principled BSDF specular property equates to the reflectivity property of MeshPhysicalMaterial.

Bound SSRPass's opacity to MeshPhysicalMaterial's reflectivity.
Awesome! Because achieved the ( almost ) independent ssr opacity tweaking and no need add any custom parameter, at least for this demo scene.

Demo

But require using MeshPhysicalMaterial.

How about, for per object ssr opacity,
use reflectivity if is MeshPhysicalMaterial,
use envMapIntensity if is MeshStandardMaterial,
use specular / shininess if corresponding material has,
use 1 ( or 0 ) for others?

Still leave overrall ssrPass.opacity as is.

[mrdoob]

@WestLangley

I think envMapIntensity is our specular?

No, I believe Blender's Principled BSDF specular property equates to the reflectivity property of MeshPhysicalMaterial.

Ah!

Hmm... Should we "graduate" reflectivity to MeshStandardMaterial?
And... How about renaming it to specular to match Blender?

@donmccurdy Would this make sense in the context of GLTF?

[WestLangley]

Should we "graduate" reflectivity to MeshStandardMaterial?

I do not think so. It may not be what you think it is. It is a very subtle effect.

[gonnavis]

Found Blender use the combination of at least metalness and specular to control the ssr's intensity.

[gonnavis]

Any chance to derive the correct parameters from this equation?

[gonnavis]

Found that in Blender,
metallic and envMap blending more like mix,
specular and envMap blending more like additive.

[gonnavis]

Also tried to solve the hierarchy problem .

I want to use renderer.render( object3D, camera ) to render objects and change the single metallnessMaterial one by one,
but found it'll render all descendants too, not what I want.

So tried to add a third parameter includeChildren:

three.js/src/renderers/WebGLRenderer.js

Line 977 in ce44c7d

this.render = function ( scene, camera, includeChildren = true ) {

Is this acceptable? Or any other better solution?

Demo
Current hierarchy:

Current selects:

/cc @mjurczyk

[WestLangley]

@gonnavis

In MeshPhysicalMaterial, refectivity models the specular reflectance of non-metals. It has no effect when metalness is 1.

In MeshStandardMaterial, the specular reflectance of non-metals is hardwired to 0.04.

See #8529 and #8505 (comment).

[gonnavis]

@WestLangley Thanks a lot for your learning resource! I'll investigate.

[gonnavis]

Made a three.js version of learnopengl.com's pbr demo:
https://raw.githack.com/gonnavis/three.js/pbr/examples/pbr_learnopengl.com.html
Source code:
https://github.com/gonnavis/three.js/blob/pbr/examples/pbr_learnopengl.com.html

Translated the code of this tut to three.js version, for better investigating and comparing.
And made the reflectivity tweakable based on this code(#8529).

[mrdoob]

@WestLangley

Should we "graduate" reflectivity to MeshStandardMaterial?

I do not think so. It may not be what you think it is. It is a very subtle effect.

Doesn't seem so subtle to me?
https://raw.githack.com/gonnavis/three.js/pbr/examples/pbr_learnopengl.com.html

[gonnavis]

I'm testing the pbr in this branch, but the current result not good.
I feel need more long time to let it physically plausible.

How about solve the hierarchy problem and using envMapIntensity for different ssr intensity first?
I think we can add a pbr option afterwards.