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

•
http://slidesha.re/1mUDdRJ

•
http://sdrv.ms/1mUJ89k

3

•
•
•
•

http://atnd.org/events/47189

•
•

•
•
•

http://mobilehtml5.org

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

シェーダーのコンパイル

GLの初期化

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

1. createShader
2. shaderSource
3. compileShader

WebGLUtils.setupWebGL(canvas);

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

プログラムの初期化
シェーダーのコンパイル

void main(void) {
gl_Position = uPMatrix * uMVMatrix *
vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
}
フラグメントシェーダーのプログラム (GLSL)
precision mediump float;
varying vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}

1. createShader
2. shaderSource
3. compileShader

1.
2.
3.
4.
5.

バッファの初期化

varying vec4 vColor;

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

1. createBuffer
2. bindBuffer
3. bufferData

1.
2.
3.
4.

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

1.0,
1.0,
1.0,
1.0 ]

createProgram
attachShader // 頂点シェーダーのアタッチ
attachShader // フラグメントシェーダーのアタッチ
linkProgram
useProgram

getAttribLocation
vertexAttribPointer
enableVertexAttribArray
getUniformLocation

描画

drawElements

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

•
http://blog.shos.info/archives/2014/01/typescriptlinks.html

•
•
•
•
•
•
•
•

•
•
•
•
•
•

「それ、できるよ」

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

var Helper;

module Helper {

(function (Helper) {

export class ArrayHelper {

var ArrayHelper = ( function () {

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

function ArrayHelper() {

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

}

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

ArrayHelper.forAll = function (array, action) {

action(array[index], index);

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

action(array[index], index);
};
return ArrayHelper;

}

}

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

window.onload = () => {
var texts = ["A", "BC", "DEF"];
Helper.ArrayHelper.forAll(texts,

window.onload = function () {
var texts = ["A", "BC", "DEF"];

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

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

};

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

// レンダラーの作成
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();

// 平行光源 (無限遠光源) を作成
var directionalLight
=
new THREE.DirectionalLight(0xffffff, 1);
// 引数: 色, 強さ
directionalLight.position = new THREE.Vector3(0, 0, 1);
// z 方向から照らす
// 光源をシーンに追加
scene.add(directionalLight);

• // プリミティブなジオメトリーを作成
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);

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

•
•
https://github.com/chandlerprall/Physijs
•

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

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

Similar to 3D で遊ぼう～C#er も TypeScript で楽々 WebGL～ (20)

More from Fujio Kojima

More from Fujio Kojima (19)

Recently uploaded

Recently uploaded (10)