2016年における GLBoost の主な変更点について

この記事はGLBoost Advent Calender 2016の５日目の記事です。

GLBoost は2016年の１年間のアップデートでいくつかの破壊的変更機能改善が行われています。
古いコードを最新ライブラリに移植する際の備忘録としてまとめてみました。

主な変更点

• 最初に glBoostContext を生成するようになった
• 「new GLBoost～」→「glBoostContext.create～」に変更
• 「scene.add()」→「scene.addChild()」に変更
• 「Camera」→「PerspectiveCamera」に変更
• 「scene.prepareForRender()」→「expression.prepareToRender()」に変更
• renderer.draw(scene)」→「renderer.draw(expression)」に変更

##新旧コード比較

比較項目	新（GLBoost.js r1）	旧（GLBoost.js 2016.3.21 版）
レンダラの初期化	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 GLBoost.Renderer({ clearColor: {red: 0.0, green: 0.0, blue: 0.0, alpha: 1} });
シーンの作成	var scene = glBoostContext.createScene();	var scene = new GLBoost.Scene();
カメラの作成	var camera = glBoostContext.createPerspectiveCamera({ 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 GLBoost.Camera({ 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.add(camera);
ライトの作成	var light = glBoostContext.createPointLight( new GLBoost.Vector3(1, 1, 1)); light.translate = new GLBoost.Vector3(0,150,0); scene.addChild(light);	var light = new GLBoost.PointLight( new GLBoost.Vector3(1, 1, 1)); light.translate = new GLBoost.Vector3(0,150,0); scene.add(light);
表示する物体の作成	var geometry = glBoostContext.createCube( new GLBoost.Vector3(100,100,100), new GLBoost.Vector4(1,1,1,1)); var material = glBoostContext.createClassicMaterial(); var texture = glBoostContext.createTexture("texture.jpg"); material.setTexture(texture); material.shaderClass = GLBoost.PhongShader; var cube = glBoostContext.createMesh(geometry, material); scene.addChild(cube);	var geometry = new GLBoost.Cube( new GLBoost.Vector3(100,100,100), new GLBoost.Vector3(1,1,1)); var material = new GLBoost.ClassicMaterial(); var texture = new GLBoost.Texture("texture.jpg"); material.texture = texture; var shader = new GLBoost.PhongShader('#world'); material.shader = shader; var cube = new GLBoost.Mesh(geometry, material); scene.add(cube);
レンダリング	var expression = glBoostContext.createExpressionAndRenderPasses(1); expression.renderPasses[0].scene = scene; expression.prepareToRender(); var render = function() { renderer.clearCanvas(); renderer.draw(expression); requestAnimationFrame(render); };	scene.prepareToRender(); var render = function() { renderer.clearCanvas(); renderer.draw(scene); requestAnimationFrame(render); };

追加された主な機能

// カメラコントローラー
camera.cameraController = glBoostContext.createCameraController();

// 軸表示ツール
// usage : createAxisGizmo(length)
var axisGizmo = glBoostContext.createAxisGizmo(10);
scene.addChild(axisGizmo);

// グリッド表示ツール
// usage : createGridGizmo(length, division, isXZ, isXY, isYZ, colorVec)
var gridGizmo = glBoostContext.createGridGizmo(3, 4, true, false, true, new GLBoost.Vector4(1, 1, 1, 1));
scene.addChild(gridGizmo);