Light Sources and HDR Maps
Light plays a crucial role in defining the look and feel of your MyWebAR scene. It can illuminate your 3D object, cast shadows, and create a sense of depth and realism. This guide will explain the different light sources available in MyWebAR and how to use them effectively.
In this guide we'll explore the five light sources that you can use in your experiences.
In this guide we'll explore the five light sources that you can use in your experiences.
Types of Light Sources
Directional Light: This type of light simulates a distant light source, like the sun. It casts parallel rays that create strong shadows and a defined light direction. Directional lights are well-suited for creating dramatic lighting effects or mimicking outdoor environments.
Ambient Light: This light source fills the entire scene with a uniform glow, creating a soft, shadowless effect. Ambient light is useful for creating a basic level of illumination or for supplementing other light sources.
Point Light: Imagine a light bulb - that's the essence of a point light. It emits light in all directions from a single point in space, casting soft shadows that diminish with distance. Point lights are great for simulating lamps, spotlights, or other localized light sources.
Spot Light: This targeted light source concentrates its rays into a cone shape, illuminating a specific area. Spotlights are perfect for highlighting objects of interest, creating dramatic effects, or simulating car headlights. You can adjust the cone's angle, distance, penumbra and decay to achieve the desired focus.
Hemisphere Light: This unique light source simulates natural sky and ground lighting. It casts soft light from above (like the sky) and below (like the ground), creating a diffused, ambient illumination. Hemisphere lights are perfect for creating indoor scenes with soft shadows or for adding a base level of lighting to complement other light sources. They don't cast strong shadows themselves.
Adding and Customizing Light Sources
Now that you've learned about the five light source options, let's explore how to use them in your MyWebAR scenes.
When you create a new MyWebAR experience the scene already includes two default light sources - one directional light and one ambient light. This configuration works best for most experiences, but you can remove these light sources start from scratch or add additional light sources to the default preset.
To add a new light source to the scene of your experienceind the Light Sources type in the Objects panel on the left side of the editor and click on the plus button next to it to open light source selection panel.
When you create a new MyWebAR experience the scene already includes two default light sources - one directional light and one ambient light. This configuration works best for most experiences, but you can remove these light sources start from scratch or add additional light sources to the default preset.
To add a new light source to the scene of your experienceind the Light Sources type in the Objects panel on the left side of the editor and click on the plus button next to it to open light source selection panel.
Positioning and Directing Lights:
- Drag the arrows in the viewport or use the position coordinates in the object inspector to translate (move) the light source.
- For directional lights, rotate them using the rotation gizmo or by modifying their rotation values to adjust the direction of the light rays.
- Point lights, spotlights, and area lights often have additional properties like cone angles or sizes that you can modify to control their light emission patterns.
Each light source has its own properties that you can adjust to achieve the desired lighting effect. These properties include:
- Color: Change the color of the light to create various moods and atmospheres.
- Intensity: Control the strength of the light source. Higher intensity creates brighter light.
Pro Tips for Lighting Success
- Combine different light sources to achieve natural-looking lighting. Play around with their positions and properties to see how they affect your scene.
- Use multiple light sources to cast shadows from various directions, adding depth to your scene.
- Experiment with light colors to create specific moods or atmospheres.
HDR Maps
HDR maps are essentially panoramic images that capture a wide range of light information, including highlights and shadows. This allows MyWebAR to simulate how light would bounce off surfaces in the real world, creating a more immersive and believable AR experience.
Compare the way the same 3D model appears when using standard light sources (on the left) vs using an HDR map (on the right):
Compare the way the same 3D model appears when using standard light sources (on the left) vs using an HDR map (on the right):
As you can see metal and glass surfaces have more realistic reflections on them. To achieve the best results, choose an HDR map that reflects the environment where viewers will encounter your creation.
For instance, if you're designing a coffeemaker preview, most people will likely see it in a kitchen setting. So, using an HDR map depicting a typical kitchen environment would be ideal. This will provide natural-looking reflections that match the expected viewing context.
For instance, if you're designing a coffeemaker preview, most people will likely see it in a kitchen setting. So, using an HDR map depicting a typical kitchen environment would be ideal. This will provide natural-looking reflections that match the expected viewing context.
You can head over to Poly Haven to explore their collection and find the perfect HDR map for your project's environment. With categories ranging from outdoor landscapes and cityscapes to cozy interiors and studio setups, you're sure to find the ideal match.
In the MyWebAR editor, locate the navigation panel on the left side of your screen. Click on the Settings button.
Navigate to the Advanced Settings block and locate the HDR Maps section. Click on the Upload button and select the HDR image file you want to use (ensure it's a valid .hdr file format).
Once you've chosen your file, click the Save button at the bottom of the window to confirm your changes.
Once you've chosen your file, click the Save button at the bottom of the window to confirm your changes.
Your scene should now be illuminated with the HDR map.
Combining an HDR map with standard light sources can lead to an unrealistic and overexposed look. To achieve a more natural appearance, consider removing standard lights in your scene while using the HDR map.
Related articles
Photo and Video Capture Mode
Learn more about camera mode allowing users to shoot photos and videos with your AR content
Remove Background from a Video
Remove a solid color background from your videos using the built-in color keyer
Supported Devices and Web Browsers
Learn about the devices, operating systems and web browsers that can run MyWebAR experiences