GLBoostで俺のキャラを動かす

GLBoost Advent Calendar 2016の4日目です。

Blenderで作ったモーション付きのモデルをGLBoostで動かすよ!

ミラクルキック

動作サンプル

GLBoostではglTFっつー形式のデータが読み込めるらしいです。

Blenderからは直接glTFのデータを出力することが出来ない(一応プラグインはあるみたいですが、なんか動かん…)ので、一度COLLADAで出力したものを変換します。

COLLADAで出力 テクスチャも中に含めちゃおう

出力したデータ(*.dae)はオンラインの変換サービスでお手軽に変換しましょう。

Collada 2 glTF

Collada 2 glTF

作ったglTFデータを読み込むぜ

GLBoostのexampleフォルダからスキニングアニメーションのサンプルを探して適当に改造します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var canvas = document.getElementById('canvas');
var context = new GLBoost.GLBoostMiddleContext(canvas);
var renderer = context.createRenderer({ clearColor: { red: 0.25, green: 0.25, blue: 0.25, alpha: 1 } });
var scene = context.createScene();
var light1 = context.createPointLight(new GLBoost.Vector3(1.25, 1.25, 1.25));
light1.translate = new GLBoost.Vector3(10, 10, 10);
scene.addChild(light1);
var light2 = context.createPointLight(new GLBoost.Vector3(1.0, 1.0, 1.0));
light2.translate = new GLBoost.Vector3(-10, 10, -10);
scene.addChild(light2);
var camera = context.createPerspectiveCamera({
eye: new GLBoost.Vector3(5, 3, 5),
center: new GLBoost.Vector3(0.0, 2, 0.0),
up: new GLBoost.Vector3(0.0, 1.0, 0.0),
}, {
fovy: 45.0,
aspect: 1.0,
zNear: 0.1,
zFar: 1000,
});
scene.addChild(camera);
var expression = context.createExpressionAndRenderPasses(1);
expression.renderPasses[0].scene = scene;
expression.prepareToRender();
var render = function() {
scene.setCurrentAnimationValue('time', (Date.now() % 1300) / 1000);
renderer.clearCanvas();
renderer.draw(expression);
requestAnimationFrame(render);
};
render();
var glTFLoader = GLBoost.GLTFLoader.getInstance();
glTFLoader
.loadGLTF(context, 'kick.gltf', 1, null)
.then(function(group) {
group.scale = new GLBoost.Vector3(1, 1, 1);
scene.addChild(group);
expression.prepareToRender();
});

出来たー(/・ω・)/

今回作ったもの

動作サンプル

githubリポジトリ