CI環境のNightmareでWebGLを動かす方法や、NightmareでWebGL 2.0を動かす方法
osmesaとは
にあるように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) })
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も動かすことが出来る。