[SOLVED] Image Element with material is invisible

Hi,

In Editor, if I assign a material on an Image Element, it becomes invisible. Even if depthTest and depthWrite are disabled.

I’ve tried with phong and Physical, the same.

I’m sure the Image element is correctly set up in scene because if I assign directly texture, I see it. It becomes unvisible only if I assign a material.

Same thing after refreshing Editor.

Am I missing anyhting ?

Hi @Pouli,

That sounds interesting, not sure what’s wrong.

Can you share a project url to take a look?

Hi Leonidas,

yes for sure : https://playcanvas.com/editor/scene/961149

Independently from this issue, as I can see my picture if assigned directly as texture and not via a material, I want to rotate my picture on two axis. I’ve tried this

self.image.src = "data:image/jpg;base64," + event.data;
        self.image.style.transform = "rotateX(180deg)";
        self.texture.setSource(self.image);
        self.serverPicture.element.texture = self.texture;

but I see no rotation. That’s why I’m trying to use a material to simply rotate the image element in editor, and use material to disable culling because my rotations make back image element face in front of the camera…

If you have any solution to apply rotation on image, that’s ok for me, even there maybe is a bug with materials on image elements.

Thanks

Wao, just saw “flipY” for texture… my bad. it solves my issue. But if you can try on your side regarding material issue…

thanks again

1 Like

Nice, indeed flipY is quite useful.

For the material issue, if you assign the World layer to the element as well, it will work. Most likely because materials use standard model shaders instead of the special Element/UI shaders.

This sounds odd but makes sense. The UI is rendered on transparent layer. If you enable opacity on the material, it renders:

https://playcanvas.com/editor/scene/961168

1 Like

Thanks for your both solutions guy !

Appreciate reactivity !!

1 Like