WebGL can be rendered on Heroku using with slimerjs!

.buildpacks

https://github.com/heroku/heroku-buildpack-nodejs#v87
https://github.com/ddollar/heroku-buildpack-apt
https://github.com/captain401/heroku-buildpack-xvfb
https://github.com/kjunichi/heroku-buildpack-slimerjs

README.md

First, We use heroku-buildpack-multi

heroku buildpacks:set https://github.com/ddollar/heroku-buildpack-multi.git

• .buildpacks
• Aptfile

Only when you use japanese(日本語の文字化け対応)

buildpack側ではなく、デプロイ対象のプロジェクト直下に.fontsディレクトリを作成。 ここに、

TakaoExGothic.ttf
TakaoExMincho.ttf
TakaoGothic.ttf
TakaoMincho.ttf
TakaoPGothic.ttf
TakaoPMincho.ttf
fonts-japanese-gothic.ttf
fonts-japanese-mincho.ttf

など、Linux(正確にはherokuのfontconfig)でつかえる日本語フォントを コピーして、これをデプロイ

mkdir .fonts

Check it(確認出来たこと)

Does Xvfb work correct?

heroku run bash
xvfb-run --server-args="-screen 0 640x480x16 -ac" xlogo& 
DISPLAY=:99 xwd -root >dump.xwd
convert dump.xwd dump.png
scp dump.png jibunno@mac.local:dump.png

Does slimerjs work correct?

heroku run bash
xvfb-run --server-args="-screen 0 1024x768x24" slimerjs ./cap3d.js http://jsrun.it/kjunichi/bnJXg
scp public/webglcap.png jibunno@mac.local:cap.png

*:jibunno@mac.local is your host/account.

expressjs?

/**
 * Module dependencies.
 */
var spawn = require('child_process').spawn;

var express = require('express');
var logfmt = require('logfmt');
var fs = require('fs');
var app = express();

// all environments
app.use(logfmt.requestLogger());
app.use(express.static(__dirname + '/public'));

app.get('/a', function(req, res) {
   res.send('Hello, world!');
});
app.get('/c',function(req,res) {
  var url=""
  if(!req.query.u || req.query.u.length==0) {
    url = "http://jsrun.it/kjunichi/bnJXg";
  } else {
    url = req.query.u;
  }
  var cmd = 'xvfb-run --server-args="-screen 0 1024x768x24" slimerjs ./cap3d.js '+ url;
  function shspawn(command) {
    return spawn('sh', ['-c', command]);
  }

  var child = shspawn(cmd);
  var buf="";

  child.stdout.on('data',function(data){
    buf=buf+data;
  });
  child.stderr.on('data',function (data){
    console.log('exec error: '+data);
  });

  child.on('close',function(code) {
    var img = fs.readFileSync('public/webglcap.png');
    //res.send('buf = '+ buf);
    //res.send('Hi!');
    res.writeHead(200, {'Content-Type': 'image/png' });
    res.end(img);
  });
});

var port = process.env.PORT || 5000;
app.listen(port,function(){
  console.log('Listening port on ' + port);
});

References

• http://stackoverflow.com/questions/28687120/is-it-possible-to-run-xvfb-on-heroku
• 俺がdockerでX11なアプリの表示確認をするやり方(ステマ)

Aptfile

x11-xkb-utils
xvfb
x11-xkb-utils
xfonts-100dpi
xfonts-75dpi
xfonts-scalable
xfonts-cyrillic
libxfont1
xvfb
x11-apps
imagemagick
firefox

cap3d.js

var page = require('webpage').create();
//var args = slimer.args;
//console.log(args);
var url = phantom.args[0];
if(url.length==0) {
  url='http://jsrun.it/kjunichi/bnJXg';
}
page.open(url, function (status) {
    page.viewportSize = { width:1024, height:768 };
    setTimeout(function(){
console.log("now cap start! : "+url);
    page.render('public/webglcap.png');
console.log("cap end.");
    slimer.exit()
},2000);
});