@Alex. Are you still looking for a web based vr viewer for a cardboad viewer?
I wrote a simple Three.js script that runs on all WebGL gyro phones I tried so far. I am no javascript expert so the script needs some tweaking and improving but it works fine for me. Especially because everybody (with a phone) can watch and use it. You don't have to download some app.
For the panoramas I use the same spherical corona panorama for the left as well as for the right eye. The code can be simply altered to display a slightly different panorama for the left and the right eye. 8 out of 10 people can see some depth with this setup. So right now it works fine for me.
To improve the setup I need some time to figure out how to create a "2 eye off axis spherical lens rig" in corona (like in this tutorial
http://elevr.com/cg-vr-1/). Or someone smart can help me out here :)
If anyone has some good ideas to improve this please do!
the html/javascript code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Vr Panorama Viewer | Three.js</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1">
<!-- Background turns red is Moble phone is not WebGL ready -->
<style TYPE="text/css">
body {
margin: 0px;
background-color: #F00000;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<!-- libraries can be downloaded from the three.js website: http://cdnjs.com/libraries/three.js/ -->
<script src="js/three.min.js"></script>
<script src="js/DeviceOrientationControls.js"></script>
<script src="js/StereoEffect.js"></script>
<script>
(function() {
"use strict";
window.addEventListener('load', function() {
var container, camera, scene, rendererLeft, rendererRight, controls, geometry, mesh;
var animate = function(){
window.requestAnimationFrame( animate );
controls.update();
rendererLeft.render(scene, camera);
rendererRight.render(scene, camera);
};
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.001, 700);
camera.aspect = (window.innerWidth/2) / window.innerHeight;
camera.updateProjectionMatrix();
controls = new THREE.DeviceOrientationControls( camera );
scene = new THREE.Scene();
var geometry = new THREE.SphereGeometry( 500, 32, 32 );
geometry.scale( - 1, 1, 1 );
// change image to your own
var material = new THREE.MeshBasicMaterial( {
map: THREE.ImageUtils.loadTexture( 'img/Corona_Panorama.jpg' )
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
//left eye
rendererLeft = new THREE.WebGLRenderer();
rendererLeft.setPixelRatio( window.devicePixelRatio);
rendererLeft.setSize(window.innerWidth/2, window.innerHeight);
rendererLeft.domElement.style.top = 0;
container.appendChild(rendererLeft.domElement);
//right eye
rendererRight = new THREE.WebGLRenderer();
rendererRight.setPixelRatio( window.devicePixelRatio);
rendererRight.setSize(window.innerWidth/2, window.innerHeight);
rendererRight.domElement.style.top = 0;
container.appendChild(rendererRight.domElement);
window.addEventListener('resize', function() {
camera.aspect = (window.innerWidth/2) / window.innerHeight;
camera.updateProjectionMatrix();
rendererLeft.setSize((window.innerWidth/2), window.innerHeight );
rendererRight.setSize((window.innerWidth/2), window.innerHeight );
}, false);
animate();
}, false);
})();
</script>
</body>
</html>
