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.
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").
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.
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.
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.
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.
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.
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.
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.
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?
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?
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.
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.
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: