先日、長男と自分はドラえもんの映画を見に行き、その間、奥さんと次男は、駅で電車を眺めたり、買い物をしていました。@kjunichiです。

osmesaとは

http://www.mesa3d.org/osmesa.html

にあるようにOpenGLをOff-screen Renderingできるようにするライブラリ。

要するにソフトウェア的にOpenGLを実装しているライブラリ。

なぜosmesaで動かすの

osmesaで動かすとOpenGLに対応したビデオカードが使えないような環境、CI環境のように画面系のテストの為にXvfbサーバを動かしている環境でWebGLが動かせるようになる。ただし、そうとう速いマシンでないと、実用的な速度では動かない模様。

そんな訳で、今回はLinuxでの話。

libosmesa.soの作成

Nightmare内のElectronはChromiumをベースにしており、このベースのChromiumは起動オプションを指定することで、OpenGLのレンダリングをosmesaで行うことが出来る。

このosmesaを指定した際に、実はlibosmesa.soというライブラリが別途必要になる。

このlibosmesa.soライブラリは、Chromiumのソースツリーからosmesaをターゲットに指定することで、作成することができる。

mkdir chromium
cd chromium
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
export PATH=PATH:/path/to/depot_tools
fetch --nohooks --no-history chromium
./build/install-build-deps.sh
gclient runhooks
cd src
gn gen out/Default
ninja -C out/Default osmesa

自分の環境(Ubuntu15.10)ではinstall-build-deps.shがすんなり動かなかったが、依存で文句言われたarm関連のパッケージを手動で入れて、install-build-deps.shを再度実行することで、解決した。

osmesaのみの指定であれば、chormeを指定たChromium本体のビルドとは違い、すぐにビルドが終わる。

Nightmareをosmesaで動かし、WebGLのスクリーンショットを撮る

libosmesa.soが出来たら、Nightmareでこれを利用する出来るようにする。

Nightmareをosmesaで動かす

Nightmare内のElectronで使えるように、libosmesa.soをコピーする。

npm install nightmare
cp ~/chromium/src/out/Default/libosmesa.so node_modules/electron-prebuilt/dist/

あとは、以下のようなNightmareを動かすコードを記述すれば、osmesaを使ってNightmareが動く。これで、Xvfb等でNightmareを動かしても、WebGLの実行が可能となる。

const Nightmare = require('nightmare');
const nightmare = Nightmare({ 
  show: true,
  switches: {'use-gl':'osmesa'}
});

WebGLなページのスクリーンショットを撮るサンプル

const Nightmare = require('nightmare');
const nightmare = Nightmare({ show: true,
switches: {'use-gl':'osmesa'}
 });

var dmy = nightmare
  .goto('http://get.webgl.org/')
  .wait(2000)
  .screenshot('webgl.png')
  .wait(250)
  .evaluate(() => {
    return location.origin + location.pathname;
  })
  .end()
  .then((result) => {
    console.log(result)
  })

f:id:kjw_junichi:20160324211323p:plain

NightmareでWebGL 2.0を動かす

WebGLが普通に利用できる環境では以下の様にosmesaの指定の代わりに、 Canary Chrome向けのWebGL 2.0を利用可能にするオプションを指定することで、 NightmareでもWebGL 2.0が動かせる。

app.commandLine.appendSwitch('enable-unsafe-es3-apis');
const nightmare = Nightmare({ show: true,
switches: {'enable-unsafe-es3-apis':''}
 });

課題

osmesaだとWebGL 2.0なページは動かない

use-gl=osmesaとenable-unsafe-es3-apisを指定しても、WebGL2.0だと動かない。

まとめ

Nightmareでは

const nightmare = Nightmare({ show: true,
 switches: {
  'オプション名1':'オプション値1',
  'オプション名2':'オプション値2',
 }
});

といった具合に、Electronのオプションを指定することが出来る。また、osmesaも動かすことが出来る。

参考資料

WebGL2 Support? #1781

non vorrei lavorare

昔はおもにプログラミングやガジェット系、今は？

CI環境のNightmareでWebGLを動かす方法や、NightmareでWebGL 2.0を動かす方法