Beginning gl.enchant

gl.enchant.js で始める
WebGL 3Dプログラミング
株式会社ユビキタスエンターテインメント
秋葉原リサーチセンター
高橋諒

12年4月23日月曜日

自己紹介

高橋諒
@rtsan
株式会社ユビキタスエンターテインメント
秋葉原リサーチセンター
gl.enchant.jsの開発


2Dと3Dの違いって？


例
シューティングゲーム


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

X

Y

(x, y)


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

Y

(x, y, z)
X
Z


Z軸が増えた

X

Y
Y

(x, y, z)

(x, y) X
Z


2Dは点回転


3Dは軸回転


回転が複雑になる


gl.enchant.js
とは


gl.enchant.jsとは

•enchant.jsのプラグイン
•WebGLを使ったゲームを作れる
•インターフェースは2Dとほぼ同じ


glMatrix.js

•行列・ベクトル演算のライブラリ
•内部で演算に使用している


gl.enchant.jsで
できること


モデルが読み込める


基本図形が使える


回転が簡単にできる

Yaw

Pitch
Roll


シェーディングができる

ambient + diffuse + specular = result
[0.3, 0.3, 0.3, 1.0] [0.5, 0.5, 0.5, 1.0] [0.5, 0.5, 0.5, 1.0]

0.3 0.5 0.5


視点が簡単に動かせる


物理エンジンが使える


gl.enchant.js
を使ってみる


やること
０．サンプル

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

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

３．視点を操作する


まずサンプル


Hello, Cube
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 };


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

プリミティブモデル


の場合
プリミティブ


primitive.gl.enchant.js

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

→ Cube(s)

平面→ Plane(s)


primitive.gl.enchant.js

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

円筒 → Cylinder(r, h)

トーラス → Torus(r, r2)


プリミティブ

game.onload = function() {
......
var box = new Cube(1);
......
scene.addChild(box);
......


テクスチャをはる

......
var box = new Cube(1);
box.mesh.texture =
new Texture('enchant.png');
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, 1.0] [0.5, 0.5, 0.5, 1.0]

0.3 0.5 0.5


の場合

モデル


collada.gl.enchant.js

•Collada(.dae)ファイルの読み込み
•ジョイント, アニメーションは未対応

•game.preloadから読み込める


モデルの読み込み

var game = new Game(640, 640);

game.preload('droid.dae');
game.onload = function() {
......

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

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


note

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

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


オブジェクトを操作する

•移動
•回転
•拡大縮小


表示オブジェクトの移動

•translate(x, y, z);

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

•どちらも平行移動
X
Z

平行移動だと

Z

translate(2, 0, 1)
X


直感的でない

Z

translate(2, 0, 1)
X


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

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

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

向きにあった移動

Z

forward(1.5)
X


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

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

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

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

•scaleX, scaleY, scaleZ
→ 拡大率の指定
Y
•scale(sx, sy, sz)
→ 拡大率をかける

X
Z

Z軸で縮小すると
droid.scaleZ = 0.0125;


視点を操作する

を使います

(Camera3D)


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


カメラの構造
注視点


カメラの構造
上ベクトル


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


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

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


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

•rotatePitch(rad)
→ カメラのX軸回転
Z
•rotateYaw(rad)
→ カメラの上ベクトル回転
X Y


視点の操作
center(0, 0, 0)

Z
X

Y

(0, 0, 10)

視点の操作
center(0, 0, 0)

Z
X

Y

(-10, 0, 10)

物理エンジンを使う


physics.gl.enchant.js

•手軽に物理シミュレートが利用できる
•拘束条件（ジョイント）・軟体
（布など）には未対応


physics.gl.enchant.js

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

•primitive.gl.enchant.jsも必要


変わるところ

•Scene3D() → PhyScene3D()

•Sprite3D() → PhySprite3D(rigid)

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


剛体

0.5

var rigid = new RigidCube(0.5, 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;

剛体を定義
r

h

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


合わせる
rigid

var player =
player.addChild(...);
new PhySprite(rigid);


ざくざくコイン


ざくざくコイン

•コイン落としゲーム
•ハッカソンで作った（３∼５時間）
•ほとんどの処理を物理エンジンに任せる


初期化

•コインを空中にランダムに設置
•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 ];


明るくなった


Beginning gl.enchant

More Related Content

Viewers also liked

Similar to Beginning gl.enchant

Recently uploaded

Beginning gl.enchant