LoginSignup
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-01-01

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

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

主な変更点

  • 最初に 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);

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1