beginning gl.enchant

gl.enchant.js で始める WebGL 3Dプログラミング

株式会社ユビキタスエンターテインメント秋葉原リサーチセンター

高橋諒

12年4月23日月曜日

自己紹介

高橋 諒

株式会社ユビキタスエンターテインメント秋葉原リサーチセンター

@rtsan

gl.enchant.jsの開発

12年4月23日月曜日

2Dと3Dの違いって？

12年4月23日月曜日

例シューティングゲーム

12年4月23日月曜日

X

Y

オブジェクトの位置は(x, y)で表される

(x, y)

12年4月23日月曜日

XZ

Y

オブジェクトの位置は(x, y, z)で表される

(x, y, z)

12年4月23日月曜日

XZ

Y

(x, y, z)

X

Y

(x, y)

Z軸が増えた

12年4月23日月曜日

2Dは点回転

12年4月23日月曜日

3Dは軸回転

12年4月23日月曜日

回転が複雑になる

12年4月23日月曜日

gl.enchant.jsとは

12年4月23日月曜日

gl.enchant.jsとは

•enchant.jsのプラグイン

•WebGLを使ったゲームを作れる

•インターフェースは2Dとほぼ同じ

12年4月23日月曜日

glMatrix.js

•行列・ベクトル演算のライブラリ

•内部で演算に使用している

12年4月23日月曜日

gl.enchant.jsでできること

12年4月23日月曜日

モデルが読み込める

12年4月23日月曜日

基本図形が使える

12年4月23日月曜日

PitchRoll

Yaw

回転が簡単にできる

12年4月23日月曜日

シェーディングができる

ambient diffuse specular result[0.3, 0.3, 0.3, 1.0]

0.5 0.5[0.5, 0.5, 0.5, 1.0] [0.5, 0.5, 0.5, 1.0]

0.3

+ + =

12年4月23日月曜日

視点が簡単に動かせる

12年4月23日月曜日

物理エンジンが使える

12年4月23日月曜日

gl.enchant.jsを使ってみる

12年4月23日月曜日

やること０．サンプル

１．画面にオブジェクトを出す

２．オブジェクトを操作する（移動・回転）

３．視点を操作する

12年4月23日月曜日

まずサンプル

12年4月23日月曜日

1 enchant(); 2 window.onload = function() { 3 var game = new Game(640, 640); 4 game.onload = function() { 5 var scene = new Scene3D(); 6 var box = new Cube(); 7 scene.addChild(box); 8 }; 9 game.start(); 10 };

Hello, Cube

12年4月23日月曜日

12年4月23日月曜日

画面にオブジェクトを出す

プリミティブ モデル

12年4月23日月曜日

の場合プリミティブ

12年4月23日月曜日

primitive.gl.enchant.js

•基本図形の呼び出し箱 → Box(sx, sy, sz),

　 → Cube(s)

平面→ Plane(s)

12年4月23日月曜日

primitive.gl.enchant.js

•基本図形の呼び出し球 → Sphere(r)

円筒 → Cylinder(r, h)

トーラス → Torus(r, r2)

12年4月23日月曜日

12年4月23日月曜日

プリミティブ

var box = new Cube(1);

game.onload = function() { ......

...... scene.addChild(box); ......

12年4月23日月曜日

テクスチャをはる

var box = new Cube(1);

......

box.mesh.texture = new Texture('enchant.png');

...... scene.addChild(box);

box.mesh.texture.ambient = [ 0.8, 0.8, 0.8, 1.0 ];

12年4月23日月曜日

マテリアル

ambient diffuse specular result

各パラメータで陰影、反射の具合を設定する

[0.3, 0.3, 0.3, 1.0]

0.5 0.5[0.5, 0.5, 0.5, 1.0] [0.5, 0.5, 0.5, 1.0]

0.3

+ + =

12年4月23日月曜日

の場合

モデル

12年4月23日月曜日

collada.gl.enchant.js

•Collada(.dae)ファイルの読み込み

•ジョイント, アニメーションは未対応

•game.preloadから読み込める

12年4月23日月曜日

モデルの読み込み

game.preload('droid.dae');

var game = new Game(640, 640);

game.onload = function() { ......

scene.addChild(droid); ......

var droid = game.assets['droid.dae'].clone();

12年4月23日月曜日

note

•プリロードされたデータはSprite3Dのインスタンスとして格納されている

•clone()かset()で複製して使う

12年4月23日月曜日

オブジェクトを操作する

•移動

•回転

•拡大縮小

12年4月23日月曜日

XZ

Y

表示オブジェクトの移動

•translate(x, y, z);　

•x, y, zプロパティの変更

•どちらも平行移動

12年4月23日月曜日

平行移動だと

translate(2, 0, 1) X

Z

12年4月23日月曜日

直感的でない

translate(2, 0, 1) X

Z

12年4月23日月曜日

XZ

Y

表示オブジェクトの移動•forward(s)→ オブジェクトのZ軸方向移動

•sidestep(s)→ オブジェクトのX軸方向移動

•altitude(s)→ オブジェクトのY軸方向移動

12年4月23日月曜日

向きにあった移動

forward(1.5) X

Z

12年4月23日月曜日

PitchRoll

Yaw

表示オブジェクトの回転•rotateRoll(rad)→ オブジェクトのZ軸回転

•rotatePitch(rad)→ オブジェクトのX軸回転

•rotateYaw(rad)→ オブジェクトのY軸回転

12年4月23日月曜日

XZ

Y

表示オブジェクトの拡大縮小

•scaleX, scaleY, scaleZ→ 拡大率の指定

•scale(sx, sy, sz)→ 拡大率をかける

12年4月23日月曜日

droid.scaleZ = 0.0125;

Z軸で縮小すると

12年4月23日月曜日

視点を操作する

を使います

(Camera3D)

12年4月23日月曜日

カメラの構造カメラの位置

12年4月23日月曜日

カメラの構造注視点

12年4月23日月曜日

カメラの構造上ベクトル

12年4月23日月曜日

上ベクトルでカメラの傾きが決まる

12年4月23日月曜日

12年4月23日月曜日

•forward(s)→ カメラのZ軸方向移動

•sidestep(s)→ カメラのX軸方向移動

•altitude(s)→ カメラのY軸方向移動

X

Z

Y

カメラの移動

12年4月23日月曜日

X

Z

Y

•rotateRoll(rad)→ カメラの視線ベクトル回転

•rotatePitch(rad)→ カメラのX軸回転

•rotateYaw(rad)→ カメラの上ベクトル回転

カメラの回転

12年4月23日月曜日

center(0, 0, 0)

(0, 0, 10)

X

Z

Y

視点の操作

12年4月23日月曜日

X

Z

Y

center(0, 0, 0)

(-10, 0, 10)

視点の操作

12年4月23日月曜日

物理エンジンを使う

12年4月23日月曜日

physics.gl.enchant.js

•手軽に物理シミュレートが利用できる

•拘束条件（ジョイント）・軟体（布など）には未対応

12年4月23日月曜日

physics.gl.enchant.js

•ammo.jsが必要→ javascriptの物理演算ライブラリ

•primitive.gl.enchant.jsも必要

12年4月23日月曜日

変わるところ

•Scene3D() → PhyScene3D()

•Sprite3D() → PhySprite3D(rigid)

→ 剛体オブジェクトを渡す

12年4月23日月曜日

剛体

var rigid = new RigidCube(0.5, 5)

0.5

12年4月23日月曜日

変わるところ

•RigidBox(sx, sy, sz, mass)

→ 大きさ、質量を設定する

12年4月23日月曜日

Primitive

•Cube(s) → PhyCube(s, mass)

→ 剛体オブジェクトは内部で作られる

12年4月23日月曜日

力を加える•applyCentralImpulse(px, py, pz)→ 物体の中心に力を加える

•applyImpulse(px, py, pz, x, y, z)→ 指定した位置に力を加える

•clearForces()→ 物体にかかっている力をリセットする

12年4月23日月曜日

力を加える

(0, 25, -100)

12年4月23日月曜日

力を加える

12年4月23日月曜日

シミュレートの再生・停止

•PhyScene3D.play()→ 物理世界の時間をうごかす

•PhyScene3D.stop()→ 物理世界の時間をとめる

12年4月23日月曜日

当たり判定

•PhySprite3D.contactTest()→ 物理オブジェクト同士の厳密な当たり判定

12年4月23日月曜日

実例

12年4月23日月曜日

とんとんずもうゲーム

12年4月23日月曜日

とんとんずもう

•飛行機の中で作った（４０分くらい）

•ドロイドくん（.dae）を物理化

•クリックすることで力を与える（だけ）

12年4月23日月曜日

ドロイドくんの物理化var rigid = new RigidCylinder(0.3, 1, 5); var player = new PhySprite3D(rigid);

player.addChild( game.assets['droid.dae'].clone())

player.childNodes[0].y = -1;

12年4月23日月曜日

剛体を定義

var rigid = new PhyCylinder(0.3, 1, 5)

r

h

12年4月23日月曜日

合わせる

var player = new PhySprite(rigid);

rigid

player.addChild(...);

12年4月23日月曜日

ざくざくコイン

12年4月23日月曜日

ざくざくコイン

•コイン落としゲーム

•ハッカソンで作った（３～５時間）

•ほとんどの処理を物理エンジンに任せる

12年4月23日月曜日

初期化

•コインを空中にランダムに設置

•play()すると勝手にセットされる

12年4月23日月曜日

処理

•押し出しバーを周期的に動かす→ コインの挙動は物理エンジン任せ

•落ちたコインは当たり判定で回収

12年4月23日月曜日

tips

12年4月23日月曜日

暗い

12年4月23日月曜日

Q:空を描くには?

12年4月23日月曜日

A:でかい球で世界を包む

12年4月23日月曜日

var sky = new Sphere(50); sky.mesh.reverse(); sky.mesh.texture = new Texture('sky.png'); sky.mesh.texture.ambient = [ 1.0, 1.0, 1.0, 1.0 ]; sky.mesh.texture.diffuse = [ 0.0, 0.0, 0.0, 1.0 ]; sky.mesh.texture.specular = [ 0.0, 0.0, 0.0, 1.0 ]; scene.addChild(box);

空

12年4月23日月曜日

明るくなった

12年4月23日月曜日