Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.
10:00

Look ma, no canvas! Server-side 3D rendering with node.js and Three.js

Sweet surprise: SoftwareRenderer

If you wonder if and how you can render a Three.js 3D scene using node.js on the server, you may have been thinking about using a canvas module, such as Automattic/Canvas or run a headless browser such as Phantom or even a full-blown Firefox or Chrome on xvfb.

But you don’t need to, thanks to a modified SoftwareRenderer.

The following Gif has been rendered on a server in 1.5 seconds:

Using the new SoftwareRenderer

You find the modified SoftwareRenderer on npm and Github and it’s working in the browser as well as on the server with node.js.

Here’s an example that renders a spinning cube (or a single frame of the cube, if you’re not in a browser) and counts the coloured pixels. This is a simple demonstration of how the renderer is used:

The difference to other renderers is that render() returns an object similar (but not exactly) ImageData:

{
  data: Uint8ClampedArray(...), // pixels as RGBARGBARGBA... array
  width: Number, // width in pixels
  height: Number // height in pixels
}

The data coming from render can be generated and used both in browser as well as on the server. So it’s “isomorphic” in current lingo (I’d prefer “universal”).

Adventure Time!

With the possibility to render off-GPU and on the server, we get a bunch of interesting possibilities like render in a web worker or…. render an animated GIF from a THREE.Scene on the server:

Credits

The original THREE.SoftwareRenderer is part of the Three.js examples but still uses a canvas element.

When going through the sources I found that it actually uses array operations on the pixel array from the canvas context, so I decided to modify it a bit to not create (or use) a canvas and a 2D context from it, but just create and use a ray Uint8ClampedArray which, to my delight, worked just fine.

The original source can be found here.

So, yeah, check it out on Github and NPM!

Don't be the product, buy the product!

Schweinderl