View
2.512
Download
1
Category
Preview:
DESCRIPTION
2014-01-25 Hokuriku.NET Vol.13 in 富山 http://atnd.org/events/46157
Citation preview
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 を楽しもう !
Recommended