3D で遊ぼう～ C#er も TypeScript で楽々

WebGL ～

小島 富治雄HOKURIKU.NET VOL.13 IN 富山

2014-01-25

自己紹介

• 小島 富治雄• @Fujiwo• 福井コンピュータアーキテクト株式会社

• Microsoft MVP C# (2005-2014)

本日の資料

• スライドhttp://slidesha.re/1mUDdRJ

• サンプル コードhttp://sdrv.ms/1mUJ89k

3

• 2014/03/22

•北陸会場 : 石川工業高等専門学校• 申し込み : http://atnd.org/events/47189

• 参加者 / 登壇者募集中 !

本日のゴール

•TypeScript で WebGL を使う 3D プログラミングに興味を。

WebGL とは

• HTML5 の canvas に三次元 ( または二次元 ) のグラフックを表示する標準仕様• Web ブラウザで ( プラグインなし )

• シェーディング言語 GLSL (OpenGL 2.0) + JavaScript

WebGL 対応タブレット / スマートフォン

HTML5 compatibility on mobile and tablet browsers with testing on real devices

http://mobilehtml5.org

• PC 上のブラウザでは、最新の IE 、 Google Chrome 、 FireFox では、ほぼ大丈夫• 但し、 IE は 11 でも機能しないものが多め

• 現状、スマートフォンではほとんど動作しない

• タブレットの動作しないものが多い• Window タブレットは PC と同様

WebGL プログラミング

フラグメント シェーダーのプログラム (GLSL)

precision mediump float;

varying vec4 vColor;

void main(void) { gl_FragColor = vColor;}

頂点シェーダーのプログラム (GLSL)

attribute vec3 aVertexPosition; // 頂点座標attribute vec4 aVertexColor; // 頂点の色

uniform mat4 uMVMatrix; // モデルからビューへの投影行列uniform mat4 uPMatrix; // モデル行列

varying vec4 vColor;

void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor;}

プログラムの初期化

1. createProgram2. attachShader // 頂点シェーダーのアタッチ3. attachShader // フラグメント シェーダーのアタッチ4. linkProgram5. useProgram

シェーダーのコンパイル

1. createShader2. shaderSource3. compileShader

シェーダーのコンパイル

1. createShader2. shaderSource3. compileShader

GL の初期化

WebGLUtils.setupWebGL(canvas);

バッファの初期化

1. createBuffer2. bindBuffer3. bufferData

[ -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0 ]……

シェーダープログラムオブジェクトの各属性の場所を設定

1. getAttribLocation2. vertexAttribPointer3. enableVertexAttribArray4. getUniformLocation

描画

drawElements

結構大変

three.js

• JavaScript のライブラリ• WebGL のラッパー• WebGL が易しく使える

JavaScript は C# プログラマーにとって

• 少し違和感がある。• クラスがないとか、ちょっと何言ってるか分からな

い。

TypeScript

• JavaScript  のスーパーセット• TypeScript for Visual Studio 2012 and 2013http://

www.microsoft.com/en-us/download/details.aspx?id=34790

• TypeScript に関する参考資料 - 翔ソフトウェアhttp://blog.shos.info/archives/2014/01/typescriptlinks.html

TypeScript にあって JavaScript にないもの ( 抜粋 )

• 静的型付け• ラムダ式 =>

• アクセス制御• プロパティ• オーバーロード ( イマイチ )

• デフォルト引数• クラス• 継承

• インタフェイス• ジェネリクス• 名前空間 or パッケージ• 型推論 ( イマイチ )

• Visual Studio での静的エラーの即時フィードバック• Visual Studio でのインテ

リセンス

JavaScript を書いてる人は「それ、できるよ」と言うかも知れないが、

「できる」のと「ある」のは違う。

JavaScript と TypeScriptvar Helper;

(function (Helper) {

    var ArrayHelper = ( function () {

        function ArrayHelper() {

        }

        ArrayHelper.forAll = function (array, action) {

            for (var index = 0; index < array.length; index++)

                action(array[index], index);

        };

        return ArrayHelper;

    })();

    Helper.ArrayHelper = ArrayHelper;

})(Helper || (Helper = {}));

window.onload = function () {

    var texts = ["A", "BC", "DEF"];

    Helper.ArrayHelper.forAll(texts, function (text, index) {

        return console.log(index.toString() + " ; " + text);

    });

};

module Helper {

    export class ArrayHelper {

        static forAll<T>(array : Array<T>,

action: (item: T, index: number) => void) {

            for (var index = 0; index < array.length; index++)

                action(array[index], index);

        }

    }

}

window.onload = () => {

    var texts = ["A", "BC", "DEF"];

    Helper.ArrayHelper.forAll(texts,

(text, index) => console.log(index.toString() + " ; " + text));

};

think.js + TypeScript

• three.d.ts• three.js を TypeScript から使うための型定義

• Visual Studio では NuGet からインストール可能

three.js

1. レンダラーの作成2. カメラの作成3. シーン ( 空間 ) の作成

1. ライトの作成 → シーンに追加

2. メッシュの作成 → シーンに追加ジオメトリー ( 形 ) とマテリアル ( 材料 ) からメッシュを作成

4. レンダリングレンダラーとカメラでシーンをレンダリング

レンダラーの作成

// レンダラーの作成var renderer = new THREE.WebGLRenderer();// サイズの設定renderer.setSize(window.innerWidth ,

window.innerHeight);// 背景色の設定 ( 色 , 透明度 )renderer.setClearColorHex(0x000000, 1);

カメラの作成

var fov    = 100;    // 画角var aspect = window.innerWidth / window.innerHeight;  // 縦横比var camera = new THREE.PerspectiveCamera(fov,

aspect);camera.position = new THREE.Vector3(0, 0, 1000);

           // z 方向に 1000 ずらす

シーン ( 空間 ) の作成

// シーン ( 空間 ) の作成var scene = new THREE.Scene();

(3-1) ライトの作成 → シーンに追加

// 平行光源 ( 無限遠光源 ) を作成var directionalLight      =

new THREE.DirectionalLight(0xffffff, 1);

// 引数 : 色 , 強さdirectionalLight.position = new THREE.Vector3(0, 0, 1);

// z 方向から照らす// 光源をシーンに追加scene.add(directionalLight);

(3-2) メッシュの作成 → シーンに追加 ジオメトリー ( 形 ) とマテリアル ( 材料 ) からメッシュを作成

• // プリミティブなジオメトリーを作成var geometry = new THREE.CubeGeometry(500, 500, 500);// マテリアルを作成 ( 赤 )var material = new THREE.MeshLambertMaterial(

• { color: 0xff0000 });// ジオメトリーとマテリアルを合わせてメッシュを作成var cubeMesh = new THREE.Mesh(geometry, material);// メッシュをシーンに追加scene.add(cubeMesh);

(4) レンダリング レンダラーとカメラでシーンをレンダリング

render(renderer, camera, scene);

render(renderer: THREE.Renderer, camera: THREE.Camera,

scene: THREE.Scene) {    // …… 更新処理をここに書く (メッシュ等を更新) ……

    // レンダリング this.renderer.render(this.scene, this.camera);

    // 繰り返す // - setInterval(render, 1000 / 60); より軽い // -- 不要な場合にループを行わない // -- 最適化されている requestAnimationFrame(() => this.render(renderer, camera, scene));}

モデルや更新処理などを変えると色々と遊べる

• サンプル• http://www2.shos.info/typescriptthreejssample/threejswebglsample.html

• http://www2.shos.info/typescriptthreejssample/spheresample.html

• http://www2.shos.info/nbody/nbody.html?number=10

• http://www2.shos.info/nbody/nbody3d.html?number=10

クラス設計も楽々

• nbody と nbody3d の設計

物理ライブラリ

• three.js と組合せられる物理ライブラリもある• Physijs などhttps://github.com/chandlerprall/Physijs

•重力などの 3D 物理演算

まとめ

• Three.js と TypeScript で WebGL を楽しもう !