
# Getting Started - Day to Night

## Day to Night
One useful way to add a graphical user interface to a scene is the Babylon.js GUI. When working in virtual reality, this GUI is necessary because it is designed to be within, and part of, the Babylon.js scene canvas rather than the HTML document. This GUI is pre-loaded into the playground, but in your own projects it requires an additional script:

<Alert severity="warning" title="Warning" description="The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN."/>

```html
<script>https://cdn.babylonjs.com/gui/babylon.gui.min.js</script>
```
For the village world, we will use a GUI stack panel to contain two GUI elements: a text block for the heading and a slider bar to change day to night and back by setting the intensity of the light.

The first thing we need to do is create a special texture, called an *AdvancedDynamicTexture*, on which the GUI elements will be drawn.

```javascript
const adt = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
```

For our world, the GUI will be full-screen.

We create the container panel to hold the other elements in the bottom right corner of the screen. Then add it to the advanced dynamic texture.

```javascript
const panel = new BABYLON.GUI.StackPanel();
panel.width = "220px";
panel.top = "-50px";
panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
adt.addControl(panel);
```

Next, create the text block and add it to the panel.
```javascript
const header = new BABYLON.GUI.TextBlock();
header.text = "Night to Day";
header.height = "30px";
header.color = "white";
panel.addControl(header); 
```

We create and add the slider to the panel.
```javascript
const slider = new BABYLON.GUI.Slider();
slider.minimum = 0;
slider.maximum = 1;
slider.borderColor = "black";
slider.color = "#AAAAAA";
slider.background = "#white";
slider.value = 1;
slider.height = "20px";
slider.width = "200px";
panel.addControl(slider);
```

We need to add an observable event to the slider in order to change the light intensity.
```javascript
slider.onValueChangedObservable.add((value) => {
    if (light) {
        light.intensity = value;
    }
});
```

Now we can control the light in our village world.

<Playground id="#KBS9I5#95" title="Adding a Gui Slider" description="Add a gui slider that controls the lighting in the village." image="/img/playgroundsAndNMEs/gettingStartedGUI1.webp"/>

Where there is light there are shadows. In Babylon.js this is only true when you make it true.


# Getting Started - Working With Code

## Street Lights
So far we have just used the hemispheric light for all the scenes. There are a range of lights, but for the moment the only new one we will introduce is the spot light. This can be positioned anywhere and given a direction in which to shine. The spread of the light is given by an angle in radians: the larger the angle, the wider the spread. The final parameter indicates how fast the light will fall away; the larger the number, the shorter the distance the light will shine. The spot light can be given a color.

```javascript
const lampLight = new BABYLON.SpotLight("name", position, direction, angle_of_spread, speed_of_disipation);
lampLight.diffuse = BABYLON.Color3.Yellow();
```
We will add a spot light to a street lamp. In order to create a lamp post we introduce another way of creating a mesh by extruding a shape along a path.

We create the shape outline to extrude with a sequence of Vector3s, using points in the x, y plane only.
```javascript
const lampShape = [];
    for(let i = 0; i < 20; i++) {
        lampShape.push(new BABYLON.Vector3(Math.cos(i * Math.PI / 10), Math.sin(i * Math.PI / 10), 0));
    }
lampShape.push(lampShape[0]); //close shape
```

We then set a path for the extrusion, again using Vector3s. The path does not have to be restricted to the x, y plane; it can be described using the full 3D space.
```javascript
const lampPath = [];
lampPath.push(new BABYLON.Vector3(0, 0, 0));
lampPath.push(new BABYLON.Vector3(0, 10, 0));
for(let i = 0; i < 20; i++) {
    lampPath.push(new BABYLON.Vector3(1 + Math.cos(Math.PI - i * Math.PI / 40), 10 + Math.sin(Math.PI - i * Math.PI / 40), 0));
}
lampPath.push(new BABYLON.Vector3(3, 11, 0));
```

We then form the extrusion.
```javascript
const lamp = BABYLON.MeshBuilder.ExtrudeShape("lamp", {cap: BABYLON.Mesh.CAP_END, shape: lampShape, path: lampPath, scale: 0.5}); 
```

To make the lamp light more visible, we turn down the intensity of the hemispheric light.

```javascript
light.intensity = 0.5;
```

<Playground id="#4G38H4#6" title="Create a Street Light" description="Create a basic streetlight shape and attach a spotlight." image="/img/playgroundsAndNMEs/gettingStartedStreetLights1.webp"/>

We export the lamp at an appropriate size to use it in the village. As we need more than one street light, once the lamp is loaded we will clone it several times. For each street light we will add the lamp light. Lights are normally restricted to four in any scene. If there are more, only the last 4 created are active. To extend the number of lights used, we set the number needed on any material to be lit.

```javascript
material.maxSimultaneousLights = 5;
```

<Playground id="#KBS9I5#39688" title="Add Street Lights" description="Add street lights to the village and adjust the lighting." image="/img/playgroundsAndNMEs/gettingStartedStreetLights2.webp"/>

It would be good if we could fade daylight into night and vice versa. We can when we add the Babylon.js GUI.



# Getting Started - Adding Shadows

## Adding Shadows
The light we have been using so far, the *HemisphericLight*, gives an ambient background light and is not suitable for producing shadows. We could use the lamp spot lights; however, the shadows they produce can be faint, so we will introduce a directional light.

```javascript
const  light = new BABYLON.DirectionalLight("dir", direction, scene);
```
As usual, the direction is a Vector3 and the scene parameter is optional.

Setting its position will affect the direction and length of any created shadows.

```javascript
light.position = new BABYLON.Vector3(0, 15, -30);
```

Shadows will appear only when a *ShadowGenerator* object is created, a mesh is set to cast the shadow, and the mesh receiving the shadow is set to receive shadows. 

```javascript
const shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
```

The first parameter is the size of the shadow map, and the second is the light generating the shadow.

We also need to add a mesh that will cast the shadow.

```javascript
shadowGenerator.addShadowCaster(casting_mesh, true);
```

The optional second parameter, which has a default value of false, will add any children of the mesh to the shadow caster.

Finally we also have to tell the mesh on which the shadow is cast to receive it.

```javascript
receiving_mesh.receiveShadows = true
```

In our case, at the appropriate positions, we need

```javascript
const shadowGenerator = new BABYLON.ShadowGenerator(1024, light);

shadowGenerator.addShadowCaster(dude, true);

ground.receiveShadows = true;
```
<Playground id="#4G38H4#7" title="Adding Basic Shadows" description="Set up a scene for shadows with the shadow generator." image="/img/playgroundsAndNMEs/gettingStartedShadows1.webp"/>

Putting this into our world, with suitable value adjustments, gives

<Playground id="#KBS9I5#96" title="Shadows in the Village" description="Adding basic shadows to the village." image="/img/playgroundsAndNMEs/gettingStartedShadows2.webp"/>

So far we have had only one way to view our village world. There are other possibilities with different cameras.



## Lighting the Village

Perpetual light in the village can make sleeping very difficult, so we will introduce nighttime by turning the lights down. Of course, people do not want to walk in total darkness at night, so we will add some street lights. Since perpetual night is no better than perpetual day, we will add an interface to change from one to the other. We want to turn the light down at night and bring it up during the day, so let's add a GUI control to do this. Also, where there is light, there are shadows, and Babylon.js can add them as well. 


# Getting Started - The Switch On Event

## The Switch On Event
When we click on the fountain, we want it to start. We do this by adding a function to an *onPointerObservable* to handle a pointer-down event that switches the particle system between stop and start.

```javascript
let switched = false;  //on off flag

scene.onPointerObservable.add((pointerInfo) => {      		
    switch (pointerInfo.type) {
		case BABYLON.PointerEventTypes.POINTERDOWN:
			if(pointerInfo.pickInfo.hit) {
                pointerDown(pointerInfo.pickInfo.pickedMesh)
            }
		break;
    }
});
```

```javascript
const pointerDown = (mesh) => {
    if (mesh === fountain) { //check that the picked mesh is the fountain
        switched = !switched;  //toggle switch
        if(switched) {
            particleSystem.start();
        }
        else {
            particleSystem.stop();
        }
    }
}
```

<Playground id="#TC31NV#5" title="Start/Stop Particles on Click" description="Start and stop a particle system on click." image="/img/playgroundsAndNMEs/gettingStartedParticleSpray1.webp"/>

Now we add this to the village world.

<Playground id="#KBS9I5#93" title="Add The Fountain To The Village" description="Add the fountain to the village." image="/img/playgroundsAndNMEs/gettingStartedParticleSpray2.webp"/>

So far, all the action has taken place in daylight, and now it is time to move to night, when we will need street lights.

Getting Started - Chapter 7 - Light the Night

Lighting the Village

Coming next

Getting Started - Chapter 7 - Day to Night

Learn the basics of the Babylon.js GUI system.

Getting Started - Chapter 7 - Light the Night

Learn how to add spotlights to your scene.

Getting Started - Chapter 7 - Adding Shadows

Learn how to add shadows to your Babylon.js scene.