Raitch Posted May 24, 2017 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Nesh108 Posted May 24, 2017 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Raitch Posted May 24, 2017 Author Share Posted 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: Quote Link to comment Share on other sites More sharing options...
Nesh108 Posted May 24, 2017 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
aWeirdo Posted May 24, 2017 Share Posted 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". Quote Link to comment Share on other sites More sharing options...
Raitch Posted May 26, 2017 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Sebavan Posted May 26, 2017 Share Posted May 26, 2017 no easy way but you could use a reflection probe and generate your panomara from the rendered cube texture. Quote Link to comment Share on other sites More sharing options...
Raitch Posted May 28, 2017 Author Share Posted 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? Quote Link to comment Share on other sites More sharing options...
Raitch Posted June 7, 2017 Author Share Posted 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? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.