Please help: How to create a physical material that is transparent only in certain areas?

Questions
,
1

Hi there!

I’ve scoured the internet about this topic and basically, I was wondering how this could be replicated in three.js via a MeshPhysicalMaterial running a GLSL shader with an alpha channel on .onBeforeCompile()?

I know that generally a MeshPhysicalMaterial should be used, and the easy part is making it transparent because generating a normal glass material is very straightforward, but how could someone pass the alpha channel from a GLSL shader into the MeshPhysicalMaterial, making the parts where the dots exist colored, still translucent, refracting light?

I don’t really know how to do this, and really this is just for the sake of discussion. I can provide code, but generally… I don’t really know how that would look.

If anyone has any advice please let me know!

Also: the best I could find was this example though it still doesn’t really get it right because you can’t see the texture overlapping on the back of the sphere!

2

It sounds like you are describing an alphaMap.
MeshPhysicalMaterial inherits alphaMap since it is derived from a MeshStandardMaterial that implements alphaMap.

Here is an example that uses an alphamap on a MeshStandardMaterial. It still works if you change it to a MeshPhysicalMaterial.

Transparent Shadows : Transparent Shadow - Three.js Tutorials
image