Lights and Shadows in Vizor

In this third tutorial post, we’re going to look at lights and shadows. This is an area where Web-based VR needs some separate consideration to native apps because of the difficulty inherent in maintaining frame rates above 60fps as required for reasonable VR performance.

Lighting Overview

The most desirable lighting technique is probably global illumination (GI), as found in desktop class 3D applications, which provides for light and colour being reflected and refracted by all surfaces within a scene. This is not yet available in Vizor, and may not ever be, given the processor intensive nature of GI. But that is not to say you cannot approximate some of the effects that GI delivers.

There are two main paths to go down when using Vizor – baked or live lights. Baked lights mean lighting your scene in third party modelling software and bringing them in with light effects already rendered onto the objects, in which case you do not need lights in Vizor at all. You can see an example of this technique in one of illustrator Jeremy Edelblut's stylised low-poly scenes here. This can work well in many cases, but not if you plan to have moving lights – for example a rising sun or a moving object casting a realistic shadow. For this you will need need live lights & shadows.

Live Lights and Shadows in Vizor

Let's take a look at the lights available in Vizor.
We have Ambient, Directional, Hemisphere, Point and Spot. Of these, Directional and Hemisphere are the most efficient in terms of processing, so we recommend you use them for as much of your lighting as possible. Remember that if you do want shadows in your scene you do need to enable them on a per object basis, in the relevant Material patch set Cast shadows and Receive shadows to True.

Ambient Light is the simplest type of light, a directionless and shadowless light that lights all objects in the scene equally with the specified ambient light color and intensity.

Directional Lights produce light coming from a single uniform direction (mathematically, the light is of infinite size and coming from an infinite distance away). One point to watch out for is that the location of the light icon does not affect the scene lighting itself but it does affect the direction and size of the shadows cast. Directional Light supports shadows, though they are currently restricted to an area around the light source location in order to maintain reasonable frame rates.

Hemisphere Lights cast light from above and from below, and you can set the color of both of these can be set to emulate bounced light from the ground or the effect of light being reflected from the sky, if you're looking for realism. Otherwise, they can also be used to stylise your scenes with colour. Hemisphere lights alone do not cast shadows.

The default Vizor scene embedded above uses a combination of Directional and Hemisphere lights to achieve its look. As you can see from the image below showing the light setup for that scene, i've set the D-light intensity to about 75% and have a very slightly warm white. The Hemi light is bringing in yellows and oranges to warm up the scene.

Point Lights represents light coming from a single point and cast to all directions around the light source within the scene. Point Lights can cast shadows, however due to performance reasons shadow casting is switched off by default and are not really recommended due to their heavy processing cost. Use them only if you're not aiming for a scene destined for VR, because they will almost certainly bring your frame rate to a crawl.

Spot Lights are similar to Point Lights, but only cast light into one direction, in cone-like fashion.
Spot Lights can cast shadows but again they have a high performance cost, so please use them very sparingly.

Managing Performance

Generally, for best performance : quality ratio, it is recommended to use one directional light and either an Ambient Light or a Hemisphere Light to get a nice lighting effect with shadows.

It is not recommended to use Point Lights with shadow casting enabled as these cause major slowdowns to Vizor experience performance

Wrapup

Achieving a great quality lighting solution with realistic shadows can be tricky – it is easy to add too many lights, which can cause major performance problems while aiming for the perfect lighting setup.

Lighting is an area we're committed to improving at Vizor and over time it will become easier to achieve more realistic looks – or more experimental looks if that's your thing. Your feedback and ideas are always welcome! Join our public Slack or just give us a shout in the Vizor chat channel.