See trough another object in MeshPhysicMaterial

Hi, I’m trying to create a glass-like material while it is able to see through a solid object at the back.

At first, I thought MeshPhysicMaterial is limited to this functionality and there is a limitation for threejs in order to do this using uniform it’s provided in the shader.

But then saw a GLTF loader example that has exactly what I needed.

https://threejs.org/examples/webgl_loader_gltf_transmission

Dig into it I found it actually using MeshPhysicMaterial…

So how are we able to achieve this using MeshPhysicMaterial?
I mean programmatically without using gltf file.

Do you know this?
From the Collection of examples from discourse.threejs.org
Raymarching

No, I don’t, And these are insane examples.
This will be a super useful resource for me.

However, Just want to know how the example I provided could achieve to use very simple MeshPhysicMaterial way :sob:

I have not yet dealt with that.
But maybe someone else can help?

There are two components to the glass-like transparency provided by MeshPhysicalMaterial, you can use one or both.

Transmission: (thin-walled, no refraction)

material.transparent = false;
material.transmission = 1; // 1 is fully transmissive, 0 is opaque.
material.roughness = 0; // higher roughness provides more of a glazed look
material.metalness = 0;

Volumetric Refraction:

material.thickness = 1; // or any value >0
material.thicknessMap = texture;

For refraction to vary with the shape of the object, thickness must be baked to a texture. Using material.thickness = x will provide uniform refraction across the whole object regardless of its actual thickness.

Note that only opaque objects are visible through a transmissive material. There are some other tips in this thread:

1 Like

Note that only opaque objects are visible through a transmissive material. There are some other tips in this thread:

Hmm… Look like I’ve got incorrect behavior?

Yayy!

Through your hint, I’m able to achieve it by setting material.transparent to false for the back opaque object.

1 Like

Since Three r132 MeshPhysicalMaterial started to support IOR
You can change the IOR slider on this demo to see through it.
Glass Transmission : Glass Transmission - Three.js Tutorials


Note that MeshPhysicalMaterial is still very new, every recent version of Threejs has some changes being done it so there is no promise that this demo will always work the same.

2 Likes

Saw it, It’s awesome!