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

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

比較したライブラリ	バージョン	リリース日	サンプルコード
Three.js	r59	2013.07.19リリース	Three.js テスト - jsdo.it
Babylon.js	1.1.0	2013.08.08リリース	Babylon.js テスト - jsdo.it
CubicVR.js	v0.2.1	2011.11.27リリース	CubicVR.js テスト - jsdo.it

概要比較

比較項目	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 Canvas CSS3	WebGL	WebGL
特徴	一番人気があり情報量も多い。	最近登場した。MS の中の人が開発に係っている模様。	WebGL 特化の為、動作が軽め。物理エンジンとの相性がよさそう。

コード比較

比較項目	Three.js	Babylon.js	CubicVR.js
レンダラの初期化	var canvas = document.getElementById("canvas"); var renderer = new THREE.WebGLRenderer(); container.appendChild( renderer.domElement );	var canvas = document.getElementById("canvas"); 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); 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); light.position.set(0,150,0); scene.add(light);	var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene); light.diffuse = new BABYLON.Color3(1, 1, 1);	scene.bind(new CubicVR.Light({ position: [0, 0, 4], }));
表示する物体の作成	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);	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;	var cube = new CubicVR.Mesh({ primitive: { type: "box", size: 1.0, material: { color: [0.0, 0.0, 1.0] } }, compile: true, }); var obj = new CubicVR.SceneObject(cube); scene.bind(obj);
レンダリング	function render() { requestAnimationFrame(render); renderer.render(scene, camera); }; render();	var renderLoop = function () { scene.render(); }; engine.runRenderLoop(renderLoop);	CubicVR.MainLoop(function(timer, gl) { scene.render(); });