Recommandé
Contenu connexe
En vedette
En vedette (20)
Beginning gl.enchant
- 1. gl.enchant.js で始める WebGL 3Dプログラミング 株式会社ユビキタスエンターテインメント 秋葉原リサーチセンター 高橋諒 12年4月23日月曜日
- 2. 自己紹介 高橋 諒 @rtsan 株式会社ユビキタスエンターテインメント 秋葉原リサーチセンター gl.enchant.jsの開発 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 Z 12年4月23日月曜日
- 7. Z軸が増えた X Y Y (x, y, z) (x, y) X Z 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日月曜日
- 17. 回転が簡単にできる Yaw Pitch Roll 12年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.5 12年4月23日月曜日
- 21. gl.enchant.js を使ってみる 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.5 12年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 Z 12年4月23日月曜日
- 40. 平行移動だと Z translate(2, 0, 1) X 12年4月23日月曜日
- 41. 直感的でない Z translate(2, 0, 1) X 12年4月23日月曜日
- 42. 表示オブジェクトの移動 •forward(s) → オブジェクトのZ軸方向移動 •sidestep(s) → オブジェクトのX軸方向移動 Y •altitude(s) → オブジェクトのY軸方向移動 X Z 12年4月23日月曜日
- 43. 向きにあった移動 Z forward(1.5) X 12年4月23日月曜日
- 44. 表示オブジェクトの回転 •rotateRoll(rad) → オブジェクトのZ軸回転 •rotatePitch(rad) → オブジェクトのX軸回転 Yaw •rotateYaw(rad) → オブジェクトのY軸回転 Pitch Roll 12年4月23日月曜日
- 45. 表示オブジェクトの拡大縮小 •scaleX, scaleY, scaleZ → 拡大率の指定 Y •scale(sx, sy, sz) → 拡大率をかける X Z 12年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 Y 12年4月23日月曜日
- 54. カメラの回転 •rotateRoll(rad) → カメラの視線ベクトル回転 •rotatePitch(rad) → カメラのX軸回転 Z •rotateYaw(rad) → カメラの上ベクトル回転 X Y 12年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日月曜日
- 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日月曜日
- 67. シミュレートの再生・停止 •PhyScene3D.play() → 物理世界の時間をうごかす •PhyScene3D.stop() → 物理世界の時間をとめる 12年4月23日月曜日
- 68. 当たり判定 •PhySprite3D.contactTest() → 物理オブジェクト同士の厳密な当たり 判定 12年4月23日月曜日
- 69. 実例 12年4月23日月曜日
- 71. とんとんずもう •飛行機の中で作った（４０分くらい） •ドロイドくん（.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日月曜日
- 76. ざくざくコイン •コイン落としゲーム •ハッカソンで作った（３∼５時間） •ほとんどの処理を物理エンジンに任せる 12年4月23日月曜日
- 77. 初期化 •コインを空中にランダムに設置 •play()すると勝手にセットされる 12年4月23日月曜日
- 78. 処理 •押し出しバーを周期的に動かす → コインの挙動は物理エンジン任せ •落ちたコインは当たり判定で回収 12年4月23日月曜日
- 79. tips 12年4月23日月曜日
- 80. 暗い 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日月曜日