beginning gl.enchant

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

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

高橋諒

12年4月23日月曜日

自己紹介

高橋諒

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

@rtsan

gl.enchant.jsの開発


2Dと3Dの違いって？


例シューティングゲーム


X

Y

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

(x, y)


XZ

Y

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

(x, y, z)


XZ

Y

(x, y, z)

X

Y

(x, y)

Z軸が増えた


2Dは点回転


3Dは軸回転


回転が複雑になる


gl.enchant.jsとは


gl.enchant.jsとは

•enchant.jsのプラグイン

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

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


glMatrix.js

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

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


gl.enchant.jsでできること


モデルが読み込める


基本図形が使える


PitchRoll

Yaw

回転が簡単にできる


シェーディングができる

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

+ + =


視点が簡単に動かせる


物理エンジンが使える


gl.enchant.jsを使ってみる


やること０．サンプル

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

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

３．視点を操作する


まずサンプル


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


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

プリミティブモデル


の場合プリミティブ


primitive.gl.enchant.js

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

　 → Cube(s)

平面→ Plane(s)


primitive.gl.enchant.js

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

円筒 → Cylinder(r, h)

トーラス → Torus(r, r2)


プリミティブ

var box = new Cube(1);

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

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


テクスチャをはる

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 ];


マテリアル

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

+ + =


の場合

モデル


collada.gl.enchant.js

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

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

•game.preloadから読み込める


モデルの読み込み

game.preload('droid.dae');

var game = new Game(640, 640);

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

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

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


note

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

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


オブジェクトを操作する

•移動

•回転

•拡大縮小


XZ

Y

表示オブジェクトの移動

•translate(x, y, z);　

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

•どちらも平行移動


平行移動だと

translate(2, 0, 1) X

Z


直感的でない

translate(2, 0, 1) X

Z


XZ

Y

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

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

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


向きにあった移動

forward(1.5) X

Z


PitchRoll

Yaw

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

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

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


XZ

Y

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

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

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


droid.scaleZ = 0.0125;

Z軸で縮小すると


視点を操作する

を使います

(Camera3D)


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


カメラの構造注視点


カメラの構造上ベクトル


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


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

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

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

X

Z

Y

カメラの移動


X

Z

Y

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

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

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

カメラの回転


center(0, 0, 0)

(0, 0, 10)

X

Z

Y

視点の操作


X

Z

Y

center(0, 0, 0)

(-10, 0, 10)

視点の操作


物理エンジンを使う


physics.gl.enchant.js

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

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


physics.gl.enchant.js

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

•primitive.gl.enchant.jsも必要


変わるところ

•Scene3D() → PhyScene3D()

•Sprite3D() → PhySprite3D(rigid)

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


剛体

var rigid = new RigidCube(0.5, 5)

0.5


変わるところ

•RigidBox(sx, sy, sz, mass)

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


Primitive

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

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


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

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

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


力を加える

(0, 25, -100)


力を加える


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

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

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


当たり判定

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


実例


とんとんずもうゲーム


とんとんずもう

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

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

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


ドロイドくんの物理化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;


剛体を定義

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

r

h


合わせる

var player = new PhySprite(rigid);

rigid

player.addChild(...);


ざくざくコイン


ざくざくコイン

•コイン落としゲーム

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

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


初期化

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

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


処理

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

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


tips


暗い


Q:空を描くには?


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


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);

空


明るくなった


beginning gl.enchant

Technology