360 degree 3d panoramic virtual tours aren’t new. I remember a period more than 10 years ago when we played with this a bit until it was put aside in favor of conquering photorealism. Now that we have defeated the latter, the former is back, riding the VR waves. Photorealism + Immersive Experience geared by the many headsets available today opens up the field once more and we must look beyond the curve for what’s ahead. Let’s start with the most basic of things, introduced by Robert Dukes from Brisbane based rdvisualization studio – A creation of a 360 degree 3d panoramic virtual tour… we will tackle how to get this working inside an Oculus Rift or Gear VR later on.
First, see this tour below – Full Screen.
There are many ways of creating these panoramas using 3dsMax and V-Ray. I will show the way I have found to best suit my workflow, processes and clients. This won’t be a guide on how to replicate exactly what I have created in these tours, as It would be long and time-consuming, but rather the overall process with details mainly on how the panoramas are created and put together so you can achieve the final result and understand the general workflow then expand on it.
3D Scene Setup
The scene, including the modeling, materials, lighting and rendering is nothing out of the ordinary. It was created from CAD drawings in 3ds Max to all the client’s specifications and materials were created to match designer materials and finishes schedules. Lighting was set up in V-Ray to give a nice overall mood and render settings were optimized for large image render of 5000px and over.
There is, however, something to keep in mind. When modeling, texturing and lighting the scene, it is important to test renders at all different angles, to ensure that when you are in the 360-degree panorama you have not set up your render for 1 specific angle/shot. Normally I create a camera and do a few high-resolution crop renders. It sounds trivial, but it’s not!
While in a V-Ray Physical Camera, use the walkthrough mode by clicking and dragging the viewport and spin the camera around and get an idea of the entire scene.
This makes sure that when the panorama is created you are happy with all of the angles and you’re ready to set up your panorama camera.
For your camera, make sure you use a V-Ray Physical Camera with the same settings as you have for your test renders, f-stop, ISO, shutter speed and color balance. Don’t worry about the field of view or focal length for now.
Place your camera at around eye level in the location you would want to be standing in the scene for the panorama. Using eye level will give a more realistic feel if people are viewing it through google cardboard or any other VR products. I am using a height of 1.6m for the average eye level of a human.
Make sure your camera is facing North, so in top view, facing towards the top of the viewport. This will give you a consistent way of matching multiple panoramas if you need to for larger tours. One setting you will need to turn off is camera vignetting, this will stop black shadows around the edge of your renders (remember, the 360 wraps around and darkened edges are your enemy).
Now that your camera is set up its time to change a couple of render settings.
First the image resolution. You need to render the image in an aspect ratio of 2:1 meaning the image is twice as wide as it is tall. I have found that anything over 5000px wide is fine for most situations, but you may want to go to 6000px or 8000px of you want to zoom in to see nice clean details etc.
Then you need to go into the camera settings in the V-Ray render tab and change your camera type to Spherical and override the FOV to 360 degrees.
With these settings, you are set on creating your spherical (equirectangular) panorama. There are other projections you can play with including cube map and dual camera setups for things like the Oculus, VR but they are more complicated than the process I am explaining now and we can get a similar, if not the same, result with these spherical (equirectangular) panoramas.
Now hit render and wait for it to complete. If the PC is unable to cope with the large image size required I sometimes use online rendering solutions or render out the panorama in strips and put them together in Photoshop.
Once your render is complete save it into your favourite format and bring it into Photoshop along with any render elements you might want to use.
Regarding post production, you really need to try and keep it to a minimum. It is very difficult to edit these images in post other than simple overall effects and layers, as they can cause seams in the panorama around the edges. If you do try to Photoshop things, try and keep it away from the edges of the rendered image, or use the offset filter to move the image edges to more desirable places, making editing easier.
The Before :
And After :
For panoramas, I am using Kolor’s Panotour Pro. It is more expensive than others, some are even free, but I’ve found it gives me and my clients the best possible features. Feel free to try out the software and see what you think for yourself with their free trial.
Making the Panotour
First open the Panotour software and you will arrive at the Home tab. Here is where you create new Panotour projects and open previous ones. Click on the ‘Create an empty Panotour project’ and it will take you to the next tab, Tour.
Here on the right hand side of the screen you can edit a lot of different things like Project name, description, change the font and colors and other parameters that you a free to play around with.
After that you are ready to load in your panorama images that were saved out of Photoshop. In the top left of the program, click the ‘add panorama’ button and then choose the panoramas you would like to load into your project.
Once loaded they will appear in the canvas area below where you can move them around and organise them into groups if needed.
Clicking on a single panorama will open its properties to the right and the hotspot editor below, this is where you can edit the individual panoramas settings, where they link to and what they do.
Once the panorama is selected you can change its parameters such as geo location, description, projection FOV, initial starting FOV and orientation, zooming limits, sounds, and more.
In the hotspot editor you can add in hotspots using the ‘Add point’ button and clicking on the panorama where you want the hotspot to appear.
Selecting the hotspot will open its individual parameters on the right of the screen where you can change what that hotspot does like linking to another panorama or displaying an image, video or website.
Once you have set up your panoramas you can further customise your project by going into the style tab.
Changing the Style
On the left you have the items that are currently in your project and on the right you a have different plugins you can add to your workspace. You can customise the look of the hotspot icons but clicking on the type of hotspot you would like to edit in the bottom left and then going through the parameters for the type of icon.
For instance, in the Dune Apartment panorama I have created, I used a number of plugins as you can see below. You can search for different plugins using the search bar at the top right in the Plugin Library tab. Once these were added I then changed any parameters and adjusted sizes and styles from the workspace menu section on the left to best suit my project.
To test any of these adjustments you will need to build the panotour which we will do in the next section.
Building the Panotour
Once you have set up your panorama how you want and you’re ready to build the final files or test your panotour, go to the Build tab. There isn’t much to change here, apart from the project filename and the location you wish to build it to along with ticking the ‘Export to PTV file’ option.
When you are ready press the big build button at the bottom of the screen and wait for the files to build.
This is how you can preview any changes you make to your tour and test out any settings you have tweaked in the previous steps (keep in mind, some features do not work when loading the panotour from your desktop, they need to be uploaded online or use the free Panotour viewer from the Kolor website).
The final files are in HTML5 format which works on most browsers and devices these days along with most online servers.
Now navigate to the folder where you built the panotour files, and you will see a .html file and a folder. You will also see a .ptv file that is used to load your project in the free panotour viewer mentioned earlier.
Inside the folder are all of the files used to handle the panorama along with some .xml files that can be edited for more custom features.
Double click the .html file or the .ptv file and your panotour project will load and you can view your work.
Opening the HTML file
Opening the PTV file in the free viewer (full functionality)
Opening the PTV file in the free viewer (full functionality)
Uploading to the web
To view the panotour online, you will need some online web hosting with FTP access, I personally use FileZilla to upload files as it is free and quite robust. Navigate to the folder you would like to upload the panotour to in your FTP client and then upload the .html file and the accompanying folder. Once it is done you can go to the web address of where the .html is uploaded and it will load in your browser (remember that these web address are case sensitive so when you type them in making sure to use the correct lower and upper case characters).
Opening the panotour through the web address bar at the uploaded location (full functionality)
If you are giving these files to a client to upload, then they all they will need to do is give it to their web developer. Once it is uploaded you can also embed the .html file into your own website using an iframe.
Opening on a WordPress page using an iframe plugin (full functionality – Some VR functions might not work on certain devices)
Adding to Facebook and YouTube
If you would like to add your panorama to Facebook or YouTube, you are much more limited functionality. At the moment you can only really move your view around and things like hotspots and interactive elements are not supported.
Adding to YouTube :
For YouTube, you use video editing software to create a ‘fake’ video. Load your panorama image into your favourite video editing package with a 2:1 project size and then make your image stretch over a couple of minutes time. Export it out as a common file type such as .mp4 using which ever codec you like best. When your video file is created all you need to do is add the 360 video meta data to the file itself. This can be done by downloading 360 meta data tool from the Google support page.
Follow the steps and save your video with the 360 meta data, and then you can upload it to YouTube through their upload systems. They will recognise that it is a panorama video because of the added meta data and automatically publish it as a 360 video which people can interact with.
Adding to Facebook :
Facebook now has support for 360 images. However, they only support panorama images taken from 360 degree cameras. What we need to do is add the 360 camera meta data to the rendered panorama and then upload it.
All you need to do is make sure your image is 2:1 aspect ratio. Then right click your image in windows and go into the properties. Then in the Details tab, add the camera ‘Camera maker’ and ‘Camera model’ fields to ‘RICOH’ and ‘RICOH THETA S’. This is just a common 360 camera brand but you can use any 360 camera make and model.
Press Apply or OK and then upload your image to Facebook as you would any other image. You can do this using any Exif meta data editor as well.
That’s all there is to it.
The best advice I can give is to make sure you learn and experiment as much as you can with the software to get the most out of its features and capabilities.
Thanks again to Ronen for publishing this on the blog. I’m very grateful for the opportunity to share some of my workflow with everyone and hope it is helpful in getting started in 360 degree 3D panoramic virtual tours.
After working for almost a decade in the real-time visualisation industry on some of Australia’s largest projects Robert is following his passion for 3D Architectural Rendering and Design.