Rendering Scenes On A Remote Server
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. 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 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.
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 gpuvar args = puppeteer.defaultArgs().filter(arg => arg !== '--disable-gpu');// Run in non-headless modeargs = args.filter(arg => arg !== '--headless');// Use desktop graphicsargs.push("--use-gl=desktop")// Lanch pupeteer with custom argumentsconst 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