Scene rendering black when entering VR mode in A-Frame - aframe

I am using A-Frame 0.3.0. Everything renders fine on the screen, but when I enter VR mode, it renders black. I have tried the latest Chromium and Firefox Nightly builds from September. Even the A-Frame examples do not working.
<script src="https://aframe.io/releases/0.3.1/aframe.min.js"></script>
<a-scene>
<a-box color="red"></a-box>
</a-scene>

This is because the September 2016 builds of Chromium and Firefox Nightly were updated to use the new WebVR 1.1 API spec, whereas A-Frame was working on WebVR 1.0 API spec.
This has been updated in A-Frame v0.3.2, where we have bumped VREffect to match the latest API changes.
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
<a-scene>
<a-box color="red"></a-box>
</a-scene>
EDIT: additional breaking changes have been announced for WebVR 1.1, so things may break in future experimental versions of the browser temporarily until A-Frame updates again

Related

Is it possible to change the top color of safari for iPhone with ReactJS?

I'm trying to change the upper part of my application made with ReactJs, which can be modified on Iphone X and later. I have seen that with react-native it is possible but I can't find a way to do it with react. If anyone can help me I appreciate it
Starting with Version 15, Safari supports the theme-color <meta> tag both on macOS and iOS.
Add this to index.html
<meta name="theme-color" content="#319197">
In depth, here.

GLTF not displaying using ar.js

I'm currently testing AR.js to display 3D models in augmented reality using phones. My web coding skills are very novice so I'm pulling together different tutorials to get what I want. I believe I've just about nailed what I need to properly display a gltf file but there seems to be some small issue as the model won't display (I've confirmed that it's a valid file using a gltf viewer). The code also works fine to display a simple a-box, but falls down as soon as I comment that out and add the line for the gltf model.
Any help would be most appreciated!
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.2.1/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: true;'>
<a-marker preset="hiro">
<!--<a-box position='0 0.5 0' material='color: yellow;'></a-box>-->
<a-entity gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
You can browse the new AR.js docs there is an example with a gltf model with also an online live version.
In the example you provided you should make this change
from this:
<a-entity
gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>
to:
<a-entity gltf-model="https://arjs-cors-proxy.herokuapp.com/https://tests.offtopicproductions.com/ywca.gltf"></a-entity>
You should add:
https://arjs-cors-proxy.herokuapp.com/
to avoid CORS issues if the resource is not in the same host.
AR.js is under a new github org https://github.com/AR-js-org all the resources (libs and docs) are here now.

Aframe : Animation not working on the collada model from mixamo

The animation for the model is not playing. Here are the steps I followed:
I first downloaded a 'Walking.dae' collada file from mixamo
I then converted the collada format to .gltf 2.0 using the KhronosGroup/glTF online converter.
Then I used the animation-mixer by don mccurdy in the code.
Problems:
The first problem I immediately observe from the browser console is the following: 'components:gltf-model:warn Failed to load glTF model'. So is there a conversion problem from the KhronosGroup/glTF online converter?
I tried my best but could not find the url that we use in the <script scr="path">. Can this "path" to the animation-mixer.js file by don mccurdy be provided to me?
Lastly is this the code using which my model can show the animation or is there anymore to this?
Code:
<html>
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<!--script url for animation mixer from don mccurdy-->
</head>
<body>
<a-scene>
<a-sky color="#6EBAA7"></a-sky>
<a-entity gltf-model="Walking.gltf" animation-mixer="clip: Idle"></a-entity>
<a-entity position="0 1 2"><a-camera></a-camera></a-entity>
</a-scene>
</body>
</html>
The model and the animation have been downloaded from Mixamo. I have also placed the downloaded .dae files in the same folder as that of the html I am running. Here is the structure:
The directory structure
Any help will be appreciated. Thanks in advance.

An empty rectangle is displayed, instead of a Semantic UI icon

Why is the Id Card icon of Semantic UI displaying an empty vertical rectangle ?
<i class="id card icon" style="font-size: 18px;"></i>
I just installed the standalone package and I can see other icons being correctly displayed, like this one:
<i class="car icon black" style="font-size: 18px;"></i>
This happens on Chrome 60.0 and on Firefox 55.0 on a Linux Lubuntu 16.04 system.
It must be something with my page though, because the Semantic UI project page displays its icons just fine in my browsers.
I then thought about some conflict with some other css, and so under the Chrome debbuger I deleted all elements in my page, to end with a very bare bones page, but still, the icon would not display.
I finally got it to work. I downloaded the latest master from their github project page and added the following
<link href="/css/semantic-ui/semantic.min.css" media="screen" rel="stylesheet" type="text/css">
in my web page.

YouTube iFrame API bug in Mobile Safari

Using the YouTube iFrame API to embed a video I have come across a strange bug.
The bug is only apparent on Mobile Safari (iPad3, mini and iPhone)
No matter what I do to set a specific height or width the links under the video do not work. It's as if the iFrames height is not being honoured by safari.
After about 4-5 lines the links start working again.
I have seen one article which says you need to set the attribute scrolling="no" on the iframe but this is YouTube API embed so not possible.
Demo below:
http://jsfiddle.net/sidonaldson/rqRvx/2
player = new YT.Player('player', {
height: '200',
width: '200',
videoId: 'J---aiyznGQ'
});
I'm experiencing a similar issue on mobile Safari on the iPhone. Loading multiple YouTube videos "disables" any links rendered below them and only allows you to play the videos in the order they were loaded. It's a very weird behaviour and what I've also found is that when you play the last video, the links become clickable again.
What I've discovered is that this happens only when the viewport meta tag is used.
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
Although removing it fixes the problem, I'm not sure this is something you'll want to do for a mobile web app.

Resources