Pages: 1 [2] 3 4 ... 14  All

Author Topic: Tutorial: Stereoscopic panorama with Corona + Cardboard  (Read 137976 times)

2015-12-22, 15:24:14
Reply #15

amitshneor

  • Active Users
  • **
  • Posts: 53
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
is the Corona Cam modifier with VR support  a part of a new daily build ?
how can i get it?

Thanks !
Logged
2015-12-22, 15:39:32
Reply #16

88qba88

  • Active Users
  • **
  • Posts: 80
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
Yep, you can get it with newest daily build.

to Maru:
After checking your Meadow I also noticed that 3d effect is visible only a little - was the scale of scene corresponding with VR camera and IPD (Eye Separation)?

Another important thing to feel comfortable in VR is front eye offset.
Logged
2015-12-22, 15:47:52
Reply #17

maru

  • Corona Team
  • Active Users
  • ****
  • Posts: 12758
  • Marcin
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
Quote from: amitshneor on 2015-12-22, 15:24:14
is the Corona Cam modifier with VR support  a part of a new daily build ?
how can i get it?

Thanks !
Yup, you need to get a daily build and then apply Corona Camera Mod. It has built in VR controls. Sorry, I forgot to write about it. :)

to 88qba88, yes, the scale is correct, I used 7cm for eye offset and 7cm for front offset. Converge was set to 2m as far as I remember.
Logged
Marcin Miodek | chaos-corona.com
3D Support Team Lead - Corona | contact us
2015-12-22, 15:59:53
Reply #18

amitshneor

  • Active Users
  • **
  • Posts: 53
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
dear maru, also on gear vr both the meadow and 88qba88 image is very flat,the depth is almost non present...maybe because of no foreground and background stuff...
Logged
2015-12-22, 16:01:48
Reply #19

maru

  • Corona Team
  • Active Users
  • ****
  • Posts: 12758
  • Marcin
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
Quote from: amitshneor on 2015-12-22, 15:59:53
dear maru, also on gear vr both the meadow and 88qba88 image is very flat,the depth is almost non present...maybe because of no foreground and background stuff...
Some of the bubbles were placed really close to the camera. And they were in 3 groups - each one was in different distance from the camera.
Logged
Marcin Miodek | chaos-corona.com
3D Support Team Lead - Corona | contact us
2015-12-22, 16:11:12
Reply #20

amitshneor

  • Active Users
  • **
  • Posts: 53
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
yeh the bubbles have the most stereo effect but the rest is quite flat.
maybe try wider eye seperation?
Logged
2015-12-28, 10:59:25
Reply #21

rambambulli

  • Active Users
  • **
  • Posts: 159
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
Quote
I'm surprised there is no interest in this. :(
I guess it were the deadlines and the holidays :)

Thanks to you Maru for the guide and the Corona team for adding the new lens. It works great!

I tested the meadow and I thought the depth works well. Because there isn't much "body" on the bubbles it is harder to see the depth but next to the godrays it really is there.

As much as I love the Iphone hardware, I hate the apple store so I still can't find nice and simple stereo viewers.

For all who have the same problem I ajusted my html/three.js script so it view Corona panoramas directly.
(I hope there are no copy/paste errors this time :)
The script maps the under/above image that corona makes correctly on the spheres so you don't need to chop them in Photoshop.


Code: [Select]


<!DOCTYPE html>
<html lang="en">
<head>
<title>Stereo Viewer Corona Spherical VR-Cardboard v0.2</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1">
<style TYPE="text/css">
body {
margin: 0px;
background-color: #000000;
overflow: hidden;
}

</style>
</head>
<body>

<div id="container"></div>

<script src="js/three.min.js"></script>
<script src="js/DeviceOrientationControls.js"></script>

<script>

(function() {
     
  window.addEventListener('load', function() {

var imagename = 'img/sptest.jpg'
var animate = function(){

window.requestAnimationFrame( animate );
controls.update();
renderer1.render(scene1, camera);
renderer2.render(scene2, camera);

};

var container = document.getElementById( 'container' );

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.001, 700);
camera.aspect = (window.innerWidth/2) / window.innerHeight;
camera.updateProjectionMatrix();

var controls = new THREE.DeviceOrientationControls( camera );

var scene1 = new THREE.Scene();

var scene2 = new THREE.Scene();

var geometry = new THREE.SphereGeometry( 500, 32, 64);
geometry.scale( - 1, 1, 1 );

var texture1 = new THREE.ImageUtils.loadTexture( imagename );
texture1.repeat.set(1,0.5);
texture1.magFilter = THREE.NearestFilter;
texture1.minFilter = THREE.LinearMipMapLinearFilter;

var material1 = new THREE.MeshBasicMaterial ({ map:texture1 });

var texture2 = new THREE.ImageUtils.loadTexture( imagename);
texture2.repeat.set(1,0.5);
texture2.offset.y = 0.5;
texture2.magFilter = THREE.NearestFilter;
texture2.minFilter = THREE.LinearMipMapLinearFilter;

var material2 = new THREE.MeshBasicMaterial ({ map:texture2 });

var mesh1 = new THREE.Mesh( geometry, material1 );
scene1.add( mesh1 );

var mesh2 = new THREE.Mesh( geometry, material2 );
scene2.add( mesh2 );

var renderer1 = new THREE.WebGLRenderer({ antialias: true });
renderer1.setPixelRatio( window.devicePixelRatio);
renderer1.setClearColor( 0xffffff );
renderer1.setSize(window.innerWidth/2, window.innerHeight);
renderer1.domElement.style.top = 0;
container.appendChild(renderer1.domElement);

var renderer2 = new THREE.WebGLRenderer({ antialias: true });
renderer2.setPixelRatio( window.devicePixelRatio);
renderer2.setClearColor( 0xffffff );
renderer2.setSize(window.innerWidth/2, window.innerHeight);
renderer2.domElement.style.top = 0;
container.appendChild(renderer2.domElement);

window.addEventListener('resize', function() {

camera.aspect = (window.innerWidth/2) / window.innerHeight;
camera.updateProjectionMatrix();

camera.aspect = (window.innerWidth/2) / window.innerHeight;
camera.updateProjectionMatrix();

renderer1.setSize((window.innerWidth/2), window.innerHeight );
renderer2.setSize((window.innerWidth/2), window.innerHeight );

}, false);

animate();

  }, false);

})

();

</script>

</body>
</html>


BTW I cannot attach the js files here. They are available on the web or you can use the URls of the official THREE.js site into the script.
« Last Edit: 2015-12-29, 12:02:18 by rambambulli »
Logged
2015-12-28, 13:36:06
Reply #22

88qba88

  • Active Users
  • **
  • Posts: 80
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
Rambambulli,

Can you tell me where can I find proper js files? I tried to follow your advice at the end of the post I have no idea what should I do...

Thanks!
Logged
2015-12-28, 14:57:45
Reply #23

rambambulli

  • Active Users
  • **
  • Posts: 159
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
Sorry for making simples thing so hard. I'm not the best guide-writer, am I.

I hope this clarifies it.

replace:

Code: [Select]
<script src="js/three.min.js"></script>
with:

Code: [Select]
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"> </script>
(you need a internet connection if you use the link. If you save the THREE.min.js file to you web server (cloud file system) it works off line)

For the deviceorientationcontrols.js If haven't found a proper cdn.
So you can download the deviceorientationcontrol.js from: https://github.com/mrdoob/three.js/tree/af21991fc7c4e1d35d6a93031707273d937af0f9/examples/js/controls
and place it in the /js folder on your server.

or replace:

Code: [Select]
<script src="js/DeviceOrientationControls.js"></script>
with:

Code: [Select]
<script>
/**
 * @author richt / http://richt.me
 * @author WestLangley / http://github.com/WestLangley
 *
 * W3C Device Orientation control (http://w3c.github.io/deviceorientation/spec-source-orientation.html)
 */

THREE.DeviceOrientationControls = function ( object ) {

var scope = this;

this.object = object;
this.object.rotation.reorder( "YXZ" );

this.enabled = true;

this.deviceOrientation = {};
this.screenOrientation = 0;

var onDeviceOrientationChangeEvent = function ( event ) {

scope.deviceOrientation = event;

};

var onScreenOrientationChangeEvent = function () {

scope.screenOrientation = window.orientation || 0;

};

// The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''

var setObjectQuaternion = function () {

var zee = new THREE.Vector3( 0, 0, 1 );

var euler = new THREE.Euler();

var q0 = new THREE.Quaternion();

var q1 = new THREE.Quaternion( - Math.sqrt( 0.5 ), 0, 0, Math.sqrt( 0.5 ) ); // - PI/2 around the x-axis

return function ( quaternion, alpha, beta, gamma, orient ) {

euler.set( beta, alpha, - gamma, 'YXZ' );                       // 'ZXY' for the device, but 'YXZ' for us

quaternion.setFromEuler( euler );                               // orient the device

quaternion.multiply( q1 );                                      // camera looks out the back of the device, not the top

quaternion.multiply( q0.setFromAxisAngle( zee, - orient ) );    // adjust for screen orientation

}

}();

this.connect = function() {

onScreenOrientationChangeEvent(); // run once on load

window.addEventListener( 'orientationchange', onScreenOrientationChangeEvent, false );
window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent, false );

scope.enabled = true;

};

this.disconnect = function() {

window.removeEventListener( 'orientationchange', onScreenOrientationChangeEvent, false );
window.removeEventListener( 'deviceorientation', onDeviceOrientationChangeEvent, false );

scope.enabled = false;

};

this.update = function () {

if ( scope.enabled === false ) return;

var alpha  = scope.deviceOrientation.alpha ? THREE.Math.degToRad( scope.deviceOrientation.alpha ) : 0; // Z
var beta   = scope.deviceOrientation.beta  ? THREE.Math.degToRad( scope.deviceOrientation.beta  ) : 0; // X'
var gamma  = scope.deviceOrientation.gamma ? THREE.Math.degToRad( scope.deviceOrientation.gamma ) : 0; // Y''
var orient = scope.screenOrientation       ? THREE.Math.degToRad( scope.screenOrientation       ) : 0; // O

setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient );

};

this.dispose = function () {

this.disconnect();

};

this.connect();

};</script>
please let me know if you have a question on this.
Logged
2015-12-29, 08:04:11
Reply #24

88qba88

  • Active Users
  • **
  • Posts: 80
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
Wow, thank you for your fast reply Rambambulli!

I followed your advice step by step, in every configuration. Strange, but whatever I do I get black screen - I tried opening *.html file on IE, Edge, Firefox, Chrome, OneDrive on my iPhone 5s. Black screen everywhere.

My file that I rendered has a resolution of 5000x5000 px, its standard *.jpg file. File name is Corona_Panorama.jpg

I can send you my OneDrive Files if you want to chack that out:)

Thank you again!

Anyway, I'm gonna keep trying to make it work today.
Logged
2015-12-29, 11:03:02
Reply #25

rambambulli

  • Active Users
  • **
  • Posts: 159
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
Please send me your files. I'm no pro javascript programmer so there could be a mistake in the code. I'll look into it.
Logged
2015-12-29, 11:15:24
Reply #26

88qba88

  • Active Users
  • **
  • Posts: 80
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
Sure, there you go!

I'm sending my folder with all the files in it, it would be gr8 if you could help me, I've all the forums in the world and I've no idea how to make it work.

Thanks!
Logged
2015-12-29, 12:05:40
Reply #27

rambambulli

  • Active Users
  • **
  • Posts: 159
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
Hmm. It works for me but I tested is on a other phone and also black.
I deleted the lines (about onedrive and dropbox) in the thread above until I figure this out.
Sorry guys for bad tip here.

@88qba88 have you tested the script on a webserver? (added: I tested it and it works: www.cocolenssen.nl/z/Corona_Panorama.html).
« Last Edit: 2015-12-29, 13:04:10 by rambambulli »
Logged
2015-12-29, 12:54:27
Reply #28

88qba88

  • Active Users
  • **
  • Posts: 80
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
Not yet, I'll try it today and let you know what happens.
Logged
2015-12-29, 13:03:42
Reply #29

88qba88

  • Active Users
  • **
  • Posts: 80
    • View Profile
Re: Tutorial: Stereoscopic panorama with Corona + Cardboard
ok, i tested it and looks like it doesn't work on webserver as well"

http://europrojekt.elblag.pl/corona/
Logged
Pages: 1 [2] 3 4 ... 14  All