Three.js: node.js server rendering with node-webgl and/or headless-gl

[bsergean]

I have been trying (with great pain ... but finally some success) to use node + three.js to render some models on a Linux server box.

The only workable approach I found was to use the fork of three.js that @kabbi did back in March. I'm using Xvfb on the server on Linux, and @kabbi fork which is using node-webgl to create GL context from node. @kabbi did not have to modify too many files to make this works, mostly adding some cast to WebGLRenderer.js, make some of the LoadUtils code work differently. The nodes header.js file is used to create a shim/wrapper so that the global document (not accessible from node) is using the fake one that node-webgl provides.

https://github.com/kabbi/three.js/blob/d97012f8234796b9e0291e6f6e965e293d950099/src/nodejs/header.js

Here is the commit that had node / node-webgl support -> https://github.com/kabbi/three.js/commit/d97012f8234796b9e0291e6f6e965e293d950099

(the kind of "cast" I'm talking about, mostly around some uniforms)

                case '1iv':
-                   _gl.uniform1iv( location, value );
+                   _gl.uniform1iv( location, new Int32Array(value) );
                    break;

I would like to have people advices on how to merge this back into the main repo, whether this is feasible or not, and on how to move forward. Any thought, anyone ?

Also, my current main interest is to do offscreen rendering, so a library like https://github.com/stackgl/headless-gl is actually making more sense for my use case. I tried to create a context from headless-gl and pass it to the WebGLRenderer with no luck (getting a white image with my test-case).

BTW for my test cases I tried to use node-canvas to render text into textures, but I got some crashes with node-canvas and ended up using 3D Fonts (TextGeometry) which work well.

Thanks for any help (and for this awesome library). Once one experiences the speed and ease of doing OpenGL in a browser it's very hard to go back to C++ ;)

[bhouston]

Is there any way to fix node-webgl rather than modifying ThreeJS?

Alternatively, could you just patch _gl.uniform1iv function and replace it with a new one that does this conversion? Something like this:

var originalUniform1iv = _gl.uniform1iv;
_gl.uniform1iv = function(..) {...  originalUniform1iv.call( _gl, ... ); }

I think you could do after creating the WebGLRenderer but before actually rendering?

That does the conversion if necessary? I'm not sure if _gl is a protected object or not. But it would be best to not pollute ThreeJS core with workarounds if one can work around them outside of ThreeJS.

BTW I know Ken Museth over at DA. :)

[bsergean]

Interesting though on "monkey patching" node-webgl. That's something to try: when trying to plug in headless-gl I was passing the gl-object to three.js / I don't know if the gl object from node-webgl is private or not but I'll see that. If it goes well I'll report back (doing something else now, trying to use web-workers to load a big model without blocking the UI).

I'd like to use stock three.js as much as I can (ideally fetched form npm). The other thing I've had some trouble with is using three with browserify, but today I tried again and it looks like THREE = require('three') just works ... which is great.

Funny that you know Ken Museth, 3D is such a small world; I have only been to Siggraph once and it had a high-school reunion feeling, github must be close to that ;)

[bsergean]

I got three.js + headless-gl to work nicely together. My only problem is the precision GL_ES directive which make the shader compile step fails on Desktop OpenGL. I created a pull request to help with that.

[bhouston]

@bsergean Sweet. What WebGL extensions does headless gl support? I guess there is a list somewhere?

Maybe you should contribute a ThreeJS example or something. :)

[bsergean]

Unfortunately headless-gl does not support any extensions at this point, but the three.js code is playing nicely with the lack of extension support and the fall-back work well, at least for my case. The main problem I've had was that I need to render fonts, and I was originally using THREE.sprite for that purpose + a canvas object. Unfortunately the node canvas module was crashing for me, so I used a 3D font instead (TextGeometry) which works great.

I'm gonna create an issue on headless-gl about the lack of extension support and what it would take to add.

And yes, adding an example would be a good thing to do, I'll do that. Should I put it in the examples folder ?

[bhouston]

You has to run it by @mrdoob, but I think that node.js is becoming a major platform for JavaScript development. We could actually create a root "node" folder and put the npm generator in it as well as an examples folder. Then we could start to build up the node capabilities of ThreeJS in a focused fashion. @WestLangley also has a JavaScript convolution generator that could go in the node folder.

[bsergean]

Ok. I have created some documentation and a sample script to get a .png of a cube (I'm sure we can make a much more impressive demo but it shows my lack of creativity + and keep the sample simple ;) ) out of three.js + headless-gl.

It's in a gist, and should work for anyone hopefully. I tested it on my Mac. Not sure where to take this from there, but it's a working sample so it's a good start.

https://gist.github.com/bsergean/6780d7cc0cabb1b4d6c8

[whatisor]

Hello,
I used headless-gl with threejs. It can run well some case but:

• Texturing not work
• Antialiasing not work.

[whatisor]

Finally, I get Texture working :+1:
But Antialiasing is no idea :(

[bsergean]

Here is a gist that explains how I got texturing to work.

https://gist.github.com/bsergean/08be90a2f21205062ccc

I should try to create a similar one to explain how I got antialiasing to work (It's explained in one of my comment in https://github.com/stackgl/headless-gl/issues/30#issuecomment-142068559).

[whatisor]

Hello,
Thank for your pointing.
For antialias, I tried this :
var gl = require('gl')(width, height, { preserveDrawingBuffer: true,antialias:true })
But it does not work, although I check you have antialias option in source code.
What should I need more to enable it?
Thank you. (not sure I can understand all your discussion of old issue)

[bsergean]

Hey @whatisor / here is a gist that should cover everything (in coffee-script, but porting to javascript should be trivial and you can use coffee -c to help with it). A bunch of extra code / files are required, but until the root issue is fixed in headless-gl this is my way of doing it.

https://gist.github.com/bsergean/0d79ce3c7384cf6d1bb6

The antialias: true is ignored at this point.

[jackts]

Hi @bsergean,
I am still heavily researching on your topic and trying different examples. No luck to make it work for my use case, as I am not that advanced in JavaScript. I found couple different implementations which might work:
1st is modified softwarerender:
http://ox86.tumblr.com/post/129341221225/look-ma-no-canvas-server-side-3d-rendering-with

2nd is node-canvas backed By Cairo (Svg) very good example.
http://build-failed.blogspot.com/2014/01/generating-server-side-tile-maps-with.html?m=1

3d : to use jsdom, node-canvas, and phantom js, but my main concern is performance of server GPU with 1000 clients or so using it at the same time

My use case: I want to render on server and output jpg, Svg, png, obj, or gif or 3d scene with (vertices only) to showcase the result to the customer and to hide the rendering logic and models from the user(so they can't steal it).

[bsergean]

Hi @jackts / the only output I have produced from node is a straight rgba buffer which is read back from GL, using headless-gl (https://github.com/stackgl/headless-gl), and then converted to an image format (I use png).

BTW, you don't have to render on the server to obfuscate code (~ prevent from stealing in your phrasing); you would just have to post-process your javascript with tools like browserify to make a single js bundle, that you can obfuscate with uglify.js.

You need a very good reason not to use natives clients; a server based approach has advantages but also drawbacks, such as scalability. If native clients can execute your code you don't need a big server, and it will be so much faster than streaming a video which is essentially what you would have to do with a node implementation. Lastly if you are trying to make an interactive experience the latency will make the experience horrible.

My use case for using node.js + three.js was offline reporting, with zero timing constraint.

[tomasparks]

I was about to ask about this:
my project is going to create imposters, terrain textures, skyboxs and 3d models severer side

• 3D models: are going to procedurally generated and some are going to send to a custom LODer
• imposters: some of the 3D model are going have imposter made for them
• terrain textures: are going to procedurally generated using a quad tree system eg: google map style
  some of these could be create client-side, but I dont trust the client to upload the correct data to the server

[whatisor]

@bsergean : Thank you for your help.
However, in theory, because nodejs gl base in native desktop gl, it should be better quality.
However, as I see with same code, its quality is worse.
I guess reason is FXAA is not enough quality in comparsion with webgl on browser.
How do you think?

[bhouston]

@whatisor, can you share screenshots? I believe that by default WebGL uses hardware-based MSAA. OpenGL on the desktop is able to do MSAA as well, although I am unsure if it is enabled by default.

[bsergean]

@whatisor / I think that this issue is not the good one to discuss the anti-aliasing problem; the anti-aliasing problem is a headless-gl only problem, which is tracked here -> https://github.com/stackgl/headless-gl/issues/30. Desktop OpenGL knows how to anti-alias as @bhouston pointed out

@whatisor, that gist explains how to workaround the headless-gl problem, by doing anti-aliasing "yourself" -> https://gist.github.com/bsergean/0d79ce3c7384cf6d1bb6 / if you need this bug to be fixed at this point your best bet is to dig into this gist to understand how to do anti-aliasing yourself.

I'm going to close this issue (which I filed some time ago...), since it is now documented on how to use three.js + headless.gl, even if there are some bugs left.

[bhouston]

If you want to setup a MSAA buffer, I can share this code for anyone to use that does that -- it is used in our Exocortex Fury renderer product and its been tested on both Linux and Windows on a ton of GPUs over the past 6 years:

EStatus GPUParticleRenderer::createOffscreenMultisampleBuffer() {

    // http://www.opengl.org/wiki/GL_EXT_framebuffer_multisample

    int maxSamples;
    glGetIntegerv(GL_MAX_SAMPLES_EXT, &maxSamples);

    int samples = _frameSpec.getNumMultiSamples();
    if ( samples > maxSamples )
    {
        char szBuffer[1024];
        sprintf_s( szBuffer, 1024, "The requested number of multisamples (%i) is greater than the maximum supported (%i)", samples, maxSamples );
        return EStatus::FailureCode( szBuffer );
    }

    glGenFramebuffersEXT(1, &multiSampleTarget.fboId);
    glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, multiSampleTarget.fboId);

    glGenRenderbuffersEXT(1, &multiSampleTarget.colorBufferId);
    glBindRenderbufferEXT(GL_RENDERBUFFER_EXT, multiSampleTarget.colorBufferId);

    GL( glRenderbufferStorageMultisampleEXT(GL_RENDERBUFFER_EXT, samples, GL_RGBA32F_ARB, _frameSpec.getImageSize().x, _frameSpec.getImageSize().y) );

    glGenRenderbuffersEXT(1, &multiSampleTarget.depthBufferId);
    glBindRenderbufferEXT(GL_RENDERBUFFER_EXT, multiSampleTarget.depthBufferId);

    GL( glRenderbufferStorageMultisampleEXT(GL_RENDERBUFFER_EXT, samples, GL_DEPTH_COMPONENT24, _frameSpec.getImageSize().x, _frameSpec.getImageSize().y) );

    glFramebufferRenderbufferEXT(GL_FRAMEBUFFER_EXT, GL_COLOR_ATTACHMENT0_EXT, GL_RENDERBUFFER_EXT, multiSampleTarget.colorBufferId);
    glFramebufferRenderbufferEXT(GL_FRAMEBUFFER_EXT, GL_DEPTH_ATTACHMENT_EXT, GL_RENDERBUFFER_EXT, multiSampleTarget.depthBufferId);

    multiSampleTarget._init = true;     // can now be deleted!

    char szErrorMessage[1024];
    if( glExtCheckFramebufferStatus(szErrorMessage) != 1 )
    {
        char szBuffer[2048];
        sprintf_s( szBuffer, 1024, "Unable to allocate framebuffers because: %s", szErrorMessage );
        return EStatus::FailureCode( szBuffer );
    }
    return EStatus::SuccessCode();
}

Then just before we render, we do this:

    if (_frameSpec.getNumMultiSamples() > 0) {
        GL( glBindFramebufferEXT( GL_FRAMEBUFFER_EXT, multiSampleTarget.fboId ) );
    }
    else {
        GL( glBindFramebufferEXT( GL_FRAMEBUFFER_EXT, singleSampleTarget.fboId ) );
    }

[dbkaplun]

I've created an NPM module that exports a scene to PNG:

import { toPNG } from 'node-three-screenshot';

fs.writeFileSync('out.png', toPNG(scene));

[mrdoob]

@dbkaplun How come you're using CanvasRenderer instead of WebGLRenderer?

[dbkaplun]

@mrdoob it is working well so far. I would be interested to see how it might be implemented with WebGLRenderer though.

[mrdoob]

@dbkaplun I think that's exactly what this thread is about.

[dbkaplun]

Okay. It seemed like it was about rendering THREE server-side in general!

[dukuo]

I'v tried to run your gists @bsergean but so far I'v only had this for output using Ubuntu 16.04 in a Virtualbox VM (Windows 10 x64 host)

ubuntu@ubuntu:~/dev/08be90a2f21205062ccc$ xvfb-run -s "-ac -screen 0 1280x1024x24" npm start

> [email protected] start /home/ubuntu/dev/08be90a2f21205062ccc
> coffee offscreen_sample.coffee

parsed ! undefined undefined
undefined
THREE.WebGLRenderer 95
THREE.WebGLRenderer: _canvas.addEventListener is not a function
events.js:183
      throw er; // Unhandled 'error' event
      ^

TypeError: Cannot read property 'getShaderPrecisionFormat' of undefined
    at getMaxPrecision (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/three/build/three.js:14830:13)
    at new WebGLCapabilities (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/three/build/three.js:14859:22)
    at initGLContext (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/three/build/three.js:21926:19)
    at new WebGLRenderer (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/three/build/three.js:21976:3)
    at render (/home/ubuntu/dev/08be90a2f21205062ccc/offscreen_sample.coffee:35:16)
    at exports.PNG.<anonymous> (/home/ubuntu/dev/08be90a2f21205062ccc/offscreen_sample.coffee:136:5)
    at emitOne (events.js:116:13)
    at exports.PNG.emit (events.js:211:7)
    at exports.PNG.<anonymous> (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/png.js:37:10)
    at emitOne (events.js:116:13)
    at module.exports.emit (events.js:211:7)
    at module.exports.ParserAsync._complete (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/parser-async.js:153:8)
    at emitOne (events.js:116:13)
    at module.exports.emit (events.js:211:7)
    at module.exports.complete (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/filter-parse-async.js:19:12)
    at module.exports.Filter._reverseFilterLine (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/filter-parse.js:169:10)
    at module.exports.ChunkStream._processRead (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/chunkstream.js:174:13)
    at module.exports.ChunkStream._process (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/chunkstream.js:193:14)
    at module.exports.ChunkStream.write (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/chunkstream.js:61:8)
    at Inflate.<anonymous> (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/parser-async.js:94:9)
    at emitOne (events.js:116:13)
    at Inflate.emit (events.js:211:7)
    at addChunk (_stream_readable.js:263:12)
    at readableAddChunk (_stream_readable.js:250:11)
    at Inflate.Readable.push (_stream_readable.js:208:10)
    at Inflate.Transform.push (_stream_transform.js:147:32)
    at Zlib.callback (zlib.js:474:14)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `coffee offscreen_sample.coffee`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ubuntu/.npm/_logs/2018-08-30T06_39_19_283Z-debug.log

I have installed everything from headless-gl required libs for linux including xvfb but it seems like it does not have the correct context to render to... Can anyone shed some light on the matter? I have tried many ways to run it! @mrdoob

Thanks

[bsergean]

Back then (I wrote that almost 3 years) ago I was using a different version of three.js, and CentOS 7.0 I believe.
Now that I've discovered docker I would use that with pinned versions of everything ...

THREE.WebGLRenderer 95
95 ... from memory I was using cutting edge three.js 0.72 or at least in the 'seventies' / 'disco' numbers.

On Aug 29, 2018, at 11:46 PM, Dilip [e-mail] wrote:

I'v tried to run your gists @bsergean https://github.com/bsergean but so far I'v only had this for output using Ubuntu 16.04 in a Virtualbox VM (Windows 10 x64 host)

ubuntu@ubuntu:~/dev/08be90a2f21205062ccc$ xvfb-run -s "-ac -screen 0 1280x1024x24" npm start

[email protected] start /home/ubuntu/dev/08be90a2f21205062ccc
coffee offscreen_sample.coffee

parsed ! undefined undefined
undefined
THREE.WebGLRenderer 95
THREE.WebGLRenderer: _canvas.addEventListener is not a function
events.js:183
throw er; // Unhandled 'error' event
^

TypeError: Cannot read property 'getShaderPrecisionFormat' of undefined
at getMaxPrecision (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/three/build/three.js:14830:13)
at new WebGLCapabilities (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/three/build/three.js:14859:22)
at initGLContext (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/three/build/three.js:21926:19)
at new WebGLRenderer (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/three/build/three.js:21976:3)
at render (/home/ubuntu/dev/08be90a2f21205062ccc/offscreen_sample.coffee:35:16)
at exports.PNG. (/home/ubuntu/dev/08be90a2f21205062ccc/offscreen_sample.coffee:136:5)
at emitOne (events.js:116:13)
at exports.PNG.emit (events.js:211:7)
at exports.PNG. (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/png.js:37:10)
at emitOne (events.js:116:13)
at module.exports.emit (events.js:211:7)
at module.exports.ParserAsync._complete (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/parser-async.js:153:8)
at emitOne (events.js:116:13)
at module.exports.emit (events.js:211:7)
at module.exports.complete (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/filter-parse-async.js:19:12)
at module.exports.Filter._reverseFilterLine (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/filter-parse.js:169:10)
at module.exports.ChunkStream._processRead (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/chunkstream.js:174:13)
at module.exports.ChunkStream._process (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/chunkstream.js:193:14)
at module.exports.ChunkStream.write (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/chunkstream.js:61:8)
at Inflate. (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/parser-async.js:94:9)
at emitOne (events.js:116:13)
at Inflate.emit (events.js:211:7)
at addChunk (_stream_readable.js:263:12)
at readableAddChunk (_stream_readable.js:250:11)
at Inflate.Readable.push (_stream_readable.js:208:10)
at Inflate.Transform.push (_stream_transform.js:147:32)
at Zlib.callback (zlib.js:474:14)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: coffee offscreen_sample.coffee
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/ubuntu/.npm/_logs/2018-08-30T06_39_19_283Z-debug.log

I have installed everything from headless-gl required libs for linux including xvfb but it seems like it does not have the correct context to render to... Can anyone shed some light on the matter? I have tried many ways to run it! @mrdoob https://github.com/mrdoob
Thanks

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/mrdoob/three.js/issues/7085#issuecomment-417207665, or mute the thread https://github.com/notifications/unsubscribe-auth/ALTvUZSiI_P75BBuWu-yBCg4aPFqLZzFks5uV4o-gaJpZM4F2SVx.

[dukuo]

I'll try downgrading to see if it works then.. weird thing is that when importing and printing the go object it does have everything it needs, but then breaks when you pass it as context for a new WebGLRenderer :/

[bsergean]

What was crucial too is the version of headless.gl http://headless.gl/. This is where most of the low-level magic work.

Ok I found in the attic all the versions:

three = 0.72.0 (I have a good memory :)
gl = 2.1.4
The node.js version I used was 4.2.1

I'd recommend you use nvm to match all those versions.

CAVEAT / those were the version I used for the 'real program' I was writing back them, I hope they'll work too for those snippets.

On Aug 30, 2018, at 9:34 AM, Dilip [e-mail] wrote:

I'll try downgrading to see if it works then.. weird thing is that when importing and printing the go object it does have everything it needs, but then breaks when you pass it as context for a new WebGLRenderer :/

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/mrdoob/three.js/issues/7085#issuecomment-417383507, or mute the thread https://github.com/notifications/unsubscribe-auth/ALTvUUyB8BDbYXqhRNJei3_gRtDDnqL-ks5uWBQNgaJpZM4F2SVx.

[dukuo]

Wow you fo have good memory hahaha
. Will try that right now! Thanks a lot

[dukuo]

well, tried to downgrade gl to 2.1.4 and three to 0.72.0 and got this:

ubuntu@ubuntu:~/dev/08be90a2f21205062ccc$ xvfb-run -s "-ac -screen 0 1280x1024x24" node_modules/.bin/coffee offscreen_sample.coffee 
Error: Could not locate the bindings file. Tried:
 → /home/ubuntu/dev/08be90a2f21205062ccc/node_modules/gl/build/webgl.node
 → /home/ubuntu/dev/08be90a2f21205062ccc/node_modules/gl/build/Debug/webgl.node
 → /home/ubuntu/dev/08be90a2f21205062ccc/node_modules/gl/build/Release/webgl.node
 → /home/ubuntu/dev/08be90a2f21205062ccc/node_modules/gl/out/Debug/webgl.node
 → /home/ubuntu/dev/08be90a2f21205062ccc/node_modules/gl/Debug/webgl.node
 → /home/ubuntu/dev/08be90a2f21205062ccc/node_modules/gl/out/Release/webgl.node
 → /home/ubuntu/dev/08be90a2f21205062ccc/node_modules/gl/Release/webgl.node
 → /home/ubuntu/dev/08be90a2f21205062ccc/node_modules/gl/build/default/webgl.node
 → /home/ubuntu/dev/08be90a2f21205062ccc/node_modules/gl/compiled/4.2.1/linux/x64/webgl.node
    at bindings (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/bindings/bindings.js:93:9)
    at Object.<anonymous> (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/gl/webgl.js:4:35)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/gl/index.js:4:13)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/home/ubuntu/dev/08be90a2f21205062ccc/offscreen_sample.coffee:5:9)
    at Object.<anonymous> (/home/ubuntu/dev/08be90a2f21205062ccc/offscreen_sample.coffee:3:1)
    at Module._compile (module.js:435:26)
    at Object.exports.run (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/coffee-script/lib/coffee-script/coffee-script.js:173:23)
    at compileScript (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/coffee-script/lib/coffee-script/command.js:224:29)
    at compilePath (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/coffee-script/lib/coffee-script/command.js:174:14)
    at Object.exports.run (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/coffee-script/lib/coffee-script/command.js:98:20)
    at Object.<anonymous> (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/coffee-script/bin/coffee:15:45)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Function.Module.runMain (module.js:467:10)
    at startup (node.js:134:18)
    at node.js:961:3

then I tried with gl latest and three 0.72.0 and got this instead:

ubuntu@ubuntu:~/dev/08be90a2f21205062ccc$ xvfb-run -s "-ac -screen 0 1280x1024x24" node_modules/.bin/coffee offscreen_sample.coffee 
parsed ! undefined undefined
undefined
THREE.WebGLRenderer 72
THREE.WebGLRenderer: TypeError: _canvas.getContext is not a function
events.js:141
      throw er; // Unhandled 'error' event
      ^

TypeError: Cannot read property 'getExtension' of undefined
    at [object Object].get (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/three/three.js:23418:19)
    at new THREE.WebGLRenderer (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/three/three.js:19820:13)
    at render (/home/ubuntu/dev/08be90a2f21205062ccc/offscreen_sample.coffee:35:16)
    at [object Object].<anonymous> (/home/ubuntu/dev/08be90a2f21205062ccc/offscreen_sample.coffee:136:5)
    at emitOne (events.js:77:13)
    at [object Object].emit (events.js:169:7)
    at [object Object].<anonymous> (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/png.js:37:10)
    at emitOne (events.js:77:13)
    at [object Object].emit (events.js:169:7)
    at [object Object].ParserAsync._complete (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/parser-async.js:153:8)
    at emitOne (events.js:77:13)
    at [object Object].emit (events.js:169:7)
    at [object Object]._filter.Filter.complete (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/filter-parse-async.js:19:12)
    at [object Object].Filter._reverseFilterLine (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/filter-parse.js:169:10)
    at [object Object].ChunkStream._processRead (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/chunkstream.js:174:13)
    at [object Object].ChunkStream._process (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/chunkstream.js:193:14)
    at [object Object].ChunkStream.write (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/chunkstream.js:61:8)
    at Inflate.<anonymous> (/home/ubuntu/dev/08be90a2f21205062ccc/node_modules/pngjs/lib/parser-async.js:94:9)
    at emitOne (events.js:77:13)
    at Inflate.emit (events.js:169:7)
    at readableAddChunk (_stream_readable.js:146:16)
    at Inflate.Readable.push (_stream_readable.js:110:10)
    at Inflate.Transform.push (_stream_transform.js:128:32)
    at Zlib.callback (zlib.js:573:14)

@bsergean this is weeeeird

[mrdoob]

@dukuo do you mind moving the conversation to the forum?

[dukuo]

Will do @mrdoob, thanks

[dukuo]

If by any chance someone stumbles upon this thread like me, here's a forum discussion about the subject.