Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
gl.enchant.jsで  3Dゲーム制作    2012年2月29日      高橋諒
自己紹介名前: 高橋諒twitter: @rtsan 所属: UEI/ARC (アルバイト)gl.enchant.jsの開発者
gl.enchant.js     とは
enchant.js +   WebGL
WebGLって?javascriptで制御OpenGL ES 2.0のバインドプログラマブルシェーダ<canvas>に描画する
WebGLの壁OpenGL: 低レイヤーのAPI固定シェーダがないそもそも3Dの座標変換が難しいモデル読み込みも自分で実装
gl.enchant.js   なら簡単
Hello, Cube
HelloCube/main.js 1 enchant(); 2 window.onload = function() { 3     var game = new Game(320, 320); 4     game.onload = fun...
HelloCube/index.html 1   <html> 2 3   <head> 4   <title>Hello, Cube</title> 5   <meta http-equiv="content-type" content="t...
glMatrix-0.9.6.min.jsenchant.jsgl.enchant.jsprimitive.gl.enchant.jsmain.js
glMatrix行列計算用ライブラリvec3, mat3, mat4, quat4
primitive.gl.enchant.js   gl.enchant.js用のプラグイン   立方体、球などの基本図形
読み込み順  外部ライブラリ       ↓    enchant.js        ↓ enchant.jsプラグイン       ↓ (プラグインのプラグイン)       ↓     スクリプト
プリミティブと  モデル
流れシーンを作るスプライトを準備するシーンに追加する
シーンを作る9 var scene = new Scene3D();    表示ツリーのルート    子(Sprite3D)を追加する    カメラ・光源などの環境を設定する
スプライトを準備する10 var box = new Sprite3D();     表示オブジェクト     回転・移動・拡大等の操作     自身も子を持つことができる
スプライトを準備する12 box.mesh = Mesh.createCube(0.5);     meshプロパティが表示上の実体     primitive.gl.enchant.jsで     使えるようになる     引数は立方体の大きさ
Mesh                  頂点データ                 (-1, 1, -1)                                   (1, 1, -1)    (-1, 1, 1)        ...
Mesh                  頂点データ                 (-1, 1, -1)                                   (1, 1, -1)    (-1, 1, 1)        ...
スプライトを準備する14 box.mesh.texture =       new Texture(game.assets[...]);     テクスチャを設定する     テクスチャはmeshのUVマップに     そって貼られる
UVマッピング
スプライトを準備する16 box.mesh.texture.ambient =      [ 0.7, 0.7, 0.7, 1.0 ];     テクスチャの質感(マテリアル)     を設定する     シェーディングに使用される     d...
マテリアル      各パラメータで陰影、反射の具合を設定する  ambient + diffuse + specular = result[0.3, 0.3, 0.3, 1.0]   [0.5, 0.5, 0.5, 1.0]   [0.5, ...
スプライトを準備する21 var droid = game.assets[‘../img/       droid.dae’].clone();     preloadされたモデルは     Sprite3Dとして格納される     clone...
シーンに追加する31 scene.addChild(box);     Scene3Dに追加することで表示     removeChild()で削除
scene box             droid(cube)           (body)          (head)      (arm)
オブジェクトの操作
流れイベントリスナを設定するハンドラ内で動きの処理を書く
イベント28 box.addEventListener(       Event.TOUCH_MOVE, function(e) {       ... });     イベントリスナを追加
他に…Event.ENTER_FRAMEEvent.INPUT_STARTEvent.INPUT_CHANGEEvent.INPUT_END
他に…Event.TOUCH_STARTEvent.TOUCH_ENDEvent.ADDED_TO_SCENEEvent.REMOVED_FROM_SCENE
移動32 this.y += (this.oldY - e.y) * 0.01;     x, y, zプロパティの操作     translate()
移動             常に平行移動translate(2, 1, -1)                          (2, 1, -1)    y        xz             (0, 0, 0)
回転31 mat4.rotateY(this.rotation, rot);     glMatrixを使っている     rotationプロパティの操作
回転行列mat4.rotateY(droid.rotation, Math.PI/2);              0   0   1   0              0   1   0   0             -1   0   0 ...
回転行列                   (1, 1, 1)    y        x   Pi/2z
回転行列               cosθ   0 -sinθ   0                  0   1     0   0   rotY(θ) =               sinθ   0 cosθ    0       ...
回転行列0   0 -1   0   1       -10   1 0    0   1        11   0 0    0   1                   =    10   0 0    1   1        1
回転行列        (-1, 1, 1)     (1, 1, 1)    y         x      Pi/2z
回転39 this.rotationApply(       new Quat(0, 1, 0, Math.PI/180));     クォータニオンを使った任意軸回転
任意軸回転rotationSet(new Quat(0.5, 0.5, 0, Math.PI/2));                  3.14/2               v(0.5, 0.5, 0)
カメラと光源
カメラ19 var camera = scene.getCamera();     3D空間の視点を設定する     x, y, zプロパティで位置を設定     centerX, Y, Zプロパティで     注視点を設定
視点と位置    center(0, 0, 0)y      xzposition(-10, 0, 10)
光源30 var light =       scene.getDirectionalLight();     3D空間の光を設定する     directionX, Y, Zプロパティで     方向を設定     colorプロパティで光の色
平行光源すべての位置に同じ方向の光線
点光源(未対応)一点から放射状に広がる光線
物理エンジン
javascript移植  ammo.js
シーンを作る16 var scene = new PhyScene3D();     Scene3Dを継承している     物理エンジンに対応している
プリミティブ39 var box = new PhyCube(0.5, 10);     引数に質量が増える     他のPrimitiveもPhyバージョンが     存在する
物理世界を動かす84 scene.play();     毎フレーム物理世界の時間を進める
カメラ78 camera.lookAt(droid);     注視点をスプライトに合わせる     毎フレーム呼び出す必要あり
カメラ80 camera.chase(droid, -30, 30);     カメラをスプライトに近づける     スプライトとの目標距離、     速度を設定する     毎フレーム呼び出す必要あり
前方向に移動91   var fx = this.rotation[8] * scale;92   var fy = this.rotation[9] * scale;93   var fz = this.rotation[10] * scal...
回転行列1   0   0   0    1, 0, 0 右方向のベクトル0   1   0   0                 0, 1, 0 上方向のベクトル0   0   1   00   0   0   1    0, 0, 1 前...
まとめ表示オブジェクトはツリーで管理動的な処理はイベント内で行う回転は行列で表現・計算される
まとめカメラ基準の世界が映し出されるgl.enchant.jsの光源は平行光源マテリアルの設定で色つやが決まる
まとめ物理エンジンはPhyをつける世界の進行はplay(), stop()で質量0で静的オブジェクト
コツ地に足をつけるタッチイベント > キーイベントカメラを動かすとそれっぽい
Aboutgl.enchant.js
Aboutgl.enchant.js
Aboutgl.enchant.js
Upcoming SlideShare
Loading in …5
×

Aboutgl.enchant.js

4,570 views

Published on

Published in: Technology
  • Be the first to comment

Aboutgl.enchant.js

  1. 1. gl.enchant.jsで 3Dゲーム制作 2012年2月29日 高橋諒
  2. 2. 自己紹介名前: 高橋諒twitter: @rtsan 所属: UEI/ARC (アルバイト)gl.enchant.jsの開発者
  3. 3. gl.enchant.js とは
  4. 4. enchant.js + WebGL
  5. 5. WebGLって?javascriptで制御OpenGL ES 2.0のバインドプログラマブルシェーダ<canvas>に描画する
  6. 6. WebGLの壁OpenGL: 低レイヤーのAPI固定シェーダがないそもそも3Dの座標変換が難しいモデル読み込みも自分で実装
  7. 7. gl.enchant.js なら簡単
  8. 8. Hello, Cube
  9. 9. HelloCube/main.js 1 enchant(); 2 window.onload = function() { 3 var game = new Game(320, 320); 4 game.onload = function() { 5 var scene = new Scene3D(); 6 var box = new Cube(); 7 scene.addChild(box); 8 }; 9 game.start();10 };
  10. 10. HelloCube/index.html 1 <html> 2 3 <head> 4 <title>Hello, Cube</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../lib/glMatrix-0.9.6.min.js"></script> 7 <script type="text/javascript" src="../lib/enchant.js"></script> 8 <script type="text/javascript" src="../lib/gl.enchant.js"></script> 9 <script type="text/javascript" src="../lib/primitive.gl.enchant.js"></script>10 <script type="text/javascript" src="main.js"></script>11 <style type="text/css">12 body {13 margin: 0;14 }15 </style>16 </head>17 <body>18 </body>19 </html>
  11. 11. glMatrix-0.9.6.min.jsenchant.jsgl.enchant.jsprimitive.gl.enchant.jsmain.js
  12. 12. glMatrix行列計算用ライブラリvec3, mat3, mat4, quat4
  13. 13. primitive.gl.enchant.js gl.enchant.js用のプラグイン 立方体、球などの基本図形
  14. 14. 読み込み順 外部ライブラリ  ↓   enchant.js   ↓ enchant.jsプラグイン  ↓ (プラグインのプラグイン)  ↓  スクリプト
  15. 15. プリミティブと モデル
  16. 16. 流れシーンを作るスプライトを準備するシーンに追加する
  17. 17. シーンを作る9 var scene = new Scene3D(); 表示ツリーのルート 子(Sprite3D)を追加する カメラ・光源などの環境を設定する
  18. 18. スプライトを準備する10 var box = new Sprite3D(); 表示オブジェクト 回転・移動・拡大等の操作 自身も子を持つことができる
  19. 19. スプライトを準備する12 box.mesh = Mesh.createCube(0.5); meshプロパティが表示上の実体 primitive.gl.enchant.jsで 使えるようになる 引数は立方体の大きさ
  20. 20. Mesh 頂点データ (-1, 1, -1) (1, 1, -1) (-1, 1, 1) (1, 1, 1) y (-1, -1, -1) (1, -1, -1) (1, -1, 1) (-1, -1, 1) xz
  21. 21. Mesh 頂点データ (-1, 1, -1) (1, 1, -1) (-1, 1, 1) (1, 1, 1) y (-1, -1, -1) (1, -1, -1) (1, -1, 1) (-1, -1, 1) xz
  22. 22. スプライトを準備する14 box.mesh.texture = new Texture(game.assets[...]); テクスチャを設定する テクスチャはmeshのUVマップに そって貼られる
  23. 23. UVマッピング
  24. 24. スプライトを準備する16 box.mesh.texture.ambient = [ 0.7, 0.7, 0.7, 1.0 ]; テクスチャの質感(マテリアル) を設定する シェーディングに使用される diffuse, specularなどもある
  25. 25. マテリアル 各パラメータで陰影、反射の具合を設定する 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
  26. 26. スプライトを準備する21 var droid = game.assets[‘../img/ droid.dae’].clone(); preloadされたモデルは Sprite3Dとして格納される clone()かset()でコピーして使う
  27. 27. シーンに追加する31 scene.addChild(box); Scene3Dに追加することで表示 removeChild()で削除
  28. 28. scene box droid(cube) (body) (head) (arm)
  29. 29. オブジェクトの操作
  30. 30. 流れイベントリスナを設定するハンドラ内で動きの処理を書く
  31. 31. イベント28 box.addEventListener( Event.TOUCH_MOVE, function(e) { ... }); イベントリスナを追加
  32. 32. 他に…Event.ENTER_FRAMEEvent.INPUT_STARTEvent.INPUT_CHANGEEvent.INPUT_END
  33. 33. 他に…Event.TOUCH_STARTEvent.TOUCH_ENDEvent.ADDED_TO_SCENEEvent.REMOVED_FROM_SCENE
  34. 34. 移動32 this.y += (this.oldY - e.y) * 0.01; x, y, zプロパティの操作 translate()
  35. 35. 移動 常に平行移動translate(2, 1, -1) (2, 1, -1) y xz (0, 0, 0)
  36. 36. 回転31 mat4.rotateY(this.rotation, rot); glMatrixを使っている rotationプロパティの操作
  37. 37. 回転行列mat4.rotateY(droid.rotation, Math.PI/2); 0 0 1 0 0 1 0 0 -1 0 0 0 0 0 0 1
  38. 38. 回転行列 (1, 1, 1) y x Pi/2z
  39. 39. 回転行列 cosθ 0 -sinθ 0 0 1 0 0 rotY(θ) = sinθ 0 cosθ 0 0 0 0 1 0 0 -1 0rotY(Pi/2) = 0 1 0 0 1 0 0 0 0 0 0 1
  40. 40. 回転行列0 0 -1 0 1 -10 1 0 0 1 11 0 0 0 1 = 10 0 0 1 1 1
  41. 41. 回転行列 (-1, 1, 1) (1, 1, 1) y x Pi/2z
  42. 42. 回転39 this.rotationApply( new Quat(0, 1, 0, Math.PI/180)); クォータニオンを使った任意軸回転
  43. 43. 任意軸回転rotationSet(new Quat(0.5, 0.5, 0, Math.PI/2)); 3.14/2 v(0.5, 0.5, 0)
  44. 44. カメラと光源
  45. 45. カメラ19 var camera = scene.getCamera(); 3D空間の視点を設定する x, y, zプロパティで位置を設定 centerX, Y, Zプロパティで 注視点を設定
  46. 46. 視点と位置 center(0, 0, 0)y xzposition(-10, 0, 10)
  47. 47. 光源30 var light = scene.getDirectionalLight(); 3D空間の光を設定する directionX, Y, Zプロパティで 方向を設定 colorプロパティで光の色
  48. 48. 平行光源すべての位置に同じ方向の光線
  49. 49. 点光源(未対応)一点から放射状に広がる光線
  50. 50. 物理エンジン
  51. 51. javascript移植 ammo.js
  52. 52. シーンを作る16 var scene = new PhyScene3D(); Scene3Dを継承している 物理エンジンに対応している
  53. 53. プリミティブ39 var box = new PhyCube(0.5, 10); 引数に質量が増える 他のPrimitiveもPhyバージョンが 存在する
  54. 54. 物理世界を動かす84 scene.play(); 毎フレーム物理世界の時間を進める
  55. 55. カメラ78 camera.lookAt(droid); 注視点をスプライトに合わせる 毎フレーム呼び出す必要あり
  56. 56. カメラ80 camera.chase(droid, -30, 30); カメラをスプライトに近づける スプライトとの目標距離、 速度を設定する 毎フレーム呼び出す必要あり
  57. 57. 前方向に移動91 var fx = this.rotation[8] * scale;92 var fy = this.rotation[9] * scale;93 var fz = this.rotation[10] * scale;94 this.translate(fx, fy, fz); 前方向のベクトルを取得して その方向に進める ベクトルは回転行列から取れる
  58. 58. 回転行列1 0 0 0 1, 0, 0 右方向のベクトル0 1 0 0 0, 1, 0 上方向のベクトル0 0 1 00 0 0 1 0, 0, 1 前方向のベクトル初期の回転行列
  59. 59. まとめ表示オブジェクトはツリーで管理動的な処理はイベント内で行う回転は行列で表現・計算される
  60. 60. まとめカメラ基準の世界が映し出されるgl.enchant.jsの光源は平行光源マテリアルの設定で色つやが決まる
  61. 61. まとめ物理エンジンはPhyをつける世界の進行はplay(), stop()で質量0で静的オブジェクト
  62. 62. コツ地に足をつけるタッチイベント > キーイベントカメラを動かすとそれっぽい

×