| 比較項目 |
GLBoost.js |
Three.js |
Babylon.js |
| レンダラの初期化 |
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}
});
|
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 = glBoostContext.createScene();
|
var scene = new THREE.Scene();
|
var scene = new BABYLON.Scene(engine);
|
| カメラの作成 |
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);
|
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);
|
| ライトの作成 |
var light = glBoostContext.createPointLight(
new GLBoost.Vector3(1, 1, 1));
light.translate = new GLBoost.Vector3(0,150,0);
scene.addChild(light);
|
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, 150, 0), scene);
light.diffuse = new BABYLON.Color3(1, 1, 1);
|
| 表示する物体の作成 |
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);
|
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 expression = glBoostContext.createExpressionAndRenderPasses(1);
expression.renderPasses[0].scene = scene;
expression.prepareToRender();
var render = function() {
renderer.clearCanvas();
renderer.draw(expression);
requestAnimationFrame(render);
};
|
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
|
var renderLoop = function () {
scene.render();
};
engine.runRenderLoop(renderLoop);
|
