Possible to render three.js on serverside?

[zettam]

I was planning to use node-canvas to render out three.js on server side, using the canvas renderer.
I didn't have any successful results so far.

Any help is appreciated.

[zbjornson]

three.js uses the "webgl" canvas context, which isn't supported.

[zettam]

there is a canvas renderer as well

[zettam]

http://threejs.org/docs/#Reference/Renderers/CanvasRenderer

[zbjornson]

Ah, didn't realize that, thanks for the link. Can you post the code you've tried, please?

[zettam]

I've added this section to the begginning of the three.js file (maybe it's not a right thing to modify the source but oh well, I couldn't come up with any other way)

var Canvas = require('canvas');

var self = self || {}; // File:src/Three.js

var canvasWidth = 1024;
var canvasHeight = 1024;

var window = {
    innerWidth: canvasWidth,
    innerHeight: canvasHeight
};

var document = {
    createElement: function(name) {
        if (name == "canvas") {
            return new Canvas(canvasWidth, canvasHeight);
        }
    }
};

now it does not give me any errors when I do this in my app.js

var THREE = require("three");



var scene, camera, renderer;
var geometry, material, mesh;


init();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(75, 1, 1, 10000);
    camera.position.z = 1000;

    geometry = new THREE.BoxGeometry(200, 200, 200);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: true
    });

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(200, 200);

    renderer.render(scene, camera);

    //document.body.appendChild(renderer.domElement);
}

However, this is not rendering anything as you may expect.
What do you think?

[zbjornson]

Started to work on your code, but turns out someone already made a node module wrapping three.js that is backed by canvas: https://github.com/nulltask/node-three.js (and http://stackoverflow.com/questions/19162510/how-do-i-render-three-js-in-node-js). Does that help?

Also came across some discussion here: mrdoob/three.js#7085

[zettam]

I've came across these three links, they're mostly out of date (or there is another problem which does not let things work).

Maybe I'm doing some mistake ~

Would love to have an up to date solution for two reasons, the main one being "to understand the logic of the fix" and the secondary one being "to have a more futureproof solution".

So if you can help me with this I'll be happy.

[zettam]

https://www.npmjs.com/package/three.js also, fyi - this module is deprecated.

[zbjornson]

Sorry for the delay. The below seems to work, although CanvasRenderer lacks some WebGL features, which I think causes the geometry to render incorrectly (note that the plane below the cube intersects the cube).

Required three.js files are these -- CanvasRenderer was moved out of core three.js and it requires the projector file:
https://github.com/mrdoob/three.js/blob/master/build/three.js
https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CanvasRenderer.js
https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/Projector.js

// Assign this to global so that the subsequent modules can extend it:
global.THREE = require("./three.js");
require("./three-canvasrenderer.js");
require("./three-projector.js");

var fs = require("fs");
var Canvas = require("canvas");

var w = 200;
var h = 200;

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(70, 1, 1, 10000);
camera.position.y = 150;
camera.position.z = 400;

var geometry = new THREE.BoxGeometry(200, 200, 200);
for ( var i = 0; i < geometry.faces.length; i += 2 ) {
    var hex = Math.random() * 0xffffff;
    geometry.faces[ i ].color.setHex( hex );
    geometry.faces[ i + 1 ].color.setHex( hex );
}

var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );

cube = new THREE.Mesh(geometry, material);
cube.position.y = 150;
cube.rotation.y = 45;
scene.add(cube);

var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
geometry.rotateX( - Math.PI / 2 );

var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0, overdraw: 0.5 } );

plane = new THREE.Mesh( geometry, material );
scene.add( plane );

var canvas = new Canvas(w, h);
canvas.style = {}; // dummy shim to prevent errors during render.setSize
var renderer = new THREE.CanvasRenderer({
    canvas: canvas
});

renderer.setClearColor(0xffffff, 0);
renderer.setSize(200, 200);

renderer.render(scene, camera);

var out = fs.createWriteStream("./test-out.png");
var canvasStream = canvas.pngStream();
canvasStream.on("data", function (chunk) { out.write(chunk); });
canvasStream.on("end", function () { console.log("done"); });

[zettam]

Hm, there is already a three package
npm install three
would it be possible to make this work with it?

Thanks for the effort!

[zettam]

Error: Cannot find module './three-canvasrenderer.js'

I have all the files in the same directory with my app.js

[zettam]

Oh nevermind, looks like it worked, my bad, that I didn't replace the file names to match your script!

Thank you!

[zettam]

One final issue/question.
It's normally possible to load textures and render them via canvas renderer.
When I try to do the following:
THREE.TextureLoader().load( 'gradient.png' )
I get the following error:
ReferenceError: document is not defined

Since, earlier it was all about the "document is not defined" error (the reason I was defining document in my earlier post), and since you fixed it without making that definition anywhere, I thought maybe it would be possible to solve this somehow.

Any ideas?

[zbjornson]

I haven't tested this, but I think the following will work:

global.document = {
  createElement: function (tag) {
    if (tag === "img") {
      return new Canvas.Image();
    }
  }
};

If you find more missing APIs, you might want to use node-canvas via jsdom, as that provides the document element.

[makc]

@zbjornson much thanks for your sample code here, it appears renderer.setSize(200, 200) is critical for this to work, even if you pass the canvas that is already 200x200, otherwise the png is blank (which is the issue I was facing).

p.s. you can do renderer.setSize(200, 200, false); to skip style.xxx assignments