Author Topic: Panorama exporter with Google Cardboard  (Read 12385 times)

2015-09-11, 06:43:54

Alex Abarca

  • Active Users
  • **
  • Posts: 364
  • Corona Certified Instructor
    • View Profile
    • www.alexabarcaviz.wordpress.com
Hi development team,

Is is possible to write code so that panorama exporter is viewable in google cardboard IOS?

Or make a viewer?



2015-09-11, 14:33:20
Reply #2

arqrenderz

  • Active Users
  • **
  • Posts: 736
  • arqrenderz.com
    • View Profile
    • arqrenderz

2015-09-11, 15:54:16
Reply #3

maru

  • Corona Team
  • Active Users
  • ****
  • Posts: 9978
  • Marcin
    • View Profile
I can see there is a lot of interest in VR and augmented reality recently (I mean not in Corona community, but generally in the CG world). I even bought myself a simple version of Cardboard (for ~4€). :) These are some really promising technologies.

2015-09-11, 16:35:29
Reply #4

romullus

  • Global Moderator
  • Active Users
  • ****
  • Posts: 6581
  • Let's move this topic, shall we?
    • View Profile
    • My Models
Would like to play with cardboard, but my phone hasn't gyro :[
I'm not Corona Team member. Everything i say, is my personal opinion only.
My Models | My Videos | My Pictures

2015-09-11, 19:24:47
Reply #5

Alex Abarca

  • Active Users
  • **
  • Posts: 364
  • Corona Certified Instructor
    • View Profile
    • www.alexabarcaviz.wordpress.com
Staring at renderings is cool, but panos are way better. am doing 10k pixel panos with cardboard.

2015-09-11, 19:45:15
Reply #6

maru

  • Corona Team
  • Active Users
  • ****
  • Posts: 9978
  • Marcin
    • View Profile
You can also cross your eyes if you have enough skill and see the cardboard stuff without cardboard. ;)

2015-09-11, 23:53:50
Reply #7

Alex Abarca

  • Active Users
  • **
  • Posts: 364
  • Corona Certified Instructor
    • View Profile
    • www.alexabarcaviz.wordpress.com

2015-09-12, 13:57:08
Reply #8

rambambulli

  • Active Users
  • **
  • Posts: 160
    • View Profile
I don't know what is worse no gyro or an iPhone in The Netherlands. iTunes (my least favorite software ever) doens't support google cardboard in The Netherlands. I think they all imagined the Dutch have cross eyes by birth ;(

Alex do you want to have a script or do you want to know how to make a google cardboard photosphere?
Btw for animation or for stills or both?

Maybe you already know this but here is a nice tutorial:
http://elevr.com/cg-vr-1/
the next turorial is for Maya but can used in 3ds max and corona. Just link 2 cameras. 
http://elevr.com/cg-vr-2/

2015-09-12, 17:12:23
Reply #9

Jpjapers

  • Active Users
  • **
  • Posts: 1350
    • View Profile
Max's built in panorama exporter works great and it works on the google cardboard. All you need to do is render out 2 panoramas from 2 cameras on a rig of 2 cameras. i tried this out back in v0.7 and it worked then perfectly, i cant see why it wouldnt work now.

EDIT: My bad i now realise you want full stereo. Perhaps someone could so something similar to max's wraparound lens shader only with the pivot offset.
« Last Edit: 2015-09-12, 17:47:05 by jpjapers »

2015-09-12, 22:19:21
Reply #10

Alex Abarca

  • Active Users
  • **
  • Posts: 364
  • Corona Certified Instructor
    • View Profile
    • www.alexabarcaviz.wordpress.com
Rambambulli, the iphone is worst piece of crap ever. I chose it to give it a chance and to try to be cool. It limits you everywhere and it doesn't even have a foking back button. The VR Gallery app on android lets you browse your pictures on the phone (technically you can get your pano done by Corona render. But the dumb iphone can do that with the same app. WTH



Jpjapers, Corona Render exports panoramas quite well not complaints there. When something is well done there always more to be desired...a compliment!


I was just thinking of added functionality to dead clowns script that pushes the pano to Internet explorer. I thought that was genius! because usually our clients are not app savy and everyone in the world has IE, so kudos to deadclown on that.

Can the the pano be delivered with a VR cardboard player too. Something that enables to package your projects?

2015-09-14, 15:20:44
Reply #11

Jpjapers

  • Active Users
  • **
  • Posts: 1350
    • View Profile
Oh right i see. I completely forgot about deadclowns script. So you want something people can view on mobile in the cardboard but that doesnt rely on an app etc? Im pretty sure chrome users have overtaken IE users quite drastically and im sure theres plenty of chromeVR utilities for this purpose?
« Last Edit: 2015-09-14, 15:24:14 by jpjapers »

2015-09-16, 17:17:00
Reply #12

rfletchr

  • Active Users
  • **
  • Posts: 41
    • View Profile
Max's built in panorama exporter works great and it works on the google cardboard. All you need to do is render out 2 panoramas from 2 cameras on a rig of 2 cameras. i tried this out back in v0.7 and it worked then perfectly, i cant see why it wouldnt work now.

EDIT: My bad i now realise you want full stereo. Perhaps someone could so something similar to max's wraparound lens shader only with the pivot offset.

You dont need that tool at all, Corona has a modifier for the camera that lets you render panoramas really easily.
https://coronarenderer.freshdesk.com/support/solutions/articles/5000515644-how-to-make-panoramic-renders-in-corona-

2015-11-25, 21:37:10
Reply #13

rambambulli

  • Active Users
  • **
  • Posts: 160
    • View Profile
@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:

Code: [Select]
<!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>


 

2015-11-26, 12:53:47
Reply #14

johan belmans

  • Primary Certified Instructor
  • Active Users
  • ***
  • Posts: 728
    • View Profile
    • belly.be