Babylon.js + TypeScript で簡単 3D プログラミング
-
Upload
fujio-kojima -
Category
Software
-
view
6.950 -
download
6
Transcript of Babylon.js + TypeScript で簡単 3D プログラミング
![Page 1: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/1.jpg)
Babylon.js + TypeScript で簡単 3D プログラミング
小島 富治雄2016-01-30
富山合同勉強会 2016
![Page 2: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/2.jpg)
自己紹介
• 小島 富治雄• @Fujiwo• http://blog.shos.info• 福井コンピュータアーキテクト株式会社• Microsoft MVP (2005-2016)
![Page 3: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/3.jpg)
以前の LT
• 『 3D で遊ぼう ~ C#er も TypeScript で楽々 WebGL ~』 • http://www.slideshare.net/Fujiwo/20140125-3-d-cer-typescript-webgl
• Three.js + TypeScript • http://www2.shos.info/nbody/nbody.html?number=10• http://www2.shos.info/nbody/nbody3d.html?number=10• http://www2.shos.info/randomtest/
![Page 4: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/4.jpg)
本日は Babylon.js
• Babylon.js• http://www.babylonjs.com• An open source 3D engine based on
webGL and Javascript
![Page 5: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/5.jpg)
David Catuhe
• Principal Program Manager for HTML5 and Open Web Standards Microsoft.
![Page 6: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/6.jpg)
Babylon.js は様々なデバイス対応
• タッチ対応• ジョイスティック・ゲームパッド対応• 赤青眼鏡での立体視対応• Oculus Rift 対応
![Page 7: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/7.jpg)
Babylon.js は物理エンジン対応
• 重力• 衝突判定• http://www.babylonjs.com/Demos/Physics/
![Page 8: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/8.jpg)
Babylon.js の Demo
• http://www.babylonjs.com/Demos/Espilit/• http://www.babylonjs.com/Demos/WCafe• http://www.babylonjs.com/Demos/HillValley/• http://www.babylonjs.com/Demos/MANSION/
![Page 9: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/9.jpg)
ドキュメントとチュートリアルが充実
• BabylonJS Documentation• http://doc.babylonjs.com
• Tutorial - BabylonJS• http://doc.babylonjs.com/tutorials
![Page 10: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/10.jpg)
TypeScript で開発
class MyScene { private engine: BABYLON.Engine;
public constructor(canvas: HTMLCanvasElement) { this.engine = new BABYLON.Engine(canvas, true); window.addEventListener("resize", () => this.engine.resize()); }}
var MyScene = (function () { function MyScene(canvas) { this.engine = new BABYLON.Engine(canvas, true); var _this = this; window.addEventListener("resize", function () { return _this.engine.resize(); }); } return MyScene;})();
![Page 11: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/11.jpg)
Demo
1. Visual Studio で TypeScript プロジェクトを作成
2. NuGet でプロジェクトに追加• Babylon.js• BabylonJS.TypeScript.DefinitryTyped
3. チュートリアルの最初の “ Creating Basic Scene” のコードを試す
![Page 12: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/12.jpg)
3 D モデルのエキスポート
• Babylon.js Exporter の例• Babylon.js/Exporters/Blender - GitHub
• https://github.com/BabylonJS/Babylon.js/tree/master/Exporters/Blender
• Babylon.js: How to load a .babylon file produced with Blender• https://blogs.msdn.microsoft.com/eternalcoding/2013/06
/28/babylon-js-how-to-load-a-babylon-file-produced-with-blender/
![Page 13: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/13.jpg)
3 D モデラーの例
• Blender - Free and Open 3D Creation Software• blender.org• http://www.blender.org
• Blender.jp• https://blender.jp
• Blender 入門• http://www.blender3d.biz
![Page 14: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/14.jpg)
3D モデルの例
• 無料で 3D モデルをダウンロードできる 60 のサイト - CreAtelier• http://createlier.sitemix.jp/blog/free-3
d-model-60sites/• Sci-Fi 3D• http://www.scifi3d.com
![Page 15: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/15.jpg)
Demo:
1. フリー 3D モデルをダウンロード2. Blender にインポート3. Blender の Add-in “Babylon.js
Exporter” で Babylon 用の json をエキスポート
4. BABYLON.SceneLoader.Load() で読み込んで表示
![Page 16: Babylon.js + TypeScript で簡単 3D プログラミング](https://reader034.fdocuments.in/reader034/viewer/2022042513/586f72b31a28ab10258b54df/html5/thumbnails/16.jpg)
Hokuriku ComCamp 2016 powered by MVPs2 月 20 日 ( 土 ) 金沢
http://hokurikucomcamp.connpass.com/event/23628/