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

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.

Related

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

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

Do SteamVR headsets, like the HTC Vive, not work with A-Frame and WebVR or WebXR anymore?

I have been struggling for a while to get my A-Frame scenes to display in my VR headset through SteamVR. Simply put, my goal is to find a way to get A-Frame projects to properly display on my headset, but instead my headset receives no feed from the A-Frame scene and displays a solid grey or black color. Here's the odd part: sometimes, I can get the A-Frame scene to show up on the SteamVR VR View window on my desktop, but when I put my headset on, the display is still greyed or blacked out. Unfortunately, no errors were encounter (so far) in the console log of the browser I tried running the A-Frame scenes in.
Important to mention, the HTC Vive Headset and OptiTrack Equipment do work. They work for Unity programs and other VR applications. They are just not working with WebVR, WebXR, and A-Frame programs.
Usually what occurs is when I open up the A-Frame scene in a web browser tab manually or by using http-server and ngrok, the scene runs fine on the desktop monitor. However, it then proceeds to open up SteamVR and attempts to connect to my headset. SteamVR will usually say Playing Firefox or Playing Chrome. Sometimes the A-Frame scene appears on the VR View of the SteamVR application, but every time I try this the headset display is blacked or greyed out. That's as far as I can get.
Equipment:
HTC Vive Pro Eye (w/ OptiTrack Active Tag Attachment and Wireless Adapter)
OptiTrack IR Cameras (not using base stations)
HP Z4 Desktop Workstation Computer
Here's what I've tried so far:
Enabling web xr and vr flags in browsers like Chrome, Chromium, Firefox, Edge, and Firefox Nightly (However, for browsers like Chrome, I couldn't find the web vr or xr flags anywhere)
Disabling xr sandbox in the web browsers that provided the option to enable/disable xr sandbox
Trying beta versions of SteamVR
Using a mixed reality HP headset (The one that comes with the backpack VR computer) with Edge
Trying different release versions of A-Frame
Tried using Supermedium, which some have recommended, but I don't think opens A-Frame scenes...
I would paste error and code snippets, but for this scenario it wouldn't make sense since no errors pop up and it's very unlikely that the issue is from the HTML/JavaScript A-Frame code. Thank you for taking the time to read and consider this issue! If you need any other details I'll provide them here so just let me know.

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/

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.

iOS simulator weird "broken glass" behavior, App only lists contacts groups

I'm working on a two months old project that was working till today, without any changes except maybe XCode update from 4.4 to 4.5.
I use RHAddressBook to read contacts groups, which seems to be a very good framework, but got a weird behavior.
In this order :
Simulating in iOS5 iPhone non retina : app displays a black screen, weird log :
objc[31712]: Class _NSZombie_CFCalendar is implemented in both ?? and ??. One of the two will be used. Which one is undefined.
Simulating in iOS6 iPhone non retina : everything works fine, groups are loaded and displayed, no log
Simulating in iOS5 iPhone non retina : app displays contact list but their seems to be a broken glass effect on the simulator display, and neither top or bottom bars are displayed, weird log again
Here is my storyboard (root view in navigation controller) :
And simulator screenshot for the same screen :
And the second screen (simple segue opening blank page) :
If some idea crosses your mind I'd be glad to hear it !
Thanks a lot.
EDIT: seems like this is an iPhone Simulator bug, I will try reinstalling it. On another app (SYGalleryExample from SYGallery) it displays it as if it was on an iPad, with the same broken glass effect, and here is another app perfectly working on production use :
EDIT 2: Reinstalling XCode, wiping out ~/Library/Developer and ~/Library/Application Support/iPhone Simulator folders didn't do anything. Seems like I'm going for a full system installation again.
EDIT 3: even iphone simulator "native" apps are active weird. Here is proof :
Everything fixed, Apple bug somewhere in my user files for iPhone Simulator on iOS5. To recap : the display of every app I built was screwed up, including app that were working yesterday without any change done till then.
Then I spotted also native apps were not OK, design was the iPad one on the simulated iPhone non retina device .
Logging in another session, launching the same native apps (settings, maps, etc) everything was fine.
Logged back on the original session, everything works again.
Hope this can help some future reader.
EDIT :
actually no, still not working. complete new install of osx on new hard drive, no time machine restore or whatsoever, run working project on ipad 5.0 simulator and still :
For me it only reproduced on iOS5, iOS6 worked fine.
This is how i managed to fix it:
The problem was that i had installed SwitchResX, which is a program that creates display profiles for mac. This application interfered with the resolution of the iPad simulator.
So my suggestion is to remove any applications that change your resolution or try a different display resolution.

Resources