Flat UI on mobile not showing up?


I’ve been experimenting with different ways of doing UI and supporting interactions for both desktop / mobile / and cardboard-vr.

I’ve found that mobile/vr has a hard time with flat 2D UI, I’ve tried a 3D screen with an image element and that barely shows up on mobile, but mostly invisible. I’ve also tried used the model component as a plane, then flattening the object and using a shader to display sprites, and same thing happened where it disappeared when viewed on mobile. Any ideas here?

There was also some weirdness where I had 3 planes with sprites, and they would only show up if I had another model that was a box (which didn’t show up), but would make all the other ones show up.

So overall I’m just seeing some unexpected behavior and just want to find a reliable way to display UI for both desktop/web and also support raycast/vr gazing.

Here is an example with 3D screen and an image element that doesn’t show up on mobile.

2D screen wouldn’t / shouldn’t work in VR but should be fine on desktop and mobile. Would you able to show a project and screenshots of where it doesn’t do what you expect.

If you need it in VR, 3D screens are the way to go. Here is an example of one: https://developer.playcanvas.com/en/tutorials/webxr-ray-input/

1 Like

Just tried this on desktop and mobile and the white rectangle shows up for me. The VR feature on the project looks broken unfortunately.

1 Like

Interesting, and the VR does work but you have to press the vr button twice as I had to add a permissions prompt so that iOS users can use VR cardboard (device motion and orientation) otherwise doesn’t work.

It also uses WebVR since iOS also doesn’t support XR :frowning: I based it on the “VR Starter Kit (Fixed)” project. I am using a 3D screen in the project posted but I’ll take another look and also look at the example project you provided, thanks for the continued support my dude!

Our older WebVR examples do not support the UI elements as input AFAIK. They only recently been given support for WebXR.

When you say mobile, do you mean mobile or cardboard VR?

Both as I was seeing the issue of the flat UI disappearing initially on mobile as I went to test for cardboard, then of course that means it wouldn’t show up in cardboard as well.

Starting on mobile, I see this:

Which is what I expect to see. Are you expecting something different?

Wait, now that I move the camera, I see what you mean now.

Guess I’m a little unsure now that all the Planes are showing up now without issue… I even changed the one box model back to a plane. I’m still unable to see that white 2D element off to the right.

But I suppose if the planes are now working I can go that route. I’ll have to do some more testing to make sure.

Interesting, it only breaks when you go into VR :thinking:

Looks like a bug from version 1.32.0 -> 1.32.1 that I will report and see if we get a chance to fix.

1 Like

Thanks! The help is super appreciated, hopefully the planes continue working and I can just go that route.