I I need a transparent icon for Web GL 1.0 that is visible on both sides. It should not be visible in a dark environment and of course should not be visible through other objects. Until now I am not getting this fully done because always one of the requirements does not work with the ways I tried. Can anyone help with this?
Hi @Albertos,
Have you tried using a regular entity with a Plane for model and a material with opacity set and cull mode set to none?
This kind of material will normally be lit by your scene lighting.
Yes, i use a plane with a material and inside the texture by opacity. Like the settings you use.
Can you try sharing a screen with how it’s not working?
Oh the only diffrents, i have to enable use Lightning, otherwise the icon is not visible…
With this settings (Diffuse and Emissive are empty):
I get this with using Web GL 1.0:
So there are no icons visible on top of the rifle and knife in the scene.
Oke i see that the problem is that i have to icon inside the blue material. So the icon has to be visible through that specific material.
If you would like the material to be affected by the light (so it gets darker in dark places, lighter in light places), you need to enable Use Lighting.
Also, if it appears black try playing with your diffuse and/or emissive color.
The icon itself is oke now, but the semi transparent material around the icon is the problem.
So how do i create a semi tranparent blue material with inside a white icon?
Not sure you can do this with the current material maps available.
To make it semi-transparent, you can update the opacity map instead of having a fully black background, update it to be grey. But to give that a blue color and the icon keeps its white color, that isn’t doable with a single material (without writing a shader).
You can easily do this using two different entities:
- for the semi-transparent blue background
- and put the icon on top of it
Are you using any WebGL 2.0 exclusive feature? Like alpha to coverage?
Yes. Is there an alternative for that?
That’s the issue then, you need to disable that to have it render properly in WebGL 1.0
You can use alpha test, play with its value. It won’t be so smooth, but it will work.
If i disable it then the icon is mostly not visible and sometimes it appears.
With which value i have to play?
With alpha test, unless something else is the problem.
Could you create a small sample scene to take a look?
I can’t find the option alpha test…
It’s directly above Alpha to Coverage, on the opacity panel.
When I was setting up an example project I discovered that it worked there. I put everything the same and now it also works in my game.
The alpha test option is not visible if you have selected multiple (same) objects. That’s why I couldn’t find it. I don’t know if this is a bug or feature.
1 Like
Nice find! I don’t know either, would you like to submit an issue about it on the editor repo?