WebGL 対応のライブラリの比較

WebGL 対応のライブラリとしては Three.js が有名ですが、他にもライブラリが数多くあります。
その中で、最近、見かけるライブラリとして Babylon.js と CubicVR.js を Three.js と比較してみました。

|比較したライブラリ|バージョン|リリース日        |サンプルコード                        |
|:-----------------|:--------:|:----------------:|:-------------------------------------|
|Three.js          |r59       |2013.07.19リリース|[Three.js テスト - jsdo.it](http://jsdo.it/cx20/exxC)|
|Babylon.js        |1.1.0     |2013.08.08リリース|[Babylon.js テスト - jsdo.it](http://jsdo.it/cx20/hiLr)|
|CubicVR.js        |v0.2.1    |2011.11.27リリース|[CubicVR.js テスト - jsdo.it](http://jsdo.it/cx20/p3YO)|

##概要比較
|比較項目         |Three.js   |Babylon.js |CubicVR.js |
|:----------------|:---------:|:---------:|:---------:|
|最新バージョン|r59 (2013.07.19リリース)|1.1.0 (2013.08.08リリース)|v0.2.1 (2011.11.27リリース)|
|GitHub|https://github.com/mrdoob/three.js/|https://github.com/BabylonJS/Babylon.js|https://github.com/cjcliffe/CubicVR.js/|
|Demo|http://threejs.org/|http://www.babylonjs.com/|http://www.cubicvr.org/cubicvr-js/webgl-cubicvr|
|Tutorial|http://www.aerotwist.com/tutorials/getting-started-with-three-js/|https://github.com/BabylonJS/Babylon.js/wiki/Tutorials|https://github.com/cjcliffe/CubicVR.js/wiki/Guide:-Getting-Started|
|座標系|右手座標系|左手座標系|右手座標系|
|レンダラの種類|WebGL<br />Canvas<br />CSS3<br />|WebGL|WebGL|
|特徴|一番人気があり情報量も多い。|最近登場した。MS の中の人が開発に係っている模様。|WebGL 特化の為、動作が軽め。物理エンジンとの相性がよさそう。||

##コード比較
|比較項目         |Three.js   |Babylon.js |CubicVR.js |
|:----------------|:----------|:----------|:----------|
|レンダラの初期化 |var canvas = document.getElementById("canvas");<br />var renderer = new THREE.WebGLRenderer();<br />container.appendChild( renderer.domElement );<br />|var canvas = document.getElementById("canvas");<br />var engine = new BABYLON.Engine(canvas, true);||
|シーンの作成     |var scene = new THREE.Scene();|var scene = new BABYLON.Scene(engine);|var scene = new CubicVR.Scene(canvas.width, canvas.height, 80);|
|カメラの作成     |var camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);<br />camera.position.z = 200;|var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, 0), scene);|scene.camera.position = [0, 0, 10];|
|ライトの作成     |var light = new THREE.PointLight(0xffffff);<br />light.position.set(0,150,0);<br />scene.add(light);|var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);<br />light.diffuse = new BABYLON.Color3(1, 1, 1);|scene.bind(new CubicVR.Light({<br />    position: [0, 0, 4],<br />}));|
|表示する物体の作成|var geometry = new THREE.CubeGeometry(100, 100, 100);<br />var material = new THREE.MeshBasicMaterial({color: "blue"});<br />var cube = new THREE.Mesh( geometry, material );<br />scene.add(cube);|var cube = BABYLON.Mesh.CreateBox("Cube", 1.0, scene);<br />var material = new BABYLON.StandardMaterial("default", scene);<br />material.emissiveColor = new BABYLON.Color3(0.0, 0.0, 1.0);<br />cube.material = material;|var cube = new CubicVR.Mesh({<br />    primitive: {<br />        type: "box",<br />        size: 1.0,<br />        material: {<br />            color: [0.0, 0.0, 1.0]<br />        }<br />    },<br />    compile: true,<br />});<br /><br />var obj = new CubicVR.SceneObject(cube);<br />scene.bind(obj);|
|レンダリング     |function render() {<br />    requestAnimationFrame(render);<br />    renderer.render(scene, camera);<br />};<br />render();|var renderLoop = function () {<br />    scene.render();<br />};<br /><br />engine.runRenderLoop(renderLoop);|CubicVR.MainLoop(function(timer, gl) {<br />    scene.render();<br />});|