Stereoscopic component for A-Frame VR.
npm install aframe-stereo-componentA stereo component for A-Frame VR.
This component builds on the ['layer' concept of THREE.js] (https://github.com/mrdoob/three.js/issues/6437) and is really two components in one:
- 'stereocam' component, with tells an aframe camera which 'eye' to render in case of monoscopic display (without 'Entering VR'). The camera will render all entities without the stereo component, but if it encounters an entity with the 'stereo' component active, it will render only those in the same eye as defined here.
- 'stereo' component, which tells aframe to include an entity in either the 'right' eye or 'left' eye (you can also specify 'both', but this has the same effect as not using the 'stereo' component. The component also enables stereoscopic video rendering projected on spheres, so if a sphere (see example below) has the 'stereo' component enabled, if will only project half of the video texture (which one depends on the 'eye' property), so the result is stereoscopic video rendering, if you include two spheres. The component expects videos in side-by-side equirectangular projection (see the video example below).
If a video is used in a sphere with the 'stereo' component active, the component will also enable playback in mobile devices, by attaching a 'click' event on the rendering canvas. Thus, in mobile devices you must click on the screen (via cardboard v2.0 button or with your finger) for the video to start playing. This can be disabled by setting the playOnClick variable to false.
NOTE: for some reason (?) if the video element is put inside scene 'assets' tag, a cross-origin issue is raised
You can see demos for both examples below [here] (http://oscarmarinmiro.github.io/aframe-stereo-component)
| Property | Description | Default Value |
| -------- | ----------- | ------------- |
| eye | which eye is enabled in monoscopic display ('left' or 'right') | 'left |
#### Browser Installation. 360 stereoscopic video example
Install and use by directly including the browser files:
``html
scale="-1 1 1" stereo="eye:left">
scale="-1 1 1" stereo="eye:right">
`
!"Stereoscopic images"
#### Browser Installation. Stereoscopic panoramas (images)
if you have an over/under stereo panorama file, you can follow this instructions to split it
Install and use by directly including the browser files:
`html


<-- or alternatively -->
`
!"Two cubes in a scene, each one for each eye"
#### Browser Installation. Two cubes, each one for each eye
Install and use by directly including the browser files:
`html
`
#### Stereoscopic videos that are split vertically - Top and Bottom
Install and use by directly including the browser files:
`html
scale="-1 1 1" stereo="eye:left; split: vertical">
scale="-1 1 1" stereo="eye:right; split: vertical">
`
#### NPM Installation
Install via NPM:
`bash`
npm install aframe-stereo-component
Then register and use.
`js
var AFRAME = require('aframe');
var stereoComponent = require('aframe-stereo-component').stereo_component;
var stereocamComponent = require('aframe-stereo-component').stereocam_component;
AFRAME.registerComponent('stereo', stereoComponent);
AFRAME.registerComponent('stereocam', stereocamComponent);
``
#### Credits
The video used in the examples is from http://pedrofe.com/rendering-for-oculus-rift-with-arnold/, from the project http://www.meryproject.com/
Boilerplate code from https://github.com/ngokevin/aframe-component-boilerplate
Code for adjusting sphere face vertex is from https://github.com/mrdoob/three.js/blob/master/examples/webvr_video.html
Stereo images from Dougstar02