what is VR and what content we need to create 360 virtual tours for web users
360 panoramic tour (VR) is basically a set of pre-rendered stereoscopic images, gathered together by a panoramic viewer. The viewer itself is a piece of software that runs on a web browser and can interact with the gyro sensor on mobile devices and detect rotation.
To create full VR experience both head rotation and head translation should be considered. In that case a full 3D scene is needed to generate a real-time environment. However, if the only goal is to enable a user to look around, rotation is all that is needed. This could be accomplished by providing two spherical images (one for each eye) to the headset. Real-time is unnecessary for this application, and pre-rendered material could be used. The described method in this article uses V-Ray for 3ds Max and krpano viewer. Krpano works both with spherical and cube maps and allows navigation between the scenes via hotspots or navigation bar.
This section will explain how to render a 6x1 cube map and prepare it for krpano.
WHAT IS CUBE MAP?
Cube maps are very efficient at representing 360 degree images. Cube maps are projections of the surrounding environment on the inner surfaces of a virtual cube. The six square images are then aligned side by side into a single, 6:1 aspect image. Cube maps have less distortion than latlong images since each of the six images appear as a 90 degree FOV image, with one square facing in each direction.
The drawback with cube maps is that each edge of the cube represents a seam - 12 in all. This edges may show-up if there are compression artifacts, such as with the popular video codec H264. For cube maps it is recommended to turn off the filtering in V-ray and edit only uncompressed content. One thing to consider when editing a cube map strip in Photoshop is to avoid excessive editing on the seams. This can be achieved by masking the edges from edits like sharpening, lens flares, glows and blurs.
For render settings please refer to Guide to VR, written by the team of Chaos Group. It is an extremely comprehensive and easy to follow step-by-step guide which you can download from the link below:
A stereoscopic image consists of two slightly shifted perspectives for each eye. To generate a stereoscopic image in V-Ray you should have an enabled stereoscopic helper in the scene. The eye distance should be 6.5 cm, the focus method should be left at none and the interocular method should be set at shift both.
As an output layout you can choose between side-by-side or top-bottom. At the image example above a side-by-side layout is applied. Top-Bottom layout is used to generate stereoscopic videos with spherical panorama.
KR PANO INPUT
The V-Ray stereoscopic output shown at the images above consists of 12 squares lined in a strip. The first six are for the left eye perspective, the last 6 are for the right eye. Notice that all sides of the cubes are mirrored.
Krpano could not recognise the cube map output layout of V-Ray. The web based viewer works with separate images for each side of the cube. Each image should be named with a particular suffix, defining the orientation (B = Back; D = Down; F = Front; L = Left; R = Right; U = Up). Left and right perspectives should be organised in different folders.
The image above explains the transformation from V-Ray cube map layout to separate images for each side of the cube. Each square should be cropped, flipped, named with a corresponding suffix and saved as a separate file either in a folder for the left or for the right eye.
This can be achieved in Photoshop by using a script created by our developer Dimitar Stoichev and accessible for free download at the link below:
This section will cover the topic about building a stereoscopic scene with background from 2D image.
Recreating the background:
Creating an environment from existing photography for stereoscopic VR isn’t as simple as placing a colour matched background image in a still render. A 2D backdrop will ruin the stereoscopic illusion except it is really far away from the viewing point. Recreating existing surroundings consists of building simple geometry on which extracted textures from photographies are projected. This can be achieved by unwrapping basic block models and slice the existing photos to fill-in the unwrapped canvas. When glass texture is taken from photography it can be blended with reflective material to achieve more believable matching to the CG scene.
For far backgrounds it is possible to use background image mapped on a sphere. For closer environment it is important to have different projecting planes or basic models in order to achieve parallax effect - vital for the stereoscopic illusion. The parallax effect causes objects closer to the camera to move more than objects further away. The closer the object, the bigger the need of detailed modelling. To use multiple planes for different depth layers of the background you should prepare images with good alpha channels. Divide the image to at least 3 layers - foreground, midground and background an decide how to treat each area
360 PANORAMA FOR BACKGROUND
This is the original 360 panorama, taken from the approximate position of the planned VR camera. The most important parameters to match from the photography are the camera height, which in that case is a typical eye-level shot of 1.6m above the ground, and the lighting direction. From this image we will keep the buildings in the far background and recreate the midground (marked in red) with unwrapped block models. In 3DS Max this image is mapped on a sphere, which is aligned to the camera.
In most cases parts of the buildings in the background image will show behind the block models, which means that we have to clean these areas from the original photography. We have replaced the sky with a different one from another 360 image and erased some of the buildings that don’t match our models. Also we have filled-in the footbridge area with water texture because we are going to use models for this side of the river bank. The paving will be completly substituted by our render so there is no need of editing this part of the image.
BACKGROUND TO MODEL MATCHING
Here you can see in colors which parts of the image are 3D models. The footbridge marked in red is the most problematic point of transition between model and image. The matching is achieved by distorting the bridge geometry in 3DS Max with the path deform tool and looks correct only through this camera. 3D objects that goes full depth in the scene from foreground to distant background enhance the stereoscopic experience when viewed via headset.
Krpano is a software with limited graphic user interface (GUI). The main functionality is accessed via .bat files.A batch file is a kind of script in DOS and Microsoft Windows. It consists of a sreries of commands to be executed by the command-line interpreter, stored in a plain text file.
The next step after converting the cube map to separate files is to drag the files onto the batch with the desired functionality. In our case we are going to create a normal virtual tour. This script will create a ready-to-upload file structure containing the images, tour.html main page, xml files and the code for the krpano player with several plugins.
A new window will appear showing that the batch is running. You can read more about batch files and how to use the comand line of you operating system. Some of the features of krpano are only accessible through the command line.
After finishing you will have the following file structure created in the source file folder.If you upload these files in a website and rename tour.html to index.html you will have your panorama ready to explore. However there are some settings to be edited in order to have stereoscopic image. First of all we should enter the panos folder and create separate folders for left and right perspectives.
Now we have to edit the tour.xml file so the krpano player knows that the uploaded images are part of a stereoscopic scene. Find the image tag in the tour.xml file and change it folowing the example to the right.
The main file containing settings for the krpano viewer is tour.xml shown on the
right. You can learn more about xml by following the links bellow:
The root element of the xml file needs to be the <krpano> element. All other elements must be placed inside this element.
The <include url=”” /> tag is a way to incorporate code from external files
The <skin_setting> tag contains some of the skin properties which can be changed here or externaly by editing vtourskin.xml.
The <action> contains action scripts and has various applications.
When creating virtual tour with many scenes inside, each scene is described by a separate <scene> tag with unique name and with path leading to the corresponding folder in the krpano file structure.
In each <scene> tag there is a <view> tag defining the initial lookat angles (hlookat=”0.0” for horizontal angle and vlookat=”0.0” for vertical angle), the field of view (fov=”120” ) and the scope of the zoom users can perform (fovmin and fovmax).
The <image> tag defines the type of view and the path to the images. Some of its attributes are stereo=”” and stereolabels=”|” which define weather a given image is stereoscopic or not and what are the suffixes of the destination folders, corresponding to each eye.
The <preview url=”” /> tag defines the image which will show in the navigation bar of the krpano viewer.