Hello!
I’m looking for help and advice about transmission and transparent canvas.
To give some context first, I am maintaining an open-source addon called “Dice So Nice” that adds 3D dice to a virtual rpg tabletop software (Foundry VTT) thanks to the amazing ThreeJS engine. It looks like this: Dice So Nice v4.0 - YouTube
Foundry VTT uses PixiJS (2D engine in WebGL) to display most of its UI.
I am adding a transparent ThreeJS canvas on top of the PixiJS canvas when a user rolls a dice. I use an equirect env map but no scene background.
It works really well for most models, but I have not been able to do one type of dice until then: translucent dice. It’s a common type of dice in real life, but when it comes to 3D, it is much harder to create.
With ThreeJS rev132 and the addition of the transmission property, it could become possible. However, I have one significant issue, and I’m not sure how to tackle it:
Since I am using a transparent canvas, there’s nothing for the transmission shader to show. Therefore, a nice-looking translucent red dice become nearly invisible.
For the same reason, the PixiJS canvas is obviously not distorted when looking at it through a transmissive thick ThreeJS mesh.
With a scene background:
With a transparent canvas:
I understand it is by design. However, I am not looking for a perfect or physically accurate solution, only for a workaround that would look good enough.
That would work for me if I could at least get the dice not to look fully transparent.
I have some ideas, but my skills and understanding of shaders are not good enough. That’s why I am asking for help to guide me to a possible solution.
- Could I change something in the shader chunk to approximate the dice color even with nothing behind it?
- Could I make the scene background invisible but let the transmission shader use it nonetheless? If so, how?
- Another idea?
I understand any solutions would cause some visual glitches, but it would not be an issue for most mesh.
Thank you for your help!