troika-three-text Text does not get refracted by THREE's MeshPhysicalMaterial

[Fabian]

Hi!

I'm working on a project that needs to refract text rendered with Troika Three Text behind a glass logo using MeshPhysicalMaterial. However, even though other objects in my scene get refracted properly, I noticed that my text does not.

Here is a live example:
https://codesandbox.io/s/meshtransmission-vanilla-forked-9xwqn2?file=/src/index.js

Am I missing some kind of setting?

[Jason Johnston]

I don't know too much about MeshPhysicalMaterial's transmission, but it does seem that it only includes objects with opaque materials. If I set your red box's material to transparent:true, it also disappears. The Text material is transparent by default; you could set it to transparent:false and it starts showing up, but be aware that would occlude objects behind the text glyph rects.

[Fabian]

You're right, that fixes my issue. Apologies this has nothing to do with troika-three-text but just with the fact that MeshPhysicalMaterial can not display alpha blending through itself. Thanks for the help!

[Fabian]

@lojjic do you know if there is then any way to combat the outlines that become present when setting the text material to false? This can be seen in my example:

https://codesandbox.io/s/meshtransmission-vanilla-forked-9xwqn2?file=/src/index.js

Is this an alpha compositing issue?

[Jason Johnston]

Yeah, since you're disabling alpha compositing it can't blend the antialiasing with the correct color behind them. 🤷‍♂️