Raitch

Generate complete 360 views in 16/9 scale

Recommended Posts

Have tried to search as much as I can and all I found was an unanswered question: https://stackoverflow.com/questions/41658398/how-to-take-a-360-panorama-image-in-babylonjs

Is there some easy way to have the camera display a 360 view in the canvas? The reason I'm asking is because I want to try make a canvas and stream it to Youtube 360 view. The closest thing I have found so far is making (a lot) och multi view cams pointed at every direction, but that sounds potentially laggy and not the best approach.

Cheers

Share this post


Link to post
Share on other sites

Hey @Raitch, cool idea streaming to Youtube360!

I found that when I cannot find solutions directly in Babylon, I simply have to find them in Three.js and then convert them (not always that complicated). Here is what I found that could put you on the right direction: http://www.emanueleferonato.com/2014/12/10/html5-webgl-360-degrees-panorama-viewer-with-three-js/.

It might not be the answer you hoped for but, sometimes, the only way is converting stuff yourself :D

If you do so, make sure to keep us updated!

Copying the code here for posterity:

<html>
	<head>
		<style>
			body{
				margin: 0;
			}
			canvas{
				width: 100%;
				height: 100%
			}
		</style>
		<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
		
	</head>
	<body>
		<script>
			
			var manualControl = false;
			var longitude = 0;
			var latitude = 0;
			var savedX;
			var savedY;
			var savedLongitude;
			var savedLatitude;
			
			// panoramas background
			var panoramasArray = ["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg"];
			var panoramaNumber = Math.floor(Math.random()*panoramasArray.length);
 
			// setting up the renderer
			renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);
			
			// creating a new scene
			var scene = new THREE.Scene();
			
			// adding a camera
			var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
			camera.target = new THREE.Vector3(0, 0, 0);
 
			// creation of a big sphere geometry
			var sphere = new THREE.SphereGeometry(100, 100, 40);
			sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
 
			// creation of the sphere material
			var sphereMaterial = new THREE.MeshBasicMaterial();
			sphereMaterial.map = THREE.ImageUtils.loadTexture(panoramasArray[panoramaNumber])
 
			// geometry + material = mesh (actual object)
			var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
			scene.add(sphereMesh);
 
			// listeners
			document.addEventListener("mousedown", onDocumentMouseDown, false);
			document.addEventListener("mousemove", onDocumentMouseMove, false);
			document.addEventListener("mouseup", onDocumentMouseUp, false);
				
               render();
               
               function render(){
				
				requestAnimationFrame(render);
				
				if(!manualControl){
					longitude += 0.1;
				}
 
				// limiting latitude from -85 to 85 (cannot point to the sky or under your feet)
                    latitude = Math.max(-85, Math.min(85, latitude));
 
				// moving the camera according to current latitude (vertical movement) and longitude (horizontal movement)
				camera.target.x = 500 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.cos(THREE.Math.degToRad(longitude));
				camera.target.y = 500 * Math.cos(THREE.Math.degToRad(90 - latitude));
				camera.target.z = 500 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.sin(THREE.Math.degToRad(longitude));
				camera.lookAt(camera.target);
 
				// calling again render function
				renderer.render(scene, camera);
				
			}
			
			// when the mouse is pressed, we switch to manual control and save current coordinates
			function onDocumentMouseDown(event){
 
				event.preventDefault();
 
				manualControl = true;
 
				savedX = event.clientX;
				savedY = event.clientY;
 
				savedLongitude = longitude;
				savedLatitude = latitude;
 
			}
 
			// when the mouse moves, if in manual contro we adjust coordinates
			function onDocumentMouseMove(event){
 
				if(manualControl){
					longitude = (savedX - event.clientX) * 0.1 + savedLongitude;
					latitude = (event.clientY - savedY) * 0.1 + savedLatitude;
				}
 
			}
 
			// when the mouse is released, we turn manual control off
			function onDocumentMouseUp(event){
 
				manualControl = false;
 
			}
			
			// pressing a key (actually releasing it) changes the texture map
			document.onkeyup = function(event){
			
				panoramaNumber = (panoramaNumber + 1) % panoramasArray.length
				sphereMaterial.map = THREE.ImageUtils.loadTexture(panoramasArray[panoramaNumber])
			
    			}
			
		</script>
	</body>
</html>

EDIT: Funnily, I found a similar thread on the forum which also suggested exactly what I just did: http://www.html5gamedevs.com/topic/15963-360-panoramic-picture-viewer/. What a coincidence :P 

 

Share this post


Link to post
Share on other sites

Thanks for the reply. However that's not what I'm after but the search result I'm getting regardless if I want it or not. I want the entire view to be generated at the same time, not the option to look around. Feels like something wonky would have to be made with the camera for my desired goal. 

This is basically what I'm after, but with Babylon view: 

 

Share this post


Link to post
Share on other sites

for 360 in babylon, funny enough,

all you need is a stationary camera & a skybox for 360*

video however, i'd attach the video material to a sphere instead, otherwise the same principle.

maybe some fancy UI control elements.

 

as for streaming to youtube, & / getting a panorama view from a single camera, no idea :)  i don't believe it's supported "natively".

Share this post


Link to post
Share on other sites

Are there any other phrases I could potentially search on? I can't possibly be the only one that has thought of this idea. 

I'm thinking it could be kinda possible with post processing effect, at least 4 cameras for different angles and maybe zoom back a bit to achieve it, but I'm still a bit sceptical about it.

Share this post


Link to post
Share on other sites

You mean to have the camera have a reflection object infront of it that might distort reflect the view for desired effect? I guess I would have to have at least 4 multi cams for that effect as well. Or did you have something else in mind?

Share this post


Link to post
Share on other sites

I found the example I was looking for now: https://stackoverflow.com/questions/38896297/how-to-get-2d-snapshot-like-panoramic-of-whole-3d-three-js-scene

Cool to know that it's possible at least :) now I will see if I can make it work in Babylon.

Looking in to it, they seem to create and scale a mesh with some shader material to achieve this: https://github.com/spite/THREE.CubemapToEquirectangular/blob/master/build/CubemapToEquirectangular.js

I haven't worked much with reflections etc, is there someone who could point me into the right direction?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.