Transmission throw more than one object

Hi Forum,

I’ve been playing with the transmission material property of physical material, I have noticed that objects with transmission are ignored when they are behind an object that also has transmission applied.

Here some pictures

Screen Shot 2021-08-27 at 12.05.15
Here you can see how the gray plate doesn’t consider the red plate that is behind.

So the question is how can I make the red plate be visible behind the gray plate and at the same time don’t lose the transmission and IOR properties of both objects.

I guess it requires an extra render, is there a way I could do that? is there another possible solution or workaround?


This is a common limitation of the “transmission” effect in realtime renderers — only opaque materials (and perhaps alpha-blended ones) are visible behind transmissive materials. There are ways to support more, but they’re expensive to render, and not currently implemented in three.js. One of the possible solutions is called “depth peeling” and if you search for the term there are some experiments and comments about using it in three.js, but getting that working with MeshPhysicalMaterial and transmission is probably somewhat complex, and I haven’t seen this done in three.js so far.

1 Like

thanks, @donmccurdy, I’ll do the research about “depth peeling”