search

protectwise / troika

A JavaScript framework for interactive 3D and 2D visualizations
MIT License
1.63k stars 122 forks source link

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

Closed Fabiantjoeaon closed 1 year ago

Fabiantjoeaon commented 1 year ago

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?

lojjic commented 1 year ago

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.

Fabiantjoeaon commented 1 year ago

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!

Fabiantjoeaon commented 1 year ago

@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?

lojjic commented 1 year ago

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