Server side rendering

Is there an official way to do server-side rendering with THREE? I’m looking for a way to render something simple and take a snapshot of that scene. Is it possible?

1 Like

Depends on what you need to render. WebGL depends largely on the capabilities of your graphics card, and if your server doesn’t have a GPU then it severely limits what you can do. An alternative could be the SoftwareRenderer https://threejs.org/examples/?q=software#software_sandbox although it’s pretty rudimentary compared to the WebGLRenderer.

These two posts seem to suggest using something called Headless GL, but I’ve never used it myself:

It looks like https://github.com/mrdoob/three.js/pull/17809 removed the SoftwareRenderer from dev five days ago.

@juanchomogi Is there a good reason you cannot do the rendering client-side? WebGL support is generally good. A possible reason I can think of is protection of intellectual property. But even that may perhaps be sufficiently accommodated by sending the minimal amount of design information to the client, reducing resolution, adding fixed noise, minifying and obfuscating code, etc…

With “minimal amount of design information to the client”, I mean e.g. passing polygons rather than shape parameterizations, and culling away all parts that are not within view, even on the polygon level.

1 Like

What I need is a headless service to create snapshots from different angles of a 3d model. We already have a working app on the browser, but we need a service just for pictures.

Is intellectual property a chief concern? If it is, an approach that may work is to precompute almost all shading and store it in textures, and also for each snapshot to compute view-space vertex projections server-side in JS. Then, finally, pass the textures, positions and uvs to the client and let the client do a limited render. Picture files may then be generated client-side, if desired.

ssr should work naturally in react-three-fiber and you can always create scene snapshots, even for testing components with jest. if you have a headless browser these will turn into image data. we’re actually doing this at work for visual regression testing. we use a headless browser, load a part, make unit snapshots and visual snapshots which we then inspect for pixel changes to detect changes.

hello @drcmda, do you have any example on SSR with React Three Fiber? Is it possible to render with CPU?

something like this? GitHub - pmndrs/react-three-next: React Three Fiber, Nextjs, Tailwind and Styled-components starter or is this about rendering models on a backend?

@drcmda yes! this is about rendering 3D on the server side!

puppeteer something like that. i have done that in the past, creating visual snapshots for regression testing but it was long ago. i used puppeteer and jest.

Here is a working SSR (server side rendering) demo.
SSR : https://ssr.sbcode.net/
Be quick, it will crash after a day or two.

View the JS source, there is no client side three.js in the example.
JavaScript : https://ssr.sbcode.net/client.js
It is images created server side from the three.js scene and sent to the client via socket.io

See further notes here,
Notes : SSR - Three.js Tutorials (sbcode.net)

Good luck

thanks @drcmda and @seanwasere, I will take a look at puppeter and this SSR demo! very cool!