# Rendering Scenes On A Remote Server

> Learn how to render scenes on a remote server and take screenshots.

Source: https://doc.babylonjs.com/features/featuresDeepDive/scene/renderRemoteScreenshot

## Render a scene and take a screenshot on a remote server

Capturing images of a Babylon scene (e.g. a 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:

## Set up a Babylon scene you would like to render

Create a local server hosting the scene or use a Playground, e.g. [Playground: Initial Setup](https://playground.babylonjs.com/#PN1NNI#1) - 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, setting up the proper drivers so Puppeteer can access it can be difficult. One method that has worked is 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 set up, Puppeteer must be configured to run in non-headless mode so that it uses 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 described above.

## Example
An example project can be found [here](https://github.com/TrevorDev/babylonServer).