Create a Shadow Effect

Learn how to create a shadow effect using the design canvas

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:
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’

Add 3D Models

  • Drag and drop the following 3D shapes on to the canvas:
  1. 1.
    Cube: Will act as the base for the sphere
  2. 2.
    Sphere: will act as the object under the ‘Spot Light’
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
Add Cube and 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.
The cube is defined by the line in 'Orange'.
Cube

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

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.
  • 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’
Spot Light
Add Spotlight

Add Spot Light 2

  • From the left panel of the design canvas, drag-and-drop the ‘Spot Light’ option from the miscellaneous section.
  • 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’
Shadow Effect

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)
Before Animation
Refer image below (After Animation)
After Animation
Shadow casting is dynamically updated to region in front of camera.