GLBoost と他の主要 WebGL ライブラリを比較してみる

この記事は[GLBoost Advent Calender 2016](http://qiita.com/advent-calendar/2016/glboost)の３日目の記事です。

GLBoost は @emadurandal さんが絶賛開発中の国産 WebGL ライブラリです。

##概要比較

まずは GLBoost がどのようなライブラリなのか、他の主要 WebGL ライブラリと比較して特徴を見ていきたいと思います。

|比較項目       |GLBoost.js                                                                   |Three.js                                                  |Babylon.js                                              |
|:--------------|:---------------------------------------------------------------------------:|:--------------------------------------------------------:|:------------------------------------------------------:|
|最新バージョン |バージョン情報無し (2016.12.03)                                              |r83dev (2016.12.01)                                       |2.5beta (2016.12.02)                                    |
|ファイル名     |[glboost.js](https://github.com/emadurandal/GLBoost/blob/master/build/glboost.js) (429KB ※未圧縮)|[three.min.js](https://github.com/mrdoob/three.js/blob/dev/build/three.min.js) (490KB)  |[babylon.js](https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview%20release/babylon.js) (1.21MB)  |
|人気(watch/star/fork)|8 / 34 / 6                                                                  |1,863 / 29,218 / 10,112                                   |378 / 3,910 / 1,002                                     |
|作者           |[emadurandal](https://github.com/emadurandal)                                |[mrdoob](https://github.com/mrdoob/)                      |[deltakosh](https://github.com/deltakosh)               |
|ライセンス     |[MIT](https://github.com/emadurandal/GLBoost/blob/master/LICENSE)            |[MIT](https://github.com/mrdoob/three.js/blob/master/LICENSE)|[Apache v2](https://github.com/BabylonJS/Babylon.js) |
|特徴           |純国産ライブラリ。日本語でのサポートが手厚い。                               |一番人気があり情報量も多い。                              |MSの中の人が中心に開発。開発言語はTypeScript            |
|座標系         |右手座標系                                                                   |右手座標系                                                |左手座標系                                              |
|レンダラの種類 |WebGL/WebGL2                                                                 |WebGL/Canvas/CSS3                                         |WebGL                                                   |
|glTFファイル対応|[標準](https://github.com/emadurandal/GLBoost/blob/master/src/js/middle_level/loader/GLTFLoader.js) |[Plugin](https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/GLTFLoader.js)|[Plugin](https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview%20release/loaders/babylon.glTFFileLoader.min.js)|
|GitHub         |[Link](https://github.com/emadurandal/GLBoost)                               |[Link](https://github.com/mrdoob/three.js/)               |[Link](https://github.com/BabylonJS/Babylon.js)         |
|APIリファレンス|[Link](http://glboost.org/api/)                                              |[Link](https://threejs.org/docs/index.html)               |[Link](https://doc.babylonjs.com/)                      |
|サンプル       |[Link](http://gitcdn.xyz/repo/emadurandal/GLBoost/master/examples/index.html)|[Link](https://threejs.org/examples/)                     |[Link](http://www.babylonjs.com/)                       |
|サポート掲示板 |[Link](https://gitter.im/emadurandal/GLBoost)                                |[Link](http://stackoverflow.com/questions/tagged/three.js)|[Link](http://www.html5gamedevs.com/forum/16-babylonjs/)|

##コード比較

次にコードを眺めながら、違いを見ていきたいと思います。

<table>
<tr>
<th>比較項目</th>
<th>GLBoost.js</th>
<th>Three.js</th>
<th>Babylon.js</th>
</tr>

<tr>
<td>レンダラの初期化</td>
<td>
<pre>
var canvas = document.getElementById("canvas");
var glBoostContext = new GLBoost.GLBoostMiddleContext(canvas);
var renderer = glBoostContext.createRenderer({
  clearColor: {red: 0.0, green: 0.0, blue: 0.0, alpha: 1}
});
</pre>
</td>
<td>
<pre>
var canvas = document.getElementById("canvas");
var renderer = new THREE.WebGLRenderer();
container.appendChild( renderer.domElement );
</pre>
</td>
<td>
<pre>
var canvas = document.getElementById("canvas");
var engine = new BABYLON.Engine(canvas, true);
</pre>
</td>
</tr>

<tr>
<td>シーンの作成</td>
<td>
<pre>
var scene = glBoostContext.createScene();
</pre>
</td>
<td>
<pre>
var scene = new THREE.Scene();
</pre>
</td>
<td>
<pre>
var scene = new BABYLON.Scene(engine);
</pre>
</td>
</tr>

<tr>
<td>カメラの作成 </td>
<td>
<pre>
var camera = glBoostContext.createCamera({
  eye: new GLBoost.Vector3(0.0, 0.0, 200.0),
  center: new GLBoost.Vector3(0.0, 0.0, 0.0),
  up: new GLBoost.Vector3(0.0, 1.0, 0.0)
}, {
  fovy: 45.0,
  aspect: 1.0,
  zNear: 0.1,
  zFar: 1000.0
});
scene.addChild(camera);
</pre>
</td>
<td>
<pre>
var camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
camera.position.z = 200;
</pre>
</td>
<td>
<pre>
var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, 0), scene);
</pre>
</td>
</tr>

<tr>
<td>ライトの作成 </td>
<td>
<pre>
var light = glBoostContext.createPointLight(
  new GLBoost.Vector3(1, 1, 1));
light.translate = new GLBoost.Vector3(0,150,0);
scene.addChild(light);
</pre>
</td>
<td>
<pre>
var light = new THREE.PointLight(0xffffff);
light.position.set(0,150,0);
scene.add(light);
</pre>
</td>
<td>
<pre>
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 150, 0), scene);
light.diffuse = new BABYLON.Color3(1, 1, 1);
</pre>
</td>
</tr>

<tr>
<td>表示する物体の作成</td>
<td>
<pre>
var material = glBoostContext.createClassicMaterial();
material.diffuseColor = new GLBoost.Vector(0,1,0,1);
var geometry = 
  glBoostContext.createCube(
    new GLBoost.Vector3(100,100,100), 
    new GLBoost.Vector4(1,1,1,1));
var cube = glBoostContext.createMesh(geometry, material);
scene.addChild(cube);
</pre>
</td>
<td>
<pre>
var geometry = new THREE.CubeGeometry(100, 100, 100);
var material = new THREE.MeshBasicMaterial({color: "blue"});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
</pre>
</td>
<td>
<pre>
var cube = BABYLON.Mesh.CreateBox("Cube", 1.0, scene);
var material = new BABYLON.StandardMaterial("default", scene);
material.emissiveColor = new BABYLON.Color3(0.0, 0.0, 1.0);
cube.material = material;
</pre>
</td>
</tr>

<tr>
<td>レンダリング</td>
<td>
<pre>
var expression = glBoostContext.createExpressionAndRenderPasses(1);
expression.renderPasses[0].scene = scene;
expression.prepareToRender();

var render = function() {
  renderer.clearCanvas();
  renderer.draw(expression);
  requestAnimationFrame(render);
};
</pre>
</td>
<td>
<pre>
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
};
render();
</pre>
</td>
<td>
<pre>
var renderLoop = function () {
  scene.render();
};
engine.runRenderLoop(renderLoop);
</pre>
</td>
</tr>

</table>

なんとなく、雰囲気が伝わったでしょうか？

##その他比較サンプル

最後に、各種サンプルへのリンクを紹介したいと思います。GLBoost への移植等の参考になれば幸いです。

- 各種 WebGL ライブラリによる基本図形表示サンプル
  http://qiita.com/cx20/items/0fa19c96aa6470d98807

- 各種 WebGL ライブラリと 3D 物理演算ライブラリの組み合わせ
  http://qiita.com/cx20/items/3ebed669fb9c9e797935

- 各種 WebGL ライブラリの glTF 対応状況
  https://github.com/cx20/gltf-test