2

I've been trying to render images using the official three.js package, three on npm by using the canvas package on npm. So far, not much luck.

I believe this should be possible as node-canvas (https://github.com/Automattic/node-canvas) is a full stack canvas renderer, I just don' know how to fix the bridge between this library and three.js to make them work together for server-sided rendering

Here is my failed approach:

By following an old github post I've managed to modify the beginning of the three.js file as follows:

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 when I use the canvas renderer to render stuff out, I get no errors.

renderer = new THREE.CanvasRenderer();

Not sure how I can manage this thing to output a file, or render anything at all.

Any help is appreaciated.

Mia
  • 6,220
  • 12
  • 47
  • 81
  • have you tried this ? http://stackoverflow.com/a/15563621/1689894 `toDataURL()` should output png data – vincent Mar 06 '16 at 15:31
  • no it does not as ther is no document, or window, serverside. – Mia Mar 07 '16 at 14:29
  • @vincent ^ forgot to mention you – Mia Mar 07 '16 at 15:55
  • so you're saying `toDataURL()` on your `Canvas` element is not available ? – vincent Mar 08 '16 at 10:11
  • @vincent way before that, three.js canvas can't be used serverside because there is no window or document – Mia Mar 09 '16 at 03:58
  • maybe you want to use the node-webgl package and read those two issues: https://github.com/mikeseven/node-webgl/issues/34 https://github.com/mrdoob/three.js/issues/7085 – InsOp Mar 09 '16 at 09:28
  • 1
    @InsOp node-webgl doesn ot work if you're not on a dedicated hardware. It needs another pile of virtualization tricks to make it work, and not guaranteed. – Mia Mar 09 '16 at 09:29
  • This node-canvas works perfect, I'm just trying to crete a bridge with that, to -any library- that renders to canvas by default. THis way I'll be able to render things to node-canvas (instead of browser canvas) with any js. canvas drawing library. Three.js is just an example here. – Mia Mar 09 '16 at 09:30
  • I too am wanting to render a scene server-side and save an image file. Did you ever solve this? – Martin Joiner Oct 13 '17 at 17:43

1 Answers1

0

The library you use seems to provide toDataURL()

So you should be able to do something like this

renderer.render();

fs.writeFile('image.png', canvas.toDataURL(), function(){
   // done
})
vincent
  • 1,525
  • 12
  • 18
  • no, well, the library is not workng on server-side. That's the problem I'm having, not the .toDataUrl() part. – Mia Mar 09 '16 at 09:08
  • sorry, from your your post I understood you want to render on server side. On the client you want to save the image locally, or to send it to your server ? – vincent Mar 09 '16 at 09:14
  • I'm not going to send anything anywhere. I want to use everything on server side. Use the libraries to draw an image and render. Three uses canvas (with canvas renderer) and there is already a canvas library, so I'm trying to make three.js use that canvas library as server sided code does not run on a browser (there is no document or window that can be reached through the code)) – Mia Mar 09 '16 at 09:15
  • Shortly, my problem is not saving the image. My problem is "rendering" the image, as it says in the first post. – Mia Mar 09 '16 at 09:16
  • I'm not sure I get it :/ did you try a simple example with the [CanvasRenderer](http://threejs.org/docs/index.html#Reference/Renderers/CanvasRenderer.render) ? – vincent Mar 09 '16 at 09:32
  • whichp part don't you get exactly? – Mia Mar 09 '16 at 10:36