
# 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 as 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 is an additional script to load in your own projects with

```html
<script>https://cdn.babylonjs.com/gui/babylon.gui.min.js</script>
```
For the village world we will 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 one based on the 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.jpg"/>

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 less 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.jpg"/>

We export the lamp, of 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. Any more and 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#94" title="Add Street Lights" description="Add street lights to the village and adjust the lighting." image="/img/playgroundsAndNMEs/gettingStartedStreetLights2.jpg"/>

It would be good if we could slide daylight into nightlight 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 and 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 only appear when a *ShadowGenerator* object is created, a mesh casting the shadow is given and the mesh on which the shadow will be cast is set to receive shadows. 

```javascript
const shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
```

The first parameter is the size of a shadow map and 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 default value 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 we need, at appropriate positions

```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.jpg"/>

Putting this, with suitable value adjustments, in our world gives

<Playground id="#KBS9I5#96" title="Shadows in the Village" description="Adding basic shadows to the village." image="/img/playgroundsAndNMEs/gettingStartedShadows2.jpg"/>

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 night time 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. 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 the screen pointer on the fountain we want it to start. We do this by adding a function to an *onPointerObservable* to deal with 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.jpg"/>

Now we add this into 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.jpg"/>

So far all the actions have been in daylight and now time moves to the night where we will need street lights.

Getting Started - Chapter 7 - Light the Night

Lighting the Village

Coming next

Getting Started - Chapter 7 - Light the Night

Learn the how to add spotlights to your scene.

Getting Started - Chapter 7 - Day to Night

Learn the basics the Babylon.js GUI system.

Getting Started - Chapter 7 - Adding Shadows

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