WebXR AR blackout Issues on Android

Hello,

I recently launched a WebXR AR experiment called PARARTY.

Video demo here

It works great on my Galaxy s20 running Android 10, however some Android users have reported blackout. I think it’s related to Android OS, maybe 11 or 9? I’m very new to Android so it’s just a guess. I’m running threejs r119.

Here is my init:

    //ar button w/ dom overlay
	document.body.appendChild( ARButton.createButton( this.renderer, {
		requiredFeatures: [ 'hit-test' ],
		optionalFeatures: [ 'dom-overlay', 'dom-overlay-for-handheld-ar' ],
		domOverlay: { root: document.body } } )
	);

Here is my compatibility test:

    if(_G.RUN_COMPATIBLE_TESTS){

    //----------------------------------------------------------------
    //check android
    var isAndroid = /(android)/i.test(navigator.userAgent);
    if(!isAndroid){
        $("#intro_screen_1").show();
        $("#checklist_row_android").show();
        return;
    }

    //----------------------------------------------------------------
    //check is chrome
    var browsercheck =  bowser.parse(window.navigator.userAgent);
    if(browsercheck.browser.name!=="Chrome"){
        $("#intro_screen_1").show();
        $("#checklist_row_chrome").show();
        return;
    }

    //----------------------------------------------------------------
    //check modern chrome
    var chromev = parseInt( browsercheck.browser.version.split(".")[0] );
    if(chromev<80){
        $("#intro_screen_1").show();
        $("#checklist_row_chromev").show();
        return;
    }

    //----------------------------------------------------------------
    //check xr support
    if ( 'xr' in navigator ) {
        navigator.xr.isSessionSupported( 'immersive-ar' ).then(function(supported){
            if(!supported){
                $("#intro_screen_1").show();
                $("#checklist_row_webxr").show();
                return;
            }
        });
    }

}  

Any idea what it could be? What’s a good way to debug this without an Android11 device?

It’s probably not Android 11 (that’s just me :smiley:)

Would be good to know their device and android version.

@mrdoob i think it’s gonna be difficult to debug over tiktok with the 10 year old kids that use this… I will have to figure out how to simulate Android OS. Or borrow some devices.

Hmm yeah :confused:

I’m also getting a blackout on Mozilla WebXR Viewer:

Issue posted here, https://github.com/MozillaReality/webxr-ios-js/issues/111

Anyone having any Android blackout issues for WebX(A)R ?

Ahhhhhh, i think i got it @mrdoob. What a battle.

  1. Your body/html CSS must have background:none

  2. You cannot instantiate the canvas with an existing div:
    this.renderer = new THREE.WebGLRenderer( { canvas:this.container, antialias:true, alpha:true } );
    Must instead use,
    this.container.appendChild( this.renderer.domElement );

1 Like

That is good to know!

The blackout problem was due to latest upgrade release from ARCore for Android


This patch was updated few days ago for latest chrome version

Oh interesting… thanks!