From 360 Spherical Panorama to 3D. Walkabout Worldsx32Studios
We spent the better part of 2016 trying to convince everyone we knew here at 32Studios that VR was the future. As we have been relentlessly on the lookout for ways to improve the quality of our VR scenes while maintaining a low memory footprint and a reasonably quick workflow, we have undertaken the painful task of experiment with every technique we could afford to try to bring you this article today. This is a method of making full 3D VR scenes by taking 360 Panoramas and turning them into 3D rooms with the help of this software sent to me by WalkAboutWorlds. All I can say is this software was made for VR. It creates environments so immersive, and at such a quick turn around time, its only a matter of time before this type of website navigation becomes the de-facto standard for business taking full advantage of these new technologies at their disposal.
We gathered data by either a (onsite location shooting with a ricoh theta) or b (floor plans bought from a third party).
You can also c(render a scene in Sketchup or 3DS Max and use VRay to make floor plan for a virtual walkthrough. Export the panoramas
and get them ready for the walkabout worlds software suite. Another important tidbit is this method only works on indoor panorama scenes. This is not something you want to use for outdoor reconstruction. (Another software handles that)
Before attempting something like this, we recommend you doing the basic tutorial that comes with the software. make at least one scene to get the basics before attempting a full walk-through like this. It will speed up your development time drastically if you took the time to learn how the software works. Now that you got your floor-plan and panoramas, you will need to start modeling each panorama and saving them individually. I will detail the process here. One important feature is the manual alignment. If your camera doesn’t have alignment info, you will have to manually orient it. This process is very important. Poor alignment will lead to poor inconsistent results so pay attention to this step. Then you can make the workflow anyway you want. Since I don’t have any overlapping panoramas, I don’t need the walkabout editor for now. That feature is crucial if you have overlapping panoramas of the same room so know the advantages of each tool in this software suite.
Make sure to select none and pick one picture to panomodel. I just did them one by one for the 9 Pictures (nine frames, that I have). First thing you do with Panomodeller is to draw the walls using the vertical alignment tool. I decided to go ahead and use the walkabout editor to model here. It has panomodeller included and it has more options when it comes to alignment so I switched over to that after doing the basic wall contructions. Below, I will highlight several helpful tools that will speed up your development. You can use panomodeller and achieve the same thing but this method of doing it will be a lot faster and save you a lot of headaches. Let’s proceed
The walkabout editor is the main way to create multiple room 3D walkthrough from 360 spherical panoramas. Each picture in your file becomes a 3D model. I find it easier to model one room then another. You can do all of them simultaneously if you have panoramas that overlap.
From here on now, I am safely assuming that you decided to work on one model at a time to reduce complexity and keep the process moving. I have another hint. TO save you hours of frustration that I experienced, Here’s a hint. As soon as you hit panomodeler, Make sure to CTRL + CLICK to drop a line in the screen. Make sure the object with you just created is still under WALLS. If you don’t do this, your models will have issues when you generate them and you will be banging your head against the wall trying to figure out why.
The basic workflow for 1 panorama to model a single room is to launch the walkabout worlds program suite, and then align the pictures. After alignment, you want to to open up panomodeller to make a 3D model from a 360 panorama. (See 360 Panoramas are useful, matter fact they are the backbone of the new Internet). Then from then, follow the tutorial and make walls for you new model. After checking model mode when you are done building your walls, you should have a model you can walk through. Make sure to use the SHIFT button to adjust the height of the room. Right now it only works for square roofs. I think the software will have more complex room options at a later update. When you are done building the walls. Go ahead and save the file then start building the furniture.
The steps for building furniture is straightfoward. After making walls, furniture adds depth to your room. They are basically rectangles covering the furniture area in the picture. This is cool for adding beds, couches, chains to your scene that look consistent. The program has a special way of only texturing the the furniture and removing it from the scene which gives it a more realistic look if you do it right. Once you build one piece of furniture, you can build them all. Repeat the steps as many times as you have objects in all your 360 panoramas.
This project involves multiple panoramas all making a floor plan. If you are making a single model, you should be able to export it to wherever you are using it after generating it. To make a floorplan, you just repeat the same steps for how ever many panoramas you have. I decided to go ahead to do each room in my Condominium floorplan before I edited them to view on the web. I used this library called A-Frame (For quick development of Web 3D/VR expriences ). After I exported all my completed models in A-Frame, I went ahead and used the inspector to reorganize and arrange the floorplan.
This floorplan is ready for export but there’s seems to be an issue. In this native state, the website weighs around 100MB+ which is way out the range for a smooth web experience. This is not even feasible for mobile phones and computers struggle with websites this big so we had to find a way to reduce this size. Since most of the memory is stored in the .PNG texture file, it would make sense to reduce that. This is also godsent because of the low amount of 3D data, rendering the shapes is blazingly fast which is a huge PERK. I went ahead and decide to compress the PNG. By grabbing a program that makes that work, you can optimize these PNG’s without loosing resolution. I eventually opted out of this method because of the time and memory it takes. The average PNG outputted for this project is around 11MB. I don’t think it’s an issue because I find it better to export it as high quality then reduce the size of the of the PNG file keeping both high resolution and low memory footprint. My technique for optimizing the PNG’s is to manually use photoshop. In photoshop, under Image > Adjust > Posterize
and set the level to 15 then enter and save. Your files will go from ~11MB to ~3MB which is MUCH MUCH MUCH better to work with.
Another tip is to preload the assets you are using so that the webpage can load it up a lot faster. The preload and prefetch commands for Firefox and Chrome + Other Web browsers are:
link rel="preload" as="image" href="*IMAGE HERE" />
link rel="prefetch" href="*IMAGE HERE" />
preloading and prefetching works on any image link on the Internet. You can preload more assets but for the sake of this tutorial, I will stick with images for now. With this method, I managed to load this website in less than 1 minute on Google Chrome. This is truly a remarkable feat. So with that said, make sure to check out this website by clicking any of the pictures in this post
If you got to the bottom of this, you serve to click the enter button. Use W A S D to walk around and follow the room with openings. One room has a door because I was experimenting with close door rooms. See if you can find it. But yes, this is a full fledge apartment. Obvious things you can do with it is add real 3D furniture, and other 3D objects you want to add. You can animate the TV’s add content to them. I can make links to couches in the scenes and how much they cost. This is a true walkabout world, the pinnacle of the visual experience in a computer or a web browser as a matter of fact. This is AWESOME!! Thanks to the WalkAboutEditor developers for such as amazing forthsight system. I do see this being the de-facto way website navigation is done for many utility and business websites to facilitate how their customers access and use their products. I see entertainment websites picking this up to offer people virtual tours of celebrity houses or movie sets. I see medical industries picking this up to allow people a way to access the medical facilities 24/7 and essentially digitally stand in line. I see local neighborhood mom and pop shop business picking this up to give a chance for people to browse and shop with them online. Environmental modeling in 3D from 360 Panoramic photography is the best workflow I have discovered so far that can bring these dreams to life. All the websites made by me also work with VR headsets like the Google Cardboard straight out the box. This makes sure you can pick up the VR headsets and never put it down. Advertisers and markets, business owners and businesses have all new technology and tools to engage with a tech savvy customer base such as millennials. These are tools that can empower a millenial driven economy and in the right sense, it seems to be moving that way. Thank you so much for reading such an engaging article and please contact me via email or comment if you like anything you saw and you want to include it in your projects and business ventures. Thank you and without further ado, press ENTER to enter the 3D world of Panoramic Photography. An advent to the future of digital marketing!