Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,411 views

Published on

2014-01-25
Hokuriku.NET Vol.13 in 富山
http://atnd.org/events/46157

Published in: Technology, Design
  • Be the first to comment

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

  1. 1. • • • •
  2. 2. • http://slidesha.re/1mUDdRJ • http://sdrv.ms/1mUJ89k 3
  3. 3. • • • • http://atnd.org/events/47189
  4. 4.
  5. 5. • • •
  6. 6. • • • • • http://mobilehtml5.org
  7. 7. 頂点シェーダーのプログラム (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
  8. 8. • • •
  9. 9. • •
  10. 10. • • http://www.microsoft.com/en-us/download/details.aspx?id=34790 • http://blog.shos.info/archives/2014/01/typescriptlinks.html
  11. 11. • • • • • • • • • • • • • •
  12. 12. 「それ、できるよ」 「できる」のと「ある」のは違う。
  13. 13. 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); }); };
  14. 14. • • •
  15. 15. 1. 2. 3. 1. 2. 4.
  16. 16. // レンダラーの作成 var renderer = new THREE.WebGLRenderer(); // サイズの設定 renderer.setSize(window.innerWidth , window.innerHeight); // 背景色の設定(色, 透明度) renderer.setClearColorHex(0x000000, 1);
  17. 17. 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 ずらす
  18. 18. // シーン (空間) の作成 var scene = new THREE.Scene();
  19. 19. // 平行光源 (無限遠光源) を作成 var directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 引数: 色, 強さ directionalLight.position = new THREE.Vector3(0, 0, 1); // z 方向から照らす // 光源をシーンに追加 scene.add(directionalLight);
  20. 20. • // プリミティブなジオメトリーを作成 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);
  21. 21. 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));
  22. 22. • • 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
  23. 23.
  24. 24. • • https://github.com/chandlerprall/Physijs •
  25. 25.

×