Babylon.js + TypeScript で簡単 3D プログラミング
-
Upload
fujio-kojima -
Category
Software
-
view
6.952 -
download
6
Transcript of Babylon.js + TypeScript で簡単 3D プログラミング
Babylon.js + TypeScript で簡単 3D プログラミング
小島 富治雄2016-01-30
富山合同勉強会 2016
自己紹介
• 小島 富治雄• @Fujiwo• http://blog.shos.info• 福井コンピュータアーキテクト株式会社• Microsoft MVP (2005-2016)
以前の 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/
本日は Babylon.js
• Babylon.js• http://www.babylonjs.com• An open source 3D engine based on
webGL and Javascript
David Catuhe
• Principal Program Manager for HTML5 and Open Web Standards Microsoft.
Babylon.js は様々なデバイス対応
• タッチ対応• ジョイスティック・ゲームパッド対応• 赤青眼鏡での立体視対応• Oculus Rift 対応
Babylon.js は物理エンジン対応
• 重力• 衝突判定• http://www.babylonjs.com/Demos/Physics/
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/
ドキュメントとチュートリアルが充実
• BabylonJS Documentation• http://doc.babylonjs.com
• Tutorial - BabylonJS• http://doc.babylonjs.com/tutorials
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;})();
Demo
1. Visual Studio で TypeScript プロジェクトを作成
2. NuGet でプロジェクトに追加• Babylon.js• BabylonJS.TypeScript.DefinitryTyped
3. チュートリアルの最初の “ Creating Basic Scene” のコードを試す
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/
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
3D モデルの例
• 無料で 3D モデルをダウンロードできる 60 のサイト - CreAtelier• http://createlier.sitemix.jp/blog/free-3
d-model-60sites/• Sci-Fi 3D• http://www.scifi3d.com
Demo:
1. フリー 3D モデルをダウンロード2. Blender にインポート3. Blender の Add-in “Babylon.js
Exporter” で Babylon 用の json をエキスポート
4. BABYLON.SceneLoader.Load() で読み込んで表示
Hokuriku ComCamp 2016 powered by MVPs2 月 20 日 ( 土 ) 金沢
http://hokurikucomcamp.connpass.com/event/23628/