13 Best Practices for Building a 360 Tour on the Web

Getting started with building 360 tours on the web? This guide introduces you to some of the big picture dos and don’ts for crafting a clear, communicative, and engaging experience. For specifics regarding individual image creation, be sure to check out the tutorials at https://medium.com/updates-from-vizor

Click here to try the Vizor.io editor in action.

Pick a standard height and direction for all of your views. (Example shown in Rhino)

1. Correct eye height. Because of the sense of presence afforded by virtual reality, it can be jarring for someone to feel too short or too tall. But what height to pick? Well, anyone who is tall was once short, but anyone who is short has never been tall. 1.6m or 5’-3” is a good default if you plan on showing your panorama to many people. If only one person will be looking at the tour, you can make everything match their eye height (typically their head height minus 10cm or 4").

Use standard eye spacing for panoramic renders (Example shown in 3ds Max)

2. Correct eye spacing. If your software has any settings regarding Eye Distance or IPD ( interpupillary distance), it should be 6.5 cm or 2.56 inches.

Everything might look correct in a flat render, but in VR it becomes very clear if something is out of scale.

3. Correct scale. If the ceiling is too low or the chair is too large or everything is in meters when it should be in feet, you’re going to notice in VR. Double check that you’re using correctly-sized 3D objects and textures using real-world units.

There may be additional modeling/texturing/lighting work when going from a flat render to a 360 panorama.

4. Be considerate of the whole panorama. If you’re adapting a standard flat render into a 360 image, there’s a good chance the area behind you doesn’t yet have the same level of polish as what’s in front. Be sure to give everything the same level of sheen unless you’re intentionally establishing a hierarchy of visual cues to guide the viewer’s attention.

Motion blur, vignetting, and depth of field — don’t do it. Everything you see in VR should be crystal clear.

5. Turn off effects. If your rendering engine is set up to render vignetting, motion blur, or depth of field, turn it off. Anything other than a sharp, entirely in-focus panorama is likely to give your viewer a headache.

All Autodesk products have a Viewcube, useful for maintaining consistent orientation for all views.

6. Consistent direction. Render all views from the same direction, for example, north. That way, if you, for example, look down a hallway and jump to another location down the hallway, you’ll still be looking down the hall at the next location.

Where are the lights causing the falloff effect on the cabinets?

7. Light from lights. When possible, make lights come from actual sources. Except for the sun, when you’re immersed in an experience it can be even more distracting than usual if there’s light hitting a surface and there’s no clear origin for where that light is coming from.

Locations to jump to are clearly visible from this location.

8. Locations visible from other locations. When building a tour, distance your panorama locations accordingly, such that moving from one scene to another will feel natural. Ideally, you’ll be able to see something from your previous location at your current location, and from your current location, see something from the location you’re about to travel to.

Composite of 3 panoramic renders from the same location exploring design options.

9. Think beyond just tours. Moving around a space is great, but what about showing options all from the same panorama location? Would it be useful to toggle different times of day, different furniture options, or material choices?

In this pano, the Statue of Liberty is close enough that it’s distracting if it’s not 3D. The buildings in the distance are across the water and far enough away that they can be flat. (Model courtesy FX Fowle)

10. Pay attention to your bounds. Can we see out the window? Does it look okay as just a white wash, can a flat skyline suffice, or do you need some actual 3D geometry out there?

(L) Original render (R) After color correction

11. You can still use Photoshop. If everything is feeling a little too dark or off-color, you can still play with color correction, contrast, and exposure. Just don’t go too wild — remember if you render a stereo image with a left and right eye and you start smudging or clone-stamping an area that didn’t come out quite right, you’ll need to match your adjustments perfectly on both images while accounting for the slight shift in render location. Also note that while cubemaps are generally superior to equirectangular panoramas, cubemaps are more difficult to post-process due to their fractured nature.

(L) V-ray’s Quick Settings allow you to crank down quality for rapid iteration (R) Early 360 test rendered under a minute

12. Iterate quickly using draft render settings. A lot of the aforementioned problems can be perceived quickly even with a quick test render. For a typical 360 rendering, consider making everything the same material at first so you can focus on spatiality and lighting.

Simple equirectangular panos (L) emphasizing an interior design sketch (R) emphasizing a theater concept’s seat locations

13. Less is more. If photorealism is the goal, then do what you need to do. If you’re demonstrating a more particular goal, like a spatial study or design option, prefer to render flat or diagrammatically or as a sketch rather than draw attention to photorealistic materials that are actually placeholders. If something hasn’t been worked out yet, don’t show it. You’ll save time, and your viewers will be more likely to focus on what you want them to focus on.

Click here to try the Vizor.io editor in action.

Are you using Vizor? Check out this post for additional tips specific to the Vizor platform: