# 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.

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

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!