Babylon.js Server Side Rendering

Hi~ Babyloners!

I was wondering if there is a way to load .gltf, possibly change textures, colors, etc. and take a screenshot.

I read this article about server side rendering on Babylon Document page, but it seems like it is just running commands on the server and all the process is done using the canvas running on front-end. So basically, it still requires a Babylon Engine with canvas running on front-end side (if I got it correctly).

I also read this Running BBJS on server, but as far as I know, even with node-canvas, it can only process calculations and stuff on the server-side and it cannot actually render anything. So if I wanted to take a screenshot of a model with textures, sizes, colors modified, it just produces a black image.

If anyone has a bright idea, please share with me!

Thanks! As always, happy coding with BBJS :slight_smile:

1 Like

You can use puppeteer for that, we have a few examples in our repository as this is how we run the tests on every PR and release.
A simpler example can be seen here - Assets/structureGenerator.js at master · BabylonJS/Assets · GitHub
This is how we generate the thumbnails for our assets

1 Like

You can also try using Babylon Native to render on a server.

3 Likes

@RaananW, I’m a little confused :frowning:
Correct me if I am wrong. So for this method, I would be using some “asset/scene loader” that is running on front-end side (in this case, sandbox.babylon.com).

you don’t have to, this is just an example. The idea here is that you can run a local browser and use it to take a screenshot. you can run babylon code in this browser and load the model with your own code. I am using the sandbox because, well, it’s simpler for this use case :slight_smile:

Depending on your use case, it might be simpler and better for you to give babylon native a try. Both of those options are viable and working :slight_smile:

@RaananW, oh~ I’m sorry for the unclear explanation. What I wanted to do was to do all these on the server-side just with resource paths,

On the server-side:
(1) Load a model
(2) Change textures or colors of meshes
(3) take a screenshot

Oh hmm… I never tried Babylon Native and I am not sure what it is capable of, but the video clips about it is just amazing!!

So you are saying that I could do all those steps with Babylon Native?

I should try it out! :slight_smile:

@bghgary is the best person to ask about native, but yes - those features are supported.

Regarding puppeteer - you can run babylon code in the browser and do the manipulations. it’s a bit of a flex - start a local server, provide an HTML that will be served in puppeteer, run babylon code in puppeteer. This is how we run visualization tests :slight_smile:

1 Like