Rendering Scenes On A Remote Server

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. Initial Setup

Using Puppeteer

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.

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.