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” のコードを試す

３ 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/

３ 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/