Enter VR in A-Frame not working in Wolvic browser on Oculus Quest - aframe

A-Frame by default provides the "enter VR" button at the bottom right of the screen. This is working fine on my desktop, and also in Firefox Reality on my Oculus Quest. But in Wolvic, instead of opening in the VR mode, I see 2 views/screens.
I got the same behaviour for several examples on glitch.com, this is 1 example: https://glitch.com/~aframe-vaporwave
Any idea what's causing this and/or how to fix this?

The example you pointed out uses a very old version of A-Frame (0.5.0) based on the old WebVR API that browsers no longer ship. Make sure you're using 1.3.0 or newer that comes with WebXR support.
All the A-Frame examples should work on Wolvic:
https://aframe.io/aframe/examples/
Can also use the official glitch A-Frame support as starting point:
https://glitch.com/~aframe

Related

arcore positional tracking in aframe?

Hi I'm new here and I want to make a WebAR application using A-Frame. I know the basics and all that but one major problem I'm having is being able to walk around in the scene using ARCore running in Chrome. Is this even possible? I found a WebVR application from 6 years ago that solved the problem of positional tracking but the code's so depreciated it doesn't work anymore. I would prefer using ARCore for tracking but if nothing else marker based tracking will work too.
Edit: here's the depreciated code on github https://github.com/AVGP/goggle-paper
Doesn't use ARCore but instead marker based tracking. Better than nothing I suppose.
As of today, support for ARCore via the web (and thus A-Frame) is only available on Chrome browser with some Android devices.
Here are some great examples of working projects that you can build from:
https://github.com/chenzlabs/aframe-ar
https://aframe-ar.glitch.me/
New features such as image tracking are only available on Chrome Canary (experimental). See this example for image marker tracking:
https://arimg.glitch.me/
And associated documentation:
https://github.com/immersive-web/marker-tracking/blob/main/explainer.md

Audio unable to play in Aframe unless the inspector is opened

I have been working on adding background music to a Glitch project. I followed the Aframe.io documents to create a sound component and set it to automatically play upon running, however, when I try to run the project, the sound does not play automatically on my laptop. I have to open the Aframe inspector and un-pause my project for the music to begin. For some reason, I have not encountered this issue when I tried the same project on my phone. The sound played as expected once the program is up and running. I am not sure what is causing the sound to malfunction but any help is greatly appreciated. Here is the project I am working on: https://glitch.com/edit/#!/animation-animate?path=index.html%3A15%3A23
when working with sounds natively with Aframe, I had the same problem and one of the recommendations that I can give you is to play sounds with the HowlerJS sound library, which is compatible with most frameworks and also compatible with A-Frame
I share their page and the documentation, this library is very easy to use and implement to the project
https://howlerjs.com/
https://github.com/goldfire/howler.js#documentation
Autoplay audio on most modern browsers requires user interaction before enabling audio. You can put a div in front of your scene that upon click starts playing your background audio.
Check out a related SO question / answer for video autoplay that should help:
Autoplaying videosphere from A-frame is not working on any browser(Safari/Chrome)
Another user on A-Frame discord provided this example demo:
https://aframe-autoplay-background-music.glitch.me/

A-frame showing as 3d image in phone instead of WebVR experience

framers!
My VR app brings up a 3d photo menu, where I can select what kind of stereographic view works for my app. Some a frame apps (like Mozillas a frame painting app) do show in 3d. How do I ensure that my aframe shows in 3d?
My code is here: vr-hangman.glitch.me .
I would post a snippet but no part of the code stands out as having a bug.
When I use Chrome DevTools to fake a phone, I'm getting the error shown in this bug report: https://github.com/aframevr/aframe/issues/2385
I've figured out part of the answer, and resolved the bug above. I forked a glitch project to start out with, and it had an old version. However, my app still appears to be incompatible with the Samsung Internet VR experience.
So I forked an old A-Frame VR snippet on Glitch, so it was outdated with that bug.
Samsung Internet doesn't support "async function* runGame()" as a snippet. Even though it still updates the display.

What rendering engine does google's pagespeed and mobile-friendly test use?

You'd think just "webkit", but the screenshots it shows me (and the issues it finds) are quite different to anything that I've seen via devtools device testing or using actual devices.
Is it maybe just an outdated version of webkit?
Without knowing what they're using it's hard to know how to fix the issues, and I feel they'll negatively affect my search index rankings if I don't.
tl;dr:
1- You are right, it is webkit, however, it is a pretty much A stripped down version of Chrome for Android
2- What you see is the default android browser, you can use
Can I Use
and look at "Android Browser" to see whether or not your design is supported by the "mobile view" in PageSpeed
Long Version:
my understanding is this:
1- The view-port you see in PageSpeed represents what a person using the default browser in Android phones would see.
2- The Default Android browser - AKA "WebView" -
is based on the same code as Chrome for Android version
However,
WebView does not have full feature parity with Chrome for Android
Source: Google

GearVR in AFrame - seems to just map the web frame onto a sphere

Running into an issue with A-Frame 0.3.0 running in GearVR on the Samsung Internet app.
When it loads it displays the A-Frame scene on a card hovering in space like an ordinary stationary web page - the content in the web page rotates with head tracking, but the card remains stationary in space.
When I click on the various 360/180 display modes, the image of the flat web page appears to simply map to a sphere and responds loosely to head rotation - there are swirly patterns at the poles so I'm pretty sure it's just a 2D mapping of the web page. Like it's trying to display it as a 360 video.
Is there a hidden setting? I've enabled WebVR in the Samsung browser. Or is there a directive I need to include in A-Frame? The scene runs fine in cardboard through chrome on android. thx
Ryan Betts from Slack said:
You have to type 'internet://webvr-enable' into the address bar to enable it.
Here is the documentation by Samsung: http://developer.samsung.com/technical-doc/view.do?v=T000000270L where it says:
To enable WebVR visit the internet://webvr-enable URL in the Samsung Internet for GearVR browser (visit internet://webvr-disable to disable WebVR support).
ngokevin's answer is correct, you have to enable. If that done correctly, a working demo using 1.0 API will be able to go into correct mode. Note that can't access correct 'mode' using the fullscreen mode options meant for VR/360 video formats. Try https://toji.github.io/webvr-samples/03-vr-presentation.html If this example doesn't work then have not enabled. If this runs but another page doesn't it would be an issue specific to that page and WebVR API usage.
Remember that webvr support in Gear VR is still experimental and really doesn't work very well yet.
For me the Gear VR is extremely jerky and makes you dizzy when looking around and the quality just isn't very good on the sky images.
I'm using a new Gear 360 camera to take my sky images and when I look at them through the regular Gear VR 360 photo viewer app they look awesome but once you go into webvr and look at those same images they're really really blurry.
Hopefully Gear VR can get the kinks worked out soon and hopefully just replaces that stupid Samsung browser with the new Oculus Carmel browser so these webvr apps will work correctly.

Resources