Beginning gl.enchant

9,812 views

Published on

Beginning gl.enchant

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,812
On SlideShare
0
From Embeds
0
Number of Embeds
6,169
Actions
Shares
0
Downloads
27
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Beginning gl.enchant

  1. 1. gl.enchant.js で始める WebGL 3Dプログラミング 株式会社ユビキタスエンターテインメント 秋葉原リサーチセンター 高橋諒12年4月23日月曜日
  2. 2. 自己紹介 高橋 諒 @rtsan 株式会社ユビキタスエンターテインメント 秋葉原リサーチセンター gl.enchant.jsの開発12年4月23日月曜日
  3. 3. 2Dと3Dの違いって?12年4月23日月曜日
  4. 4. 例 シューティングゲーム12年4月23日月曜日
  5. 5. オブジェクトの位置は(x, y)で表される X Y (x, y)12年4月23日月曜日
  6. 6. オブジェクトの位置は(x, y, z)で表される Y (x, y, z) X Z12年4月23日月曜日
  7. 7. Z軸が増えた X Y Y (x, y, z) (x, y) X Z12年4月23日月曜日
  8. 8. 2Dは点回転12年4月23日月曜日
  9. 9. 3Dは軸回転12年4月23日月曜日
  10. 10. 回転が複雑になる12年4月23日月曜日
  11. 11. gl.enchant.js とは12年4月23日月曜日
  12. 12. gl.enchant.jsとは •enchant.jsのプラグイン •WebGLを使ったゲームを作れる •インターフェースは2Dとほぼ同じ12年4月23日月曜日
  13. 13. glMatrix.js •行列・ベクトル演算のライブラリ •内部で演算に使用している12年4月23日月曜日
  14. 14. gl.enchant.jsで できること12年4月23日月曜日
  15. 15. モデルが読み込める12年4月23日月曜日
  16. 16. 基本図形が使える12年4月23日月曜日
  17. 17. 回転が簡単にできる Yaw Pitch Roll12年4月23日月曜日
  18. 18. シェーディングができる 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.512年4月23日月曜日
  19. 19. 視点が簡単に動かせる12年4月23日月曜日
  20. 20. 物理エンジンが使える12年4月23日月曜日
  21. 21. gl.enchant.js を使ってみる12年4月23日月曜日
  22. 22. やること0.サンプル1.画面にオブジェクトを出す2.オブジェクトを操作する(移動・回転)3.視点を操作する12年4月23日月曜日
  23. 23. まずサンプル12年4月23日月曜日
  24. 24. 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 };12年4月23日月曜日
  25. 25. 12年4月23日月曜日
  26. 26. 画面にオブジェクトを出す プリミティブ モデル12年4月23日月曜日
  27. 27. の場合 プリミティブ12年4月23日月曜日
  28. 28. primitive.gl.enchant.js •基本図形の呼び出し 箱 → Box(sx, sy, sz),   → Cube(s) 平面→ Plane(s)12年4月23日月曜日
  29. 29. primitive.gl.enchant.js •基本図形の呼び出し 球 → Sphere(r) 円筒 → Cylinder(r, h) トーラス → Torus(r, r2)12年4月23日月曜日
  30. 30. 12年4月23日月曜日
  31. 31. プリミティブ game.onload = function() { ...... var box = new Cube(1); ...... scene.addChild(box); ......12年4月23日月曜日
  32. 32. テクスチャをはる ...... var box = new Cube(1); box.mesh.texture = new Texture(enchant.png); box.mesh.texture.ambient = [ 0.8, 0.8, 0.8, 1.0 ]; scene.addChild(box); ......12年4月23日月曜日
  33. 33. マテリアル 各パラメータで陰影、反射の具合を設定する 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.512年4月23日月曜日
  34. 34. の場合 モデル12年4月23日月曜日
  35. 35. collada.gl.enchant.js •Collada(.dae)ファイルの読み込み •ジョイント, アニメーションは未対応 •game.preloadから読み込める12年4月23日月曜日
  36. 36. モデルの読み込み var game = new Game(640, 640); game.preload(droid.dae); game.onload = function() { ...... var droid = game.assets[droid.dae].clone(); scene.addChild(droid); ......12年4月23日月曜日
  37. 37. note •プリロードされたデータはSprite3D のインスタンスとして格納されている •clone()かset()で複製して使う12年4月23日月曜日
  38. 38. オブジェクトを操作する •移動 •回転 •拡大縮小12年4月23日月曜日
  39. 39. 表示オブジェクトの移動 •translate(x, y, z);  •x, y, zプロパティの変更 Y •どちらも平行移動 X Z12年4月23日月曜日
  40. 40. 平行移動だと Z translate(2, 0, 1) X12年4月23日月曜日
  41. 41. 直感的でない Z translate(2, 0, 1) X12年4月23日月曜日
  42. 42. 表示オブジェクトの移動 •forward(s) → オブジェクトのZ軸方向移動 •sidestep(s) → オブジェクトのX軸方向移動 Y •altitude(s) → オブジェクトのY軸方向移動 X Z12年4月23日月曜日
  43. 43. 向きにあった移動 Z forward(1.5) X12年4月23日月曜日
  44. 44. 表示オブジェクトの回転 •rotateRoll(rad) → オブジェクトのZ軸回転 •rotatePitch(rad) → オブジェクトのX軸回転 Yaw •rotateYaw(rad) → オブジェクトのY軸回転 Pitch Roll12年4月23日月曜日
  45. 45. 表示オブジェクトの拡大縮小 •scaleX, scaleY, scaleZ → 拡大率の指定 Y •scale(sx, sy, sz) → 拡大率をかける X Z12年4月23日月曜日
  46. 46. Z軸で縮小すると droid.scaleZ = 0.0125;12年4月23日月曜日
  47. 47. 視点を操作する を使います (Camera3D)12年4月23日月曜日
  48. 48. カメラの構造 カメラの位置12年4月23日月曜日
  49. 49. カメラの構造 注視点12年4月23日月曜日
  50. 50. カメラの構造 上ベクトル12年4月23日月曜日
  51. 51. 上ベクトルで カメラの傾きが決まる12年4月23日月曜日
  52. 52. 12年4月23日月曜日
  53. 53. カメラの移動 •forward(s) → カメラのZ軸方向移動 •sidestep(s) → カメラのX軸方向移動 Z •altitude(s) → カメラのY軸方向移動 X Y12年4月23日月曜日
  54. 54. カメラの回転 •rotateRoll(rad) → カメラの視線ベクトル回転 •rotatePitch(rad) → カメラのX軸回転 Z •rotateYaw(rad) → カメラの上ベクトル回転 X Y12年4月23日月曜日
  55. 55. 視点の操作 center(0, 0, 0) Z X Y (0, 0, 10)12年4月23日月曜日
  56. 56. 視点の操作 center(0, 0, 0) Z X Y (-10, 0, 10)12年4月23日月曜日
  57. 57. 物理エンジンを使う12年4月23日月曜日
  58. 58. physics.gl.enchant.js •手軽に物理シミュレートが利用できる •拘束条件(ジョイント)・軟体 (布など)には未対応12年4月23日月曜日
  59. 59. physics.gl.enchant.js •ammo.jsが必要 → javascriptの物理演算ライブラリ •primitive.gl.enchant.jsも必要12年4月23日月曜日
  60. 60. 変わるところ •Scene3D() → PhyScene3D() •Sprite3D() → PhySprite3D(rigid) → 剛体オブジェクトを渡す12年4月23日月曜日
  61. 61. 剛体 0.5 var rigid = new RigidCube(0.5, 5)12年4月23日月曜日
  62. 62. 変わるところ •RigidBox(sx, sy, sz, mass) → 大きさ、質量を設定する12年4月23日月曜日
  63. 63. Primitive •Cube(s) → PhyCube(s, mass) → 剛体オブジェクトは内部で作られる12年4月23日月曜日
  64. 64. 力を加える •applyCentralImpulse(px, py, pz) → 物体の中心に力を加える •applyImpulse(px, py, pz, x, y, z) → 指定した位置に力を加える •clearForces() → 物体にかかっている力をリセットする12年4月23日月曜日
  65. 65. 力を加える (0, 25, -100)12年4月23日月曜日
  66. 66. 力を加える12年4月23日月曜日
  67. 67. シミュレートの再生・停止 •PhyScene3D.play() → 物理世界の時間をうごかす •PhyScene3D.stop() → 物理世界の時間をとめる12年4月23日月曜日
  68. 68. 当たり判定 •PhySprite3D.contactTest() → 物理オブジェクト同士の厳密な当たり 判定12年4月23日月曜日
  69. 69. 実例12年4月23日月曜日
  70. 70. とんとんずもうゲーム12年4月23日月曜日
  71. 71. とんとんずもう •飛行機の中で作った(40分くらい) •ドロイドくん(.dae)を物理化 •クリックすることで力を与える(だけ)12年4月23日月曜日
  72. 72. ドロイドくんの物理化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日月曜日
  73. 73. 剛体を定義 r h var rigid = new PhyCylinder(0.3, 1, 5)12年4月23日月曜日
  74. 74. 合わせる rigid var player = player.addChild(...); new PhySprite(rigid);12年4月23日月曜日
  75. 75. ざくざくコイン12年4月23日月曜日
  76. 76. ざくざくコイン •コイン落としゲーム •ハッカソンで作った(3∼5時間) •ほとんどの処理を物理エンジンに任せる12年4月23日月曜日
  77. 77. 初期化 •コインを空中にランダムに設置 •play()すると勝手にセットされる12年4月23日月曜日
  78. 78. 処理 •押し出しバーを周期的に動かす → コインの挙動は物理エンジン任せ •落ちたコインは当たり判定で回収12年4月23日月曜日
  79. 79. tips12年4月23日月曜日
  80. 80. 暗い12年4月23日月曜日
  81. 81. Q:空を描くには?12年4月23日月曜日
  82. 82. A:でかい球で世界を包む12年4月23日月曜日
  83. 83. 空 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日月曜日
  84. 84. 明るくなった12年4月23日月曜日

×