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?

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.