WebXR: Objects rendered transparent when in immersive-ar on Android

namelessvoid commented 1 month ago

Tested versions

Reproducible in Godot 4.3 (stable) and Godot 4.4.dev3

System information

Sony Xperia 10 III - Andorid 13 - Compatibility - Google Chrome Version 129.0.6668.100 (latest as of time of writing)

Issue description

I try to create a minimal WebXR AR application that shows 3D models to the user, blended with the real world environment. To do so, I followed the instructions on the tutorial in the docs especially the AR / Passthrough, as well as David Snopke's tutorials.

However, when I run the app and enter AR, objects are rendered transparent, the closer their color is to black. (Reading the WebXR standard and checking the environment blend modes, it looks like the rendering behaves as "additive" used for see-through devices (like the Holo Lens). However, it should behave like environment blend mode "alpha-blend", i.e. use the alpha channel to determine transparency). The blend mode reported by WebXR, however, in fact is "alpha-blend" which to my knowledge is correct.

Actual outcome:

godot_webxr_transparent_1

Expected outcome (hacked together in Gimp):

godot_webxr_transparent_1_expected

Since I'm fairly new to WebXR in Godot it may also me doing something wrong :upside_down_face: However, I tried many different things, settings, renders, configuration suggested at different places and always get the same result. I also talked to @dsnopek at GodotCon 24 (shamelessly tagging you here, hope you have had / will have a safe trip back home :) ) about this and he mentioned it could be a regression. Searched the closed issues and this sounds kinda related to me: https://github.com/godotengine/godot/issues/75581

Steps to reproduce

I have hosted the MRP at github pages on https://www.simonkerler.de/godot-webxr-mrp/dist/ :

Open the link with Chrome on your smartphone
Hit the "Enter AR" button
Wait for the scene being blended on the camera pass-through
See that the boxes are not opaque but transparent

If you run the MRP from within the editor, don't forget to expose the web server to 0.0.0.0 and turn on HTTPS to make it accessible from your smartphone.

Minimal reproduction project (MRP)

I created an MRP here: https://github.com/namelessvoid/godot-webxr-mrp

Just open it in the editor. There is a single scene, containing four boxes of different color, world environment, lighting and WebXROrigin with an WebXRCamera.

dsnopek commented 1 month ago

Thanks for making the issue!

I have hosted the MRP at github pages on https://www.simonkerler.de/godot-webxr-mrp/dist/ :

Unfortuantely, I'm not able to reproduce this with your MRP on my smartphone (Samsung S21 Ultra / Android 14 / Chrome 130.0.6723.58) - the boxes are opaque for me:

Screenshot_20241023_144006

I'm not sure why it would work for me but not for you :-/

(I also tested your MRP using the Meta Quest 3, just to try it on some other device, and it also rendered opaque there.)

namelessvoid commented 1 month ago

Thank you very much for testing!

Today, I also asked a friend -- the MRP shows correctly on their S23 / Android 14 device, too.

Not being able to reproduce it on these devices is actually good since it means

my MRP is set up correctly :partying_face:
the issue might not be widely spread
and we may be able to narrow down the root cause.

I try to reach some more people to see what happens on their devices. And everyone reading this: It is highly appreciated if you could quickly try, post your hardware specs and if it worked :) Should take you only a minute :angel:

@dsnopek Do you have any advice or idea on how I could debug this in the meantime? Was thinking if I can somehow grab the frame buffer or layer content to narrow down if it is caused by the Godot renderer or the WebXR Compositor.

dsnopek commented 3 weeks ago

@dsnopek Do you have any advice or idea on how I could debug this in the meantime? Was thinking if I can somehow grab the frame buffer or layer content to narrow down if it is caused by the Godot renderer or the WebXR Compositor.

I'm not sure. It's always so hard to give advice on debugging weird issues, it's much easier to just poke at stuff with the device in hand.

Maybe try changing get_viewport().transparent_bg = true to get_viewport().transparent_bg = false and see if it's still transparent?

In the past, I also remember having to set the environment's background to a transparent color (either by setting the "Background Mode" to "Clear Color" and the clear color to transparent, or "Background Mode" to "Custom Color" and "Background Color" to a transparent color). Your MRP doesn't have that, which is interesting. Maybe try messing around with that and see if it makes any difference?

In Godot 4, we're rendering directly on to the textures provided by WebXR - not doing the copy like we did in Godot 3. So, if the issue is on the Godot side, I would guess that it's in the normal rendering pipeline, not some WebXR-specific code? But that's just a guess.

I'd also try exporting with and without the polyfills recommended in my tutorial. Different browsers will react differently to each polyfill, and it could also be some weird interaction there?

That's all the ideas I have for now :-)

godotengine / godot