MeshPhysicalMaterial: Rename .transparency → .transmission, add .transmissionMap

[donmccurdy]

• Specification: KHR_materials_transmission KhronosGroup/glTF#1698
• Fixes MeshPhysicalMaterial: Add .transparencyMap #19389

Renames .transparency -> .transmission on MeshPhysicalMaterial, and adds .transmissionMap. Implements the KHR_materials_transmission thin transparency extension in GLTFLoader.

The mechanical aspects of this are easy enough, but our implementation (below) is a bit simpler than what KHR_materials_transmission suggests for implementation.

three.js/src/renderers/shaders/ShaderLib/meshphysical_frag.glsl.js

Lines 107 to 110 in 64fe3f8

	// this is a stub for the transparency model
	#ifdef TRANSPARENCY
	diffuseColor.a *= saturate( 1. - transparency + linearToRelativeLuminance( reflectedLight.directSpecular + reflectedLight.indirectSpecular ) );
	#endif

---

current result	intended result

^There may be a texture scaling issue in this screenshot as well, but that can be ignored for now.

@WestLangley based on the proposed spec here, do these look like reasonable changes for us to make in MeshPhysicalMaterial? Or does anything there concern you?

[donmccurdy]

For a more realistic example use, see https://discourse.threejs.org/t/gltfloader-does-not-display-all-materials-of-model/16281.

[Mugen87]

As a reminder: MeshPhysicalMaterial.transparency is documented and needs to be changed, too.

https://threejs.org/docs/index.html#api/en/materials/MeshPhysicalMaterial.transparency

[WestLangley]

This PR is excellent, IMO.

The glTF extension is intended to model thin-surface plastics and glass. I am not aware of transparent metals. I find the label "metalic transmission" odd.

As in https://threejs.org/examples/webgl_materials_physical_transparency.html, I'd render front and back faces separately to prevent artifacts. (Remove that example?)

[donmccurdy]

I am not aware of transparent metals. I find the label "metalic transmission" odd.

Yes, sorry that's unclear. The metallic rows are included only to demonstrate materials with metalness=1, transmission=1 are not, and should not be, transparent.

The glTF extension is intended to model thin-surface plastics and glass.

Good clarification — this glTF extension, alone, models only thin-surface plastics and glass. However, in the longer-term roadmap the format will also have an extension for refraction which builds on transmission rather than introducing yet another transparency-like property. So it is not our intention that transmission=1 necessarily implies a thin surface: that is only the case in the absence of additional, not-yet-available properties like .ior or .thickness.

Or that is the glTF roadmap, at least. Whether MeshPhysicalMaterial should work the same way is up for discussion!

/cc @bhouston @elalish

[elalish]

This is exciting! Can you give any more detail on the differences between your approximation and the equations in the extension? And do you know why those four spheres end up nearly completely transparent, as opposed to the reference?

[WestLangley]

@elalish This PR does not change the approximation introduced in #17114. If you are interested in working on an improved physical model or approximation, that would be great.

[elalish]

@WestLangley Thanks, the description in that PR is just what I was looking for. I'd love to look deeper in to the physical model, but I'm afraid that's going to have to wait until someday when I have slightly less on my plate...

[donmccurdy]

I don't think I'm going to be able to invest time improving the physical model any time soon either. 😞 Would it be OK to merge the transparency -> transmission renaming, and introduce transmissionMap, in the meantime?

[donmccurdy]

Ok, I think this is ready for review. I've pulled the glTF example out for now, since we aren't implementing enough of the transmission physical model to display the glTF asset as intended.

[mrdoob]

Thanks!

[mrdoob]

I guess we should remove

if ( json.transparency !== undefined ) material.transparency = json.transparency;

from MaterialLoader?