Create A Shadow Effect

Contents

• Introduction
• Scope
• Process for Applying Spot Light on a 3D Model
• Add 3D Models
• Apply Spot Light
• Shadow Effect with Animation

Introduction

This article provides an overview into the shadow effect that can be created using Blippbuilder

Scope

This document includes information on the following:

• Provides an insight into the process of applying ‘Spot Light’ on a 3D model to achieve a shadow effect
• Details of the steps to be followed to position the light to achieve shadows
• Example of a shadow effect

Process for Applying Spot Light on a 3D Model

Follow the steps below to apply ‘Spot light’ on a 3D model:

Note: Lighting is essential for achieving shadows and hence this is a pre-requisite for creating the shadow effect. You can choose any lighting to apply. In this article we would be using ‘Spot Light’ as an example to create a ‘Shadow’

• Login to the HUB
• Click on 'Create A WebAR Project' as shown in the image below:

• A pop-up will appear on the screening providing you with options to select the type of AR experience you wish to create. Choose a desired option from ‘Around the User’ or ‘on a printer marker’ as shown in image below:

• A pop-up will appear on the screen to provide a desired name for the Blipp.
• Enter a desired name for the Blipp.

Note: This will be your ‘Project Name’

• Click ‘Continue’
• You will be re-directed to the design canvas.

Step 1: Add 3D Models

• Drag and drop the following 3D shapes on to the canvas:

1. Cube: Will act as the base for the sphere
2. Sphere: will act as the object under the ‘Spot Light’

Note: In this example, a sphere will be used to achieve the shadow effect. The shadow will be casted on the cube which will act as the stage or base for the sphere

Cube

• Define the position and scale of the cube as follows:

Position:

x-axis	y-axis	z-axis
0.00	-1000.00	-915.35

 

Rotation:

x-axis	y-axis	z-axis
-90.00	0.00	0.00

 

Scale:

x-axis	y-axis	z-axis
100.00	100.00	1.00

 

• The following image provides an overview of the design canvas if the above settings of position, scale and rotation are defined for a cube. The cube now appears as a stage/base.
• On top of the cube, the sphere can be noticed.

Note: The cube is defined by the line in 'Orange' as shown in image below:

Sphere

• Define the position and scale of the sphere as follows:

Position:

x-axis	y-axis	z-axis
2000.00	-500.00	-4000.00

 

Rotation:

x-axis	y-axis	z-axis
-90.00	0.00	0.00

 

Scale:

x-axis	y-axis	z-axis
5.00	5.00	5.00

• Now the 3D models are ready for lighting

Step 2: Apply ‘Spot Light’

Application of lighting is necessary to create shadows. For this example, we would be using ‘Spot Light’ over the 3D model of a sphere to create the shadow effect.

Follow the steps below to apply ‘Spot Light’ on the 3D model of a ‘Sphere’:

Note: we would be using two ‘Spot Lights’ to achieve the shadow effect.

Add Spot Light 1

• From the left panel of the design canvas, drag-and-drop the ‘Spot Light’ option from the miscellaneous section as shown in the image below:

• Define the position, scale and rotation of the ‘Spot Light’ as mentioned below:

Position:

x-axis	y-axis	z-axis
-2000.00	2000.00	-4000.00

 

Rotation:

x-axis	y-axis	z-axis
-90.00	0.00	0.00

 

Scale:

x-axis	y-axis	z-axis
5.00	5.00	5.00

            

• From the right panel of the design canvas, define the color of the ‘Spot Light’ to blue. You can find this option under the ‘Basic Properties’

Refer images below:

Add Spot Light 2

• From the left panel of the design canvas, drag-and-drop the ‘Spot Light’ option from the miscellaneous section as shown in the image below:
• Define the position, scale and rotation of the ‘Spot Light’ as mentioned below:

Position:

x-axis	y-axis	z-axis
2000.00	2000.00	-4000.00

 

Rotation:

x-axis	y-axis	z-axis
-90.00	0.00	0.00

 

Scale:

x-axis	y-axis	z-axis
5.00	5.00	5.00

            

• From the right panel of the design canvas, define the color of the ‘Spot Light’ to pink. You can find this option under the ‘Basic Properties’

Refer image below to see the ‘Shadow Effect’

Shadow Effect with Animation

The shadow effect can be seen as a ‘Black Shadow’ under the pink sphere.

If motion effects of ‘Rotation’ is applied on to the ‘Spot Lights’ the Shadow effect can be visually more appealing.

Example:

Refer image below (Before Animation)

Refer image below (After Animation)

Note: Shadow casting is dynamically updated to region in front of camera

 

 

 

 

Export Selection                                                                                                                    WebAR FAQs