Your SlideShare is downloading. ×
Beginning gl.enchant
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Beginning gl.enchant

9,069
views

Published on

Beginning gl.enchant

Beginning gl.enchant

Published in: Technology

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,069
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
23
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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