Generate complete 360 views in 16/9 scale

Raitch · May 24, 2017

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

Nesh108 · May 24, 2017

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

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

Raitch · May 24, 2017

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:

Nesh108 · May 24, 2017

I think the idea of 360 is to project the scene onto a sphere and place the player within it. For your goal, you probably need to open up (aka project) that sphere onto a plane afterwards.

aWeirdo · May 24, 2017

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".

Raitch · May 26, 2017

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.

Sebavan · May 26, 2017

no easy way but you could use a reflection probe and generate your panomara from the rendered cube texture.

Raitch · May 28, 2017

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?

Raitch · June 7, 2017

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?

Sign In

Generate complete 360 views in 16/9 scale

Recommended Posts

Raitch

Link to comment

Share on other sites

Nesh108

Link to comment

Share on other sites

Raitch

Link to comment

Share on other sites

Nesh108

Link to comment

Share on other sites

aWeirdo

Link to comment

Share on other sites

Raitch

Link to comment

Share on other sites

Sebavan

Link to comment

Share on other sites

Raitch

Link to comment

Share on other sites

Raitch

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity