A 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:
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 |
Property | Description | Default Value |
---|---|---|
eye | in which eye the entity is render VR mode ('left' or 'right') | 'left |
mode | this property is for spheres holding a video texture. mode can be 'full' or 'half', depending if the original video is full 360 or only spans 180 degrees horizontally (half-dome) | 'full' |
split | this property indicates whether to split the video texture horizontally (left and right hemispheres), or vertically, (top and bottom hemispheres) | 'horizontal' |
playOnClick | this property indicates whether the video will automatically be played on clicking on the canvas | true |
Install and use by directly including the browser files:
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
<script src="https://github.com/c-frame/aframe-stereo-component/raw/master/aframe-stereo-component.js.min.js"></script>
</head>
<body>
<a-scene>
<!--
stereoscopic panoramic render by
http://pedrofe.com/rendering-for-oculus-rift-with-arnold/
http://www.meryproject.com/
-->
<!-- side by side equirectangular projected video -->
<video id="Mary" src="https://github.com/c-frame/aframe-stereo-component/raw/master/examples/basic_development/textures/MaryOculus.webm" loop></video>
<!-- we tell here the camera to render (outside VR mode, in monoscopic mode) everything without the 'stereo' component active
and it it's active, only render those entities in the 'left' eye -->
<a-camera position="0 0 10" stereocam="eye:left;"></a-camera>
<!-- native sphere, will render on 'left' eye, and will take only the first half of the video for projection -->
<a-entity geometry="primitive: sphere;
radius: 100;
segmentsWidth: 64;
segmentsHeight: 64;"
material="shader: flat; src: #Mary; side:back;"
scale="-1 1 1" stereo="eye:left">
</a-entity>
<!-- native sphere, will render on 'right' eye, and will take only the second half of the video for projection -->
<a-entity geometry="primitive: sphere;
radius: 100;
segmentsWidth: 64;
segmentsHeight: 64;"
material="shader: flat; src: #Mary; side:back;"
scale="-1 1 1" stereo="eye:right">
</a-entity>
</a-scene>
</body>
</html>
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>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
<script src="https://github.com/c-frame/aframe-stereo-component/raw/master/aframe-stereo-component.js.min.js"></script>
</head>
<body>
<a-scene antialias="true">
<!-- Paths to left and right images -->
<a-assets>
<img id="left" src="http://i.imgur.com/YAaxpv6.jpg">
<img id="right" src="http://i.imgur.com/JUxTnzK.jpg">
</a-assets>
<!-- Camera -->
<a-entity camera look-controls position="0 0 0" stereocam="eye:left;"></a-entity>
<!-- Sky sphere -->
<a-sky id="sky1" src="https://github.com/c-frame/aframe-stereo-component/raw/master/#left" stereo="eye:left"></a-sky>
<a-sky id="sky2" src="https://github.com/c-frame/aframe-stereo-component/raw/master/#right" stereo="eye:right"></a-sky>
<-- or alternatively -->
<!--<a-sky id="sky1" src="http://i.imgur.com/YAaxpv6.jpg" stereo="eye:left"></a-sky>-->
<!--<a-sky id="sky2" src="http://i.imgur.com/JUxTnzK.jpg" stereo="eye:right"></a-sky>-->
</a-scene>
</body>
</html>
Install and use by directly including the browser files:
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
<script src="https://github.com/c-frame/aframe-stereo-component/raw/master/aframe-stereo-component.js.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="#FFF"></a-sky>
<a-light color="#333" position="0 5 0" type="ambient" intensity="0.2"></a-light>
<a-light type="point" color="#EEE" intensity="1.0" position="3 3 10"></a-light>
<!-- 'left' eye entities will pass trough the camera in non-VR mode -->
<a-camera position="0 0 10" stereocam="eye:left;">
<a-cursor color="black"></a-cursor>
</a-camera>
<!-- in VR mode, the first box is displayed only in the left eye, the second one in the right eye -->
<a-entity geometry="primitive: box" material="color: #C03546" stereo="eye:left"></a-entity>
<a-entity geometry="primitive: box" material="color: #3546C0" position="0 5 0" stereo="eye: right"></a-entity>
</a-scene>
</body>
</html>
Install and use by directly including the browser files:
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
<script src="https://github.com/c-frame/aframe-stereo-component/raw/master/aframe-stereo-component.js.min.js"></script>
</head>
<body>
<a-scene>
<!-- top and bottom equirectangular projected video -->
<video id="video" src="https://github.com/c-frame/aframe-stereo-component/raw/master/path/to/top-bottom/mp4" loop></video>
<!-- here we tell the camera to render (outside VR mode, in monoscopic mode) everything without the 'stereo' component active
and if it's active, only render those entities in the 'left' eye -->
<a-camera position="0 0 10" stereocam="eye:left;"></a-camera>
<!-- native sphere, will render on 'left' eye, and will take only the first half (top) of the video for projection -->
<a-entity geometry="primitive: sphere; radius: 100; segmentsWidth: 64; segmentsHeight: 64;"
material="shader: flat; src: #video; side:back;"
scale="-1 1 1" stereo="eye:left; split: vertical">
</a-entity>
<!-- native sphere, will render on 'right' eye, and will take only the second half (bottom) of the video for projection -->
<a-entity geometry="primitive: sphere; radius: 100; segmentsWidth: 64; segmentsHeight: 64;"
material="shader: flat; src: #video; side:back;"
scale="-1 1 1" stereo="eye:right; split: vertical">
</a-entity>
</a-scene>
</body>
</html>
Install via NPM:
npm install aframe-stereo-component
Then register and use.
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);
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