Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
37
Help us understand the problem. What is going on with this article?
@cx20

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

More than 5 years have passed since last update.

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();
});
37
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
cx20
プログラマ(マイクロソフト系の言語を使用することが多いです。) 最近は、JavaScript のライブラリを色々と試して遊んでます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
37
Help us understand the problem. What is going on with this article?