Resolved: A-Frame 1.4.0 not showing the VR button on iOS

In this post, we will see how to resolve A-Frame 1.4.0 not showing the VR button on iOS

Question:

I’m trying to make a small VR app to work in browser and that can be used via Cardboard (like Google Cardboard). After developing my application I’ve realized that the VR button was simply not there. I’ve tried accessing the aframe examples to see if I was doing something wrong in my code, but that wasn’t the case. Even in the HelloVR example on their main page, I cannot see the VR button to go in VR mode. I’ve tried multiple browsers:

Google Chrome: 110.0.5481.114 (Official Build) stable (64-bit)
Safari 16
Firefox 110.2 (29283)

iOS Version: 16.3
Model name: iPhone 12 mini
But nothing worked. I’ve then downgraded to A-Frame 1.3.0 and the button did show up, but when I clicked on it after the instructions to place the phone in the cardboard, I’ve got a blank white screen.
Here are the logs from the Chrome Browser:
When version 1.4.0 was used:

LOGA-Frame Version: 1.4.0 (Date 2022-12-26, Commit #60a324a2)
LOGTHREE Version (https://github.com/supermedium/three.js): ^0.147.0
LOGWebVR Polyfill Version: ^0.10.12
WARNINGwebvr-polyfill: Invalid timestamps detected: Timestamp from devicemotion outside expected range.
LOG%ccore:a-assets:warn %cAsset loading timed out in %c  color: orange color: inherit color: orange 3000 ms
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete

When version 1.3.0 was used:

LOGA-Frame Version: 1.3.0 (Date 2022-02-04, Commit #cc3516ce)
LOGTHREE Version (https://github.com/supermedium/three.js): ^0.137.0
LOGWebVR Polyfill Version: ^0.10.12
WARNINGwebvr-polyfill: Invalid timestamps detected: Timestamp from devicemotion outside expected range.
LOG%ccore:a-assets:warn %cAsset loading timed out in %c  color: orange color: inherit color: orange 3000 ms
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Can't change size while VR device is presenting.
WARNINGTHREE.WebGLRenderer: Can't change size while VR device is presenting.

Did anyone have this problem before? I couldn’t find anything on the internet.

Best Answer:

As stated in release notes cardboard mode is being deprecated on devices that don’t support it natively via WebXR API. Changes and inconsistency in fullscreen browser policies makes it hard to maintain. Also Cardboard holders usage is down and are harder and harder to come by specially those that support newer screen sizes, resolutions and aspect ratios. The cost of supporting cardboard mode via WebXR polyfill is high and the user experience is poor hence the decision to deprecate.
On A-Frame 1.4.1 you can still enable the mode but it’s no longer supported and will be removed in the future:

<a-scene vr-mode-ui="cardboardModeEnabled: true">...</a-scene>

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com

Resolved: A-Frame 1.4.0 not showing the VR button on iOS

Resolved: PostgreSQL resample 1 minute OHLCV candle data into 5 minute OHLCV candle data

Resolved: How do I navigate a table without any easily accessible distinctions?

Resolved: Can a pod make itself unavailable temporarily in kubernetes?

Question:

Best Answer:

Related Posts

Resolved: PostgreSQL resample 1 minute OHLCV candle data into 5 minute OHLCV candle data

Resolved: How do I navigate a table without any easily accessible distinctions?

Resolved: Can a pod make itself unavailable temporarily in kubernetes?