
## How to Interact with A Scene

There are three main ways for a user to interact with a scene, the keyboard, the [GUI](/features/divingDeeper/gui) and directly with a mouse, touch or gamepad. The use of keyboard and pointer interactions are described on this page.

## Keyboard Interactions

This is a code template to control reactions to different keys. Both the `ascii` code for the key and the key itself are available to you.

```javascript
scene.onKeyboardObservable.add((kbInfo) => {
  switch (kbInfo.type) {
    case BABYLON.KeyboardEventTypes.KEYDOWN:
      console.log("KEY DOWN: ", kbInfo.event.key);
      break;
    case BABYLON.KeyboardEventTypes.KEYUP:
      console.log("KEY UP: ", kbInfo.event.code);
      break;
  }
});
```

## Pointer Interactions

This is a code template for reacting to pointer events:

```javascript
scene.onPointerObservable.add((pointerInfo) => {
  switch (pointerInfo.type) {
    case BABYLON.PointerEventTypes.POINTERDOWN:
      console.log("POINTER DOWN");
      break;
    case BABYLON.PointerEventTypes.POINTERUP:
      console.log("POINTER UP");
      break;
    case BABYLON.PointerEventTypes.POINTERMOVE:
      console.log("POINTER MOVE");
      break;
    case BABYLON.PointerEventTypes.POINTERWHEEL:
      console.log("POINTER WHEEL");
      break;
    case BABYLON.PointerEventTypes.POINTERPICK:
      console.log("POINTER PICK");
      break;
    case BABYLON.PointerEventTypes.POINTERTAP:
      console.log("POINTER TAP");
      break;
    case BABYLON.PointerEventTypes.POINTERDOUBLETAP:
      console.log("POINTER DOUBLE-TAP");
      break;
  }
});
```

[PEP](https://github.com/jquery/PEP) is an option for supporting **touch** events in older browsers (ones that don't natively support [pointer events](https://caniuse.com/pointer)). To use PEP all that is necessary is to:

1. Install PEP

```javascript
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
```

2. Stop the default touch-action within the rendering canvas

```javascript
<canvas id="renderCanvas" touch-action="none"></canvas>
```

## Playground Examples

<Playground id="#0XYMA9#107" title="Scene Observables Template" description="Simple scene observables template." image="/img/playgroundsAndNMEs/features/divingDeeperInteractions1.jpg" isMain={true} category="Scene"/>
<Playground id="#7CBW04" title="Simple Drag Example" description="Simple example of a drag behavior." image="/img/playgroundsAndNMEs/features/divingDeeperInteractions2.jpg" isMain={true} category="Scene"/>
<Playground id="#XZ0TH6" title="Simple Keyboard Input Example" description="Simple example of keyboard input." image="/img/playgroundsAndNMEs/features/divingDeeperInteractions3.jpg" isMain={true} category="Scene"/>
<Playground id="#2SA7J8#7" title="Click+Drag to Multi Select" description="Simple example of how to multi-select objects in a scene using rectangular selection." isMain={true} category="Scene"/>

Remember to click in scene (to set focus) before using keyboard




## How to Use Multiple Scenes

To use multiple scenes create them with 

```javascript
var scene0 = new BABYLON.Scene(engine);
var scene1 = new BABYLON.Scene(engine);
``` 
then put the relevant camera, lights and meshes inside each scene and call them in the engine run render loop

```javascript
engine.runRenderLoop(function () {
  scene0.render();
  scene1.render();
});
```
When you want the meshes of both scenes to be visible at the same time then set the 'autoClear' of scene1 (the last rendered scene(s)) to false.

However there is a difference between writing multiple scenes within your own projects and trying them out in the playground.

In your own project it is easy enough to set up create scene functions for each scene and call them in the engine run render loop. For example

```javascript
var createScene0 = function () {
    var scene0 = new BABYLON.Scene(engine);

    //Add camera, light and meshes for scene0

	return scene0;
}

var createScene1 = function () {
    var scene1 = new BABYLON.Scene(engine);

    //Add camera, light and meshes for scene1

	return scene1;
}

//Any other code
var scene0 = createScene0();
var scene1 = createScene1();

engine.runRenderLoop(function () {
  scene0.render();
  scene1.render();
});
```

In the playground the create scene function is wrapped by the code running the playground and so the easiest method is just to create a new scene within the function and add a camera, light and meshes to it. Also the playground has its own engine run render loop which needs to be stopped before running your own version, the trick is to use a setTimeout. Putting these together playground code can look like this example

```javascript
var createScene = function () {
    var scene = new BABYLON.Scene(engine);

    //Add camera, light and meshes for scene

    ////////OTHER SCENE////////////////////
    var scene1 = new BABYLON.Scene(engine);

    //Add camera, light and meshes for scene

    ////////CONTROL ENGINE LOOP///////////
    setTimeout(function() {
        engine.stopRenderLoop();

        engine.runRenderLoop(function () {
            scene.render();
            scene1.render();
        });
    }, 500);

	return scene;
}
```


## Switch Scenes
You might want a user to be able to switch between scenes, remember that the Babylon GUI is a good way to set triggers for this to be possible. 

An example of one way to do this is

```javascript
var clicks = 0;
var showScene = 0;
var advancedTexture;
   

var createGUI = function(scene, showScene) {             
    switch (showScene) {
        case 0:            
            advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene0);
        break
        case 1:            
            advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene1);
        break
    }
    var button = BABYLON.GUI.Button.CreateSimpleButton("but", "Scene " + ((clicks + 1) % 2));
    button.width = 0.2;
    button.height = "40px";
    button.color = "white";
    button.background = "green";
    button.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP
    advancedTexture.addControl(button);

    
    button.onPointerUpObservable.add(function () {       
        clicks++;                   
    });
}  

createGUI(scene, showScene);

engine.runRenderLoop(function () {
    if(showScene != (clicks % 2)){
        showScene = clicks % 2;          
        switch (showScene) {
            case 0:                    
                advancedTexture.dispose();
                createGUI(scene0, showScene);
                scene0.render();
            break
            case 1:
                advancedTexture.dispose();
                createGUI(scene1, showScene);
                scene1.render();
            break
        }
    }
}); 
```

<Playground id="#MXCRPS#1" title="Switching Scenes" description="Simple example showing how to switch scenes."/>

## Overlay Multiple Scenes

Suppose you want a first person shooter type project with a 3D foreground representing the user and then a background scene representing what the user is tracking. In this case you want the meshes in both the foreground and background visible. To do this you want the foreground meshes drawn over the background, that is you do not want the render canvas cleared when rendering the foreground. In this case set 'autoClear' to false 

```javascript

//other code

var foregroundScene = new BABYLON.Scene(engine);
foregroundScene.autoClear = false;

//other code

engine.runRenderLoop(function () {
  backgroundScene.render();
  foregroundScene.render();
});
``` 

<Playground id="#L0IMUD#1" title="Overlaying Scenes" description="Simple example of overlaying scenes."/>


## How floating-origin works

On traditional 3D rendering, objects will pass three stages until they're displayed on screen:

- World matrix: places, scales and rotates the object on the world;
- View matrix: will translate and rotate relative to camera;
- Projection matrix: will project vertices to screen.


This is well known and works perfectly.

Only problem is that our GPU's are still limited to 32 bits floating-point,
so when we have big coordinates -- objects and/or cameras very far from the world's origin,
for example at (10000000, 0, 10000000) -- we will notice jittering because the big numbers inside matrices will cause 32 bits floating-point imprecision on the GPU.

![Pic01](/img/how_to/floating_origin/pic01.jpg)

But there is a trick which is good to mitigate that problem: floating-origin.

The idea of floating-origin is very simple: we just keep the camera always fixed at world's origin
(0, 0, 0) and move the objects instead.

This does not mean that the camera cannot move, though! It "moves", but not directly. Here is
where lies the trick: instead of changing the real camera position, we use a separate, double precision
Vector3 which stores the camera position. The real camera position is kept always at origin (0, 0, 0).

We do the same for the objects: all of them get a separate, double precision Vector3 to store their coordinates. We don't set their real position directly; instead, we also set their separate coordinates.

Then, on a loop which happens every frame just before rendering, we subtract the double camera position from each object's double position, and that difference is copied to that object's real position.

The result is that the camera is indeed kept always at origin, and the objects float around, removing
huge coordinates from the objects that are close to the camera. That is, imprecision only happens very far
from the camera, and as they are very far anyway, we cannot see the jittering. =)

![Pic02](/img/how_to/floating_origin/pic02.jpg)

Let's use an example:

On a solar system, we have an asteroid located at (10000000, 0, 10000000).
Our camera is close to the asteroid, at (10000000, 0, 10000500).

Normally, that would certainly cause jittering, because both objects are very far from the world's origin. But with
our trick, the jittering does not happen -- remember, we subtract camera double position from the object double position
and then set the object real position at that offset, keeping the camera always at (0, 0, 0):

Object Position: (10000000, 0, 10000000)  
Camera Position: (10000000, 0, 10000500)  
Offset: (0, 0, -500)

The offset is small enough to be absolutely precise even with only 32 bits floating-point. The GPU is very happy with that
and we don't see any jittering.

We just need to set the object at (0, 0, -500) and it will have the same visual effect as if we used their real coordinates,
but with no jittering.

## Floating-origin examples

You can find a working playground example with OriginCamera and Entity classes here:  

<Playground id="#LHI514#3" title="Floating-Origin" description="A simple example of huge scene far from world's origin using floating-origin trick." image="/img/playgroundsAndNMEs/divingDeeperFloatingOrigin.jpg"/>


If you decide to use floating-origin, all your objects will have to use the same trick,
or your game won't work properly. You will need to create one instance of OriginCamera
and at least one instance of Entity.

OriginCamera is a special camera which has a separate position control stored as doublepos (and its target as doubletgt). 
You must stop using position and target from camera, and use their double precision counterparts doublepos and doubletgt.

All objects from scene must then be parented to a Entity instance. Entity also has doublepos property which is double precision coordinate. 
You must use its doublepos to set object position instead of position directly.

So, let's say that we want a sphere with double precision:

```javascript
// Create the OriginCamera
let camera = new OriginCamera("camera", new BABYLON.Vector3(10000000, 0, 10000500), scene);
camera.doubletgt = new BABYLON.Vector3(10000000, 0, 10000000);
camera.touchAngularSensibility = 10000;
camera.inertia = 0;
camera.speed = 1;
camera.keysUp.push(87);    		// W
camera.keysDown.push(83)   		// D
camera.keysLeft.push(65);  		// A
camera.keysRight.push(68); 		// S
camera.keysUpward.push(69);		// E
camera.keysDownward.push(81);     // Q
camera.minZ = 0.5;
camera.maxZ = 50000000;
camera.fov = 1;
camera.attachControl(canvas, true);

// Create an Entity for the sphere
let entSphere = new Entity("entSphere", scene);
camera.add(entSphere);

// Create the sphere and parent it to its Entity
let sphere = BABYLON.CreateSphere("sphere", {diameter:256});
sphere.parent = entSphere;

// Position the Entity
entSphere.doublepos = new BABYLON.Vector3(10000000, 0, 10000000);
```  

The OriginCamera extends UniversalCamera, so you can use the same features of that.

Finally, even on huge scenes you commonly will have objects spread into separate regions, so you 
most probably would not need one Entity instance for each object. If you think carefully, you
can have one Entity instance for each region of your scene, a region which does not extend for more
than let's say 10,000 units to avoid imprecision again. Then, you can add many objects that are
always in that region to just one Entity. Doing that, you can even move those objects by using
their positions directly, as you would do normally. And still, no imprecision will be seen anymore.


Interacting With Scenes

How to Interact with A Scene

Keyboard Interactions

Pointer Interactions

Playground Examples

Further reading

Observables

Learn all about observables in Babylon.js.