
## How to use clip planes

You can clip the rendering of a scene by using one of the supported clip planes:

- `scene.clipPlane`
- `scene.clipPlane2`
- `scene.clipPlane3`
- `scene.clipPlane4`

Each clip plane is a BABYLON.Plane that you can define like this:

```
scene.clipPlane4 = new BABYLON.Plane(0, 1, 0, 0);
```

The 3 first parameters of the Plane constructor defines the normal of the plane and the last one defines the distance from (0,0,0).

You can find an interactive demo about clip planes here: <Playground id="#Y6W087" title="Clipping Planes Example 1" description="Simple example showing how to use clipping planes."/>

A maximum of 4 different clip planes can be used simultaneously for a specific rendering.

If you want to apply per mesh clip planes, you can rely on the following observables:

- `mesh.onBeforeRenderObservable`
- `mesh.onAfterRenderObservable`

Example:

```
sphere.onBeforeRenderObservable.add(function() {
    scene.clipPlane = new BABYLON.Plane(1, 0, 0, 0);
});

sphere.onAfterRenderObservable.add(function() {
    scene.clipPlane = null;
});    
```

Demo: <Playground id="#EHLHNX" title="Clipping Planes Example 2" description="Using 4 different clipping planes at the same time."/>


## Render a scene and take a screenshot on a remote server

Capturing images of a Babylon scene (eg. GLTF model) from the server side can be useful for scenarios such as:
- Remote rendering of a scene to display on a device that does not support a browser
- Server side testing
- Creating a catalog of 3D model images

To get started follow the steps below:

## Setup a Babylon scene you would like to render

Create a local server hosting the scene or use a playground eg. <Playground id="#PN1NNI#1" title="Initial Setup" description="Simple example showing how to set up youur scene."/>

## Using Puppeteer
[Puppeteer](https://github.com/GoogleChrome/puppeteer) is an npm package that can be used to run and interact with a headless version of chrome. This way the same code written with Babylon to run in the browser should run the same way with puppeteer.

Create a browser instance and load a webpage
```
const browser = await puppeteer.launch({});
const page = await browser.newPage();
await page.goto("https://playground.babylonjs.com/frame.html#PN1NNI#1"); 
```

Inject JS into the webpage
```
page.evaluate("BABYLON.Engine.LastCreatedScene.activeCamera.alpha = 1.4;");
```

Take a screenshot of the webpage
```
await page.screenshot({path: './public/example.png'});
```
## Configuring to use the GPU
Typical server virtual machines do not provide access to a GPU and when they do provide access, setting up the proper drivers can be difficult to grant access to puppeteer. One method that has worked was using an [Azure NV virtual machine running Windows and installing grid drivers](https://docs.microsoft.com/en-us/azure/virtual-machines/windows/n-series-driver-setup#nvidia-grid-drivers).

Once the VM is setup puppeteer must be configured to run in non-headless mode so that it utilizes the GPU renderer.
```
// Don't disable the gpu
var args = puppeteer.defaultArgs().filter(arg => arg !== '--disable-gpu');
// Run in non-headless mode
args = args.filter(arg => arg !== '--headless');
// Use desktop graphics
args.push("--use-gl=desktop")
// Lanch pupeteer with custom arguments
const browser = await puppeteer.launch({
    headless: false,
    ignoreDefaultArgs: true,
    args
});
```
After this initial setup, follow the same steps as described above

## Example
An example project can be found [here](https://github.com/TrevorDev/babylonServer)


## Record a Scene to a Video

First, you may ask why is it better than an external video capture tool?

Thanks to the Html5 standard being always in motion, we can now, in modern browsers, directly record a stream generated from a canvas. This ensures that no framerate drop will occur during the recording and it is all happening auto-magically in the browser.

## How to record with the inspector 
A new action has been added to the Tools tab of the inspector. You can find a Start Recording Video button in compatible browsers.

![InspectorTools](/img/how_to/scene/inspectorVideoRecorder.png)

This will by default records 7 seconds of video. You can press the button again anytime during the recording session to stop it earlier.

## How to record by code

### Check support
As the browser support is still not wide enough, recording the canvas should always be preceeded by a capability check. You can simply use this code to ensure the correct availability of the required APIs in your browser:

```javascript
if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
}
```

### Simple Record
In order to record your currently displayed scene, you can simply use this code:

```javascript
if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording();
}
```

You can see a <Playground id="#47H64G" title="Simple Video Recording Example" description="Simple example of recording a video of the current scene."/>

This will by default record 7 seconds of video to a file name "babylonjs.webm".

### Changing default File Name
You can pass the file name to the startRecording API:

```javascript
if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording("test.webm");
}
```

You can see a live version here: <Playground id="#47H64G#1" title="Changing The Default Recorded Video Name" description="Simple example showing how to record a video of the current scene and change the default file name."/>

This will by default record 7 seconds of video to a file name "test.webm".

### Changing default Record Time
You can pass the default time in seconds to the startRecording API:

```javascript
if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording("test.webm", 2);
}
```

You can see a live demo here: <Playground id="#47H64G#2" title="Chaning Default Record Time" description="Simple example showing how to change the default record time of recorded videos."/>

This will by default record 2 seconds of video to a file name "test.webm".

### Stop video before the Record Time
Once a record is in progress, you can stop it earlier by using the  `stopRecording` Api:

```javascript
if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording();
    setTimeout(() => {
        recorder.stopRecording()
    }, 500);
}
```

You can see a live version here: <Playground id="#47H64G#3" title="Stopping Video Before Record Time" description="Simple example showing how to stop recording before the allotted time has completed."/>

This will record 500 milliseconds of video to a file name "babylonjs.webm".

### When does the record end
To detect the end of the recording (either reaching the record time or manually stopped), you can use the promise return by the `startRecording` API:

```javascript
if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording().then(() => {
        alert("done");
    });
}
```

You can see a live version here: <Playground id="#47H64G#4" title="Detect Recording End" description="Simple example showing how to detect when a recording has ended."/>

This will record 7 seconds of video to a file name "babylonjs.webm" and display the "done" message.

### How to not download automatically the file
Passing the fileName to `null` will prevent the download to happen automatically and as in the previous topic, you can rely on the `startRecording` return promise to deal with the video data on your own:

```javascript
if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording(null, 1).then((videoBlob) => {
        // Do Something with the videoBlob.
    });
}
```

You can see a live version here: <Playground id="#47H64G#5" title="Not Downloading The Recorded Video" description="Simple example showing how you can stop an automatic download of the recorded video."/>

This will record 1 second of video to a blob.

## Limitations
Video Recording is based on both MediaRecorder and Canvas.captureStream() APIs which are still not broadly supported. The recording support is then limited by the browser capability to record a canvas.

The second limitations is the file format you can record to seems to be curently limited to webm. You can not directly record to .mp4 or .mov with this method so far. 

Let's hope that wider browser and file format support will be added soon.

Using Clipping Planes

How to use clip planes