# Create a Shadow Effect

{% content-ref url="<https://app.gitbook.com/o/QMsd5hT6sxA9FBIB03yh/s/3UKy7VHRJWrNarYaMp13/>" %}
[Blippar Documentation Centre](https://app.gitbook.com/o/QMsd5hT6sxA9FBIB03yh/s/3UKy7VHRJWrNarYaMp13/)
{% endcontent-ref %}

## Introduction <a href="#h_01fzzezsjmxr2aycgxdm4emxta" id="h_01fzzezsjmxr2aycgxdm4emxta"></a>

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

## Scope <a href="#h_01fzzf00s4qy29xwrdnccsyph5" id="h_01fzzf00s4qy29xwrdnccsyph5"></a>

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 <a href="#h_01fzzf08hqymsgxbkk7g5y5qwx" id="h_01fzzf08hqymsgxbkk7g5y5qwx"></a>

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

{% hint style="info" %}
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’**
{% endhint %}

## Add 3D Models <a href="#h_01fzzf0dcdcsrf4xf2rbkdrnj7" id="h_01fzzf0dcdcsrf4xf2rbkdrnj7"></a>

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

{% hint style="info" %}
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
{% endhint %}

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2FlPgvXC90y1n8sRLINu0w%2FScreenshot%202023-04-04%20at%206.46.16%20PM.png?alt=media&#x26;token=5a1a2074-47c3-4c35-bf4c-dfdc34ed277c" alt=""><figcaption><p>Add Cube and Sphere</p></figcaption></figure>

## Cube

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

**Position:**

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

&#x20;

**Rotation:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| -90.00     | 0.00       | 0.00       |

&#x20;

**Scale:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| 100.00     | 100.00     | 1.00       |

&#x20;

* 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.

{% hint style="info" %}
The cube is defined by the line in 'Orange'.
{% endhint %}

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2FVOzwxgHmTebbeptdkh38%2FScreenshot%202023-04-04%20at%206.47.55%20PM.png?alt=media&#x26;token=61b36aaf-625b-46a8-b564-31782118d19f" alt=""><figcaption><p>Cube</p></figcaption></figure>

## Sphere

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

**Position:**

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

&#x20;

**Rotation:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| -90.00     | 0.00       | 0.00       |

&#x20;

**Scale:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| 5.00       | 5.00       | 5.00       |

* Now the 3D models are ready for lighting

## Apply ‘Spot Light’ <a href="#h_01fzzf0kw2txcffq62nr0h5sax" id="h_01fzzf0kw2txcffq62nr0h5sax"></a>

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   |

&#x20;

**Rotation:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| -90.00     | 0.00       | 0.00       |

&#x20;

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

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2F5z546WsXGeKtfhYDGUcm%2FScreenshot%202023-04-04%20at%206.50.04%20PM.png?alt=media&#x26;token=30c5e873-c889-4e4b-8626-a10b917d5a24" alt=""><figcaption><p>Spot Light</p></figcaption></figure>

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2FGfnE2tLcXsKl7cAqlpQ7%2FScreenshot%202023-04-04%20at%206.50.58%20PM.png?alt=media&#x26;token=90aab515-1a24-4ae5-84c6-013962175611" alt=""><figcaption><p>Add Spotlight</p></figcaption></figure>

## 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   |

&#x20;

**Rotation:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| -90.00     | 0.00       | 0.00       |

&#x20;

**Scale:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| 5.00       | 5.00       | 5.00       |

&#x20;          &#x20;

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

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2F1HqaFMY6a6mhP4ZM8E3u%2FScreenshot%202023-04-04%20at%206.53.26%20PM.png?alt=media&#x26;token=566ea40c-4ef8-41ed-a5fa-c6b50ec50835" alt=""><figcaption><p>Shadow Effect</p></figcaption></figure>

## Animation <a href="#h_01fzzf0vcng7pf32s0265jt2pa" id="h_01fzzf0vcng7pf32s0265jt2pa"></a>

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)

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2FsZr0ahZfclLstD54ra6k%2FScreenshot%202023-04-04%20at%206.54.29%20PM.png?alt=media&#x26;token=b2268aba-9fb1-43c6-8db8-9a03f8ad71bc" alt=""><figcaption><p>Before Animation</p></figcaption></figure>

Refer image below (After Animation)

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2FGNSCKqjy2p9zWo0f2Eqp%2FScreenshot%202023-04-04%20at%206.54.46%20PM.png?alt=media&#x26;token=3816f29f-7a70-4af4-9f27-8befcc69bafd" alt=""><figcaption><p>After Animation</p></figcaption></figure>

{% hint style="info" %}
Shadow casting is dynamically updated to region in front of camera.
{% endhint %}
