Server side rendering possibility

Questions
1

Hi, I’m using babylon.js to display an object that the user can manipulate it in real-time (changing colors or adding materials etc), the problem is the file/object size (1.3Go !!), I’m using Incremental Loading feature, the configuration file still big (200Mo) so it takes time loading it, I’m wondering if there’s a feature where the rendering is done in server side, render it at build time, and the pre-rendered scene is then reused on each request. thanks in advance

2

I don’t know if there is a babylon internal way but I think if you use NodeJS for the server backend you could use puppeeter (which runs a chrome browser without a window) that should be able to render and save the image (at least it can create screenshots of webpages so I think it can render).
You could then create a script that renders images based on a query parameter on a url.

But I still don’t expect it to be very fast. I think you would save file transfer but it might take some time to render (since it might be on CPU if it’s not a server with a GPU). But you could rebuild all images over night and save it and then server up on request , as you mentioned.

1 Like
3

We have an option to render server side if that can help:
https://doc.babylonjs.com/how_to/render_scene_on_a_server

1 Like
4

I know this is not directly relevant, but still posting here to try my luck to see if someone has solved this. I tried the approach listed above @Deltakosh :point_up_2:, but facing this issue - node.js - Puppeteer not running on dedicated GPU - Stack Overflow

2 Likes
5

Hi there @trevordev and @Deltakosh:

I need to implement a server side only-one-frame render solution with BJS and, of course, I’m following the documents at https://doc.babylonjs.com/divingDeeper/scene/renderRemoteScreenshot.

While I can see in a comment of the aforementioned source code: "…you have to wait a little while for the web page to load before calling", a question I want to ask is the way to know when the BJS scene has been completely created and shown, in order to call Puppeteer’s API “page.screenshot” only then.

Thanks for your time.

6

Seems that you may use scene.executeWhenReady

7

Thanks, @ladris, for your immediate answer:

Following your statement, may I call Pupetter’s APIs from inside BJS’ executeWhenReady?

Let me explain all this a bit. I’m following the example code to get to this:

var puppeteer = require('puppeteer');

async function takeScreenshot(params) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({
        width: 1920,
        height: 1080
    });
    await page.goto('https://playground.babylonjs.com/#KBS9I5');
    await page.screenshot({
        path: params.path
    });
    await page.close();
    await browser.close();
}

module.exports = takeScreenshot;

…using, as you can see, the more trivial scene I’ve managed to find (https://playground.babylonjs.com/#KBS9I5).

When executed I’ve just get the following screenshot:

screenshot
screenshot1920×1080 23.1 KB

…because, of course, the scene has not been created/shown at the moment the screenshot is taken.

Following your advice, I must move part of the custom NodeJS module inside my BJS logic more or less this way (please note the SCREENSHOT HERE indication):

...
function _create() {
        //1
        _engine = new BABYLON.Engine(canvas, true, {
            preserveDrawingBuffer: true
        });

        //2
        _scene = new BABYLON.Scene(_engine);
        _scene.clearColor = BABYLON.Color4.FromHexString('#00000000');

        //3
        _scene.executeWhenReady(function () {
            _engine.runRenderLoop(function () {
                _scene.render();
                //SCREENSHOT HERE and ONCE!!!<-------------------------
            });
        });

        //4
        /*_scene.registerBeforeRender(function () {
        });*/

        //5
        /*_scene.registerAfterRender(function () {
        });
        */

        console.log(_TAG + "Object created.");
}
...

Is this the approach are you proposing? Is a call to Puppeteer’s API possible from inside executeWhenReady? Honestly, I can’t see how, but of course I’m a newbie on NodeJS!

Thanks for your time.

8

I think that this thread already has the answer - Running Babylon.js on a nodejs server with headless-gl - #10 by sharp

9

Hi @labris.

As you say, @sharp tried to help me, but sadly I’m facing some problems to launch the Puppeteer’s screenshot only when the BJS scene is ready, basically because I can’t get the NodeJS side (Puppeteer) to listen to custom events correctly.

All this has been explained in that thread.