2012-09-08 Akihiro OyamadaSaturday, September 8, 12
おやまだ あきひろ             小山田 晃浩             twiter@yomotsu             株式会社ピクセルグリッド             Microsoft MVP for IESaturday,...
このセッションの流れ       1. HTMLとグラフィックス技術       2. WebGLとは       3. Three.jsとは       4. まとめSaturday, September 8, 12
Saturday, September 8, 12
<video>   <audio>       canvas                             CSS3      WOFF          SVG                                    ...
HTMLはグラフィクスの技術でもあるSaturday, September 8, 12
Las                               t ye                                   arSaturday, September 8, 12
Saturday, September 8, 12
Lets see some WebGL worksSaturday, September 8, 12
Saturday, September 8, 12
http://hexgl.bkcore.com/http://www.tangent3d.co.uk/armada/webshows/rayceasar/exhibition/http://stations.aeracode.org/http:...
Webで3Dを描画する技術       用途はいろいろSaturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
GPUに直接つながるので高速Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
WebGLは標準技術Saturday, September 8, 12
WebGLを書いてみようSaturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
WebGLで描けるのは三角形と点と線Saturday, September 8, 12
Saturday, September 8, 12
http://yomotsu.github.com/                        html5conf2012/1.htmlSaturday, September 8, 12
<!doctype html>      <html>                                                         //頂点      <head>                      ...
コードで何をしているのかSaturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
WebGLのながれ       • 頂点情報の配列は...       • Vertex Shaderで形になり       • Flagment Shaderで色がつき       • HTMLのcanvasに表示されるSaturday, S...
各shaderは、       自分で用意しなければならないSaturday, September 8, 12
shaderはGLSLという言語で書くSaturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
WebGLのながれ       • Vertex Shaderソースを用意してコンパイル       • Flagment Shaderソースを用意してコンパイル       • それぞれをprogramに登録するSaturday, Septe...
JavaScriptから情報を入力するSaturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
手順が多く、敷居が高いSaturday, September 8, 12
でもThree.jsなら...!Saturday, September 8, 12
Three.jsとはSaturday, September 8, 12
Saturday, September 8, 12
http://mrdoob.github.com/three.js/Saturday, September 8, 12
Three.jsとは       • WebGLのラッパーライブラリー       • 複雑な手順は必要ない       • WebGLを直感的に使うことができる       • Mr.doob氏が中心になりGitHub上で開発されているSat...
Saturday, September 8, 12
http://www.webgl.com/Saturday, September 8, 12
WebGL作例の多くが       Three.jsを使用Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
書籍でも       WebGLの合わせて解説されるSaturday, September 8, 12
Three.jsは       WebGLにおけるjQuerySaturday, September 8, 12
Three.jsのながれSaturday, September 8, 12
Three.jsの利用手順       1. レンダラーをHTMLにappend(設置)       2. シーンを作成       3. カメラを配置       4. ライトを配置       5. モデルを配置       6. 撮影Sa...
<script src="three.min.js"></script>       <script>         //ここにTHREE.jsを用いた描画の処理を書いていく       </script>Saturday, Septembe...
window.addEventListener("DOMContentLoaded", function(){         //描画領域の大きさに利用する         var width = window.innerWidth;    ...
window.addEventListener("DOMContentLoaded", function(){         //描画領域の大きさに利用する         var width = window.innerWidth;    ...
window.addEventListener("DOMContentLoaded", function(){         //描画領域の大きさに利用する         var width = window.innerWidth;    ...
//レンダラーのサイズは当初設定したwidthとheightと同じに            renderer.setSize( width, height );            //HTMLのbody要素直下の子要素としてレンダラーを追加...
//レンダラーのサイズは当初設定したwidthとheightと同じに            renderer.setSize( width, height );            //HTMLのbody要素直下の子要素としてレンダラーを追加...
//レンダラーのサイズは当初設定したwidthとheightと同じに            renderer.setSize( width, height );            //HTMLのbody要素直下の子要素としてレンダラーを追加...
//レンダラーのサイズは当初設定したwidthとheightと同じに            renderer.setSize( width, height );            //HTMLのbody要素直下の子要素としてレンダラーを追加...
//レンダラーのサイズは当初設定したwidthとheightと同じに            renderer.setSize( width, height );            //HTMLのbody要素直下の子要素としてレンダラーを追加...
//レンダラーのサイズは当初設定したwidthとheightと同じに            renderer.setSize( width, height );            //HTMLのbody要素直下の子要素としてレンダラーを追加...
//レンダラーのサイズは当初設定したwidthとheightと同じに            renderer.setSize( width, height );            //HTMLのbody要素直下の子要素としてレンダラーを追加...
//レンダラーのサイズは当初設定したwidthとheightと同じに            renderer.setSize( width, height );            //HTMLのbody要素直下の子要素としてレンダラーを追加...
//レンダラーのサイズは当初設定したwidthとheightと同じに            renderer.setSize( width, height );            //HTMLのbody要素直下の子要素としてレンダラーを追加...
//レンダラーのサイズは当初設定したwidthとheightと同じに            renderer.setSize( width, height );            //HTMLのbody要素直下の子要素としてレンダラーを追加...
//レンダラーのサイズは当初設定したwidthとheightと同じに            renderer.setSize( width, height );            //HTMLのbody要素直下の子要素としてレンダラーを追加...
//レンダラーのサイズは当初設定したwidthとheightと同じに            renderer.setSize( width, height );            //HTMLのbody要素直下の子要素としてレンダラーを追加...
//レンダラーのサイズは当初設定したwidthとheightと同じに            renderer.setSize( width, height );            //HTMLのbody要素直下の子要素としてレンダラーを追加...
var scene = new THREE.Scene();            //カメラを設定            var fov = 80;            var aspect = width / height;       ...
var scene = new THREE.Scene();            //カメラを設定            var fov = 80;            var aspect = width / height;       ...
var scene = new THREE.Scene();            //カメラを設定            var fov = 80;            var aspect = width / height;       ...
var near   = 1;            var far = 1000;            var camera =            new THREE.PerspectiveCamera( fov, aspect, ne...
var near   = 1;            var far = 1000;            var camera =            new THREE.PerspectiveCamera( fov, aspect, ne...
var near   = 1;            var far = 1000;            var camera =            new THREE.PerspectiveCamera( fov, aspect, ne...
var near   = 1;            var far = 1000;            var camera =            new THREE.PerspectiveCamera( fov, aspect, ne...
//光源を設定            var directionalLight =            new THREE.DirectionalLight( 0xffffff, 3 );            directionalLigh...
//光源を設定            var directionalLight =            new THREE.DirectionalLight( 0xffffff, 3 );            directionalLigh...
//光源を設定            var directionalLight =            new THREE.DirectionalLight( 0xffffff, 3 );            directionalLigh...
//光源を設定            var directionalLight =            new THREE.DirectionalLight( 0xffffff, 3 );            directionalLigh...
//光源をシーンに追加            scene.add( directionalLight );         //横幅、高さ、奥行きが200の立方体のジオメトリーを設定         var geometry = new THR...
//横幅、高さ、奥行きが200の立方体のジオメトリーを設定         var geometry = new THREE.CubeGeometry(200, 200, 200);         //マテリアルを設定         var...
//横幅、高さ、奥行きが200の立方体のジオメトリーを設定         var geometry = new THREE.CubeGeometry(200, 200, 200);         //マテリアルを設定         var...
//横幅、高さ、奥行きが200の立方体のジオメトリーを設定         var geometry = new THREE.CubeGeometry(200, 200, 200);         //マテリアルを設定         var...
//マテリアルを設定         var material = new THREE.MeshLambertMaterial({color:       0x660000});         //メッシュを作成         var cu...
Saturday, September 8, 12
http://yomotsu.github.com/                        html5conf2012/2.htmlSaturday, September 8, 12
正面から描画しているだけ...Saturday, September 8, 12
カメラ、モデル、光源を動かし、       連続でレンダリングするSaturday, September 8, 12
var theta = 0;       function anim(){          var radian = theta * Math.PI / 180;          cubeMesh.rotation.set( radian,...
Saturday, September 8, 12
http://yomotsu.github.com/                        html5conf2012/3.htmlSaturday, September 8, 12
Three.jsは直感的Saturday, September 8, 12
ほかにも、たくさんのAPIがあるSaturday, September 8, 12
便利なThree.jsのAPIs    モデルを読み込むSaturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
THREE.collaraLoader                             THREE.OBJLoaderSaturday, September 8, 12
THREE.collaraLoader                             THREE.OBJLoaderSaturday, September 8, 12
Saturday, September 8, 12
https://github.com/mrdoob/                        three.js/tree/master/examples/js/Saturday, September 8, 12
<script src="three.js"></script>       <script src="ColladaLoader.js"></script>Saturday, September 8, 12
//collada loader       var loader = new THREE.ColladaLoader();       loader.options.convertUpAxis = true;       loader.loa...
//collada loader       var loader = new THREE.ColladaLoader();       loader.options.convertUpAxis = true;       loader.loa...
//collada loader       var loader = new THREE.ColladaLoader();       loader.options.convertUpAxis = true;       loader.loa...
//collada loader       var loader = new THREE.ColladaLoader();       loader.options.convertUpAxis = true;       loader.loa...
//collada loader       var loader = new THREE.ColladaLoader();       loader.options.convertUpAxis = true;       loader.loa...
Saturday, September 8, 12
http://yomotsu.github.com/threejs-                        examples/load_converted_MMD_models/Saturday, September 8, 12
さまざまな loader       • JSONLoader (recommend!)       • ColladaLoader.js       • OBJLoader.js       • UTF8Loader.js       • V...
便利なThree.jsのAPIs    注視点を座標で決めるSaturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
カメラの向き調整は大変Saturday, September 8, 12
camera.lookAt( new THREE.Vector3( 0, 0, 0) );Saturday, September 8, 12
Saturday, September 8, 12
lookAt なし   lookAt ありSaturday, September 8, 12
lookAt なし             lookAt あり                        http://yomotsu.github.com/                        html5conf2012/4.h...
便利なThree.jsのAPIs    モデルをクリックしたいSaturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
http://yomotsu.github.com/threejs-                        examples/ray_basic2/Saturday, September 8, 12
Three.jsには便利なAPIが       他にもたくさんあるSaturday, September 8, 12
Three.jsと組み合わせる    JSライブラリーで機能補完Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
+ 物理演算エンジン(Physics engine)Saturday, September 8, 12
Saturday, September 8, 12
Saturday, September 8, 12
Three.js             Physics engine       表現の世界                物理法則の世界          •形                 •形          • 材質       ...
Three.js             Physics engine       表現の世界                物理法則の世界          •形                 •形          • 材質       ...
Three.js                      Physics engine       表現の世界                         物理法則の世界                            • 重力で動...
おすすめのPhysics engine       • Physijs + Ammo.js          AmmoはC++のBulletから自動でJSに変換したライブラリ。1MBほどある。          PhysijsはAmmoを使いや...
Lets see some results             • http://yomotsu.github.com/threejs-examples/                cannonjs_control/          ...
Three.jsと組み合わせる    CSS 3D transformSaturday, September 8, 12
Saturday, September 8, 12
http://dev.w3.org/csswg/css3-3d-transforms/Saturday, September 8, 12
Saturday, September 8, 12
http://www.emagix.net/academic/mscs-                        project/item/camera-sync-with-css3-and-                       ...
Saturday, September 8, 12
http://yomotsu.github.com/threejs-                        examples/sync-with-css/Saturday, September 8, 12
Three.jsと組み合わせる    Web Audio APISaturday, September 8, 12
Saturday, September 8, 12
http://airtightinteractive.com/                        demos/js/reactive/Saturday, September 8, 12
Three.jsと組み合わせる    Media CaptureSaturday, September 8, 12
カメラと2D CanvasとWebGLでARSaturday, September 8, 12
Saturday, September 8, 12
http://fhtr.org/JSARToolKit/Saturday, September 8, 12
まとめSaturday, September 8, 12
• HTMLはグラフィクスのための技術でもあるSaturday, September 8, 12
• WebGLは高速で描画できる          • WebGL1.0はスタンダードな技術          • JavaScriptとGLSLで書く          • WebGLは学習コストがやや高いSaturday, Septembe...
• Three.jsはWebGLにおけるjQuery          • Three.jsのコードは直感的な操作          • Three.jsは組み合わせいろいろSaturday, September 8, 12
Webでの表現技術は                            進歩しているSaturday, September 8, 12
3DCGプログラミングも                            そのひとつSaturday, September 8, 12
any questions?                                  twiter@yomotsuSaturday, September 8, 12
Saturday, September 8, 12
Upcoming SlideShare
Loading in...5
×

WebGL and Three.js

51,806

Published on

introduction to WebGL and Three.js

Published in: Technology
4 Comments
135 Likes
Statistics
Notes
No Downloads
Views
Total Views
51,806
On Slideshare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
434
Comments
4
Likes
135
Embeds 0
No embeds

No notes for slide

WebGL and Three.js

  1. 1. 2012-09-08 Akihiro OyamadaSaturday, September 8, 12
  2. 2. おやまだ あきひろ 小山田 晃浩 twiter@yomotsu 株式会社ピクセルグリッド Microsoft MVP for IESaturday, September 8, 12
  3. 3. このセッションの流れ 1. HTMLとグラフィックス技術 2. WebGLとは 3. Three.jsとは 4. まとめSaturday, September 8, 12
  4. 4. Saturday, September 8, 12
  5. 5. <video> <audio> canvas CSS3 WOFF SVG (WebFonts) WebGL WebAudioSaturday, September 8, 12
  6. 6. HTMLはグラフィクスの技術でもあるSaturday, September 8, 12
  7. 7. Las t ye arSaturday, September 8, 12
  8. 8. Saturday, September 8, 12
  9. 9. Lets see some WebGL worksSaturday, September 8, 12
  10. 10. Saturday, September 8, 12
  11. 11. http://hexgl.bkcore.com/http://www.tangent3d.co.uk/armada/webshows/rayceasar/exhibition/http://stations.aeracode.org/http://www.solar-system-explorer.com/Saturday, September 8, 12
  12. 12. Webで3Dを描画する技術 用途はいろいろSaturday, September 8, 12
  13. 13. Saturday, September 8, 12
  14. 14. Saturday, September 8, 12
  15. 15. Saturday, September 8, 12
  16. 16. Saturday, September 8, 12
  17. 17. Saturday, September 8, 12
  18. 18. GPUに直接つながるので高速Saturday, September 8, 12
  19. 19. Saturday, September 8, 12
  20. 20. Saturday, September 8, 12
  21. 21. Saturday, September 8, 12
  22. 22. WebGLは標準技術Saturday, September 8, 12
  23. 23. WebGLを書いてみようSaturday, September 8, 12
  24. 24. Saturday, September 8, 12
  25. 25. Saturday, September 8, 12
  26. 26. Saturday, September 8, 12
  27. 27. Saturday, September 8, 12
  28. 28. Saturday, September 8, 12
  29. 29. WebGLで描けるのは三角形と点と線Saturday, September 8, 12
  30. 30. Saturday, September 8, 12
  31. 31. http://yomotsu.github.com/ html5conf2012/1.htmlSaturday, September 8, 12
  32. 32. <!doctype html> <html> //頂点 <head> var vertices = new Float32Array([ <meta charset="utf-8"> 0.0, 0.5, 0.0, <title>webgl demo</title> -0.5, -0.5, 0.0, <script> 0.5, -0.5, 0.0 document.addEventListener(DOMContentLoaded, function(){ var canvas = document.querySelector(#glcanvas); ]); var gl = canvas.getContext(experimental-webgl); // 頂点の数 var verticesLength = 3; var vShaderSource = [ // gl_Position は同次座標系 vec4(x, y, z, w); // VBOを作成する attribute vec4 a_Position;, var vertexBuffer = gl.createBuffer(); void main(){, gl_Position = a_Position;, // VBOをコンテキストにバインドしてカレントにする } gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); ].join(n); // カレントのバッファー(VBO)にデータを転送する gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var fShaderSource = [ // gl_FragColor は色 vec4(red, green, blur, alpha); var a_Position = gl.getAttribLocation(gl.program, void main(){, gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);, a_Position); } // a_Position変数にカレントのバッファーを割り当てる ].join(n); gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0); // 頂点シェーダーを作成する // a_Position変数でのバッファーの割り当てを有効化する var vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.enableVertexAttribArray(a_Position); // 頂点シェーダーにソースコードを指定する gl.shaderSource(vertexShader, vShaderSource); // Canvasをクリアする色を設定する // 頂点シェーダーをコンパイルする gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.compileShader(vertexShader); // Canvasをクリアする gl.clear(gl.COLOR_BUFFER_BIT); // フラグメントシェーダを作成する var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); // 三角形(TRIANGLES)描画モードで0番目から // フラグメントシェーダーにソースコードを指定する gl.shaderSource(fragmentShader, fShaderSource); // verticesLength個の頂点を描画 // フラグメントシェーダをコンパイルする gl.drawArrays(gl.TRIANGLES, 0, verticesLength); gl.compileShader(fragmentShader); }, false); // addEventLitener のおわり // シェーダープログラムを作成する var program = gl.createProgram(); </script> // シェーダープログラムにコンパイルした各シェーダを追加する </head> gl.attachShader(program, vertexShader); <body> gl.attachShader(program, fragmentShader); // シェーダープログラムに追加されたシェーダをリンクする <canvas id="glcanvas" width="500" height="500"></canvas> gl.linkProgram(program); // ここまでで設定したシェーダープログラムを描画時に利用する </body> gl.useProgram(program); </html> gl.program = program;Saturday, September 8, 12
  33. 33. コードで何をしているのかSaturday, September 8, 12
  34. 34. Saturday, September 8, 12
  35. 35. Saturday, September 8, 12
  36. 36. Saturday, September 8, 12
  37. 37. Saturday, September 8, 12
  38. 38. Saturday, September 8, 12
  39. 39. Saturday, September 8, 12
  40. 40. Saturday, September 8, 12
  41. 41. WebGLのながれ • 頂点情報の配列は... • Vertex Shaderで形になり • Flagment Shaderで色がつき • HTMLのcanvasに表示されるSaturday, September 8, 12
  42. 42. 各shaderは、 自分で用意しなければならないSaturday, September 8, 12
  43. 43. shaderはGLSLという言語で書くSaturday, September 8, 12
  44. 44. Saturday, September 8, 12
  45. 45. Saturday, September 8, 12
  46. 46. Saturday, September 8, 12
  47. 47. Saturday, September 8, 12
  48. 48. Saturday, September 8, 12
  49. 49. Saturday, September 8, 12
  50. 50. WebGLのながれ • Vertex Shaderソースを用意してコンパイル • Flagment Shaderソースを用意してコンパイル • それぞれをprogramに登録するSaturday, September 8, 12
  51. 51. JavaScriptから情報を入力するSaturday, September 8, 12
  52. 52. Saturday, September 8, 12
  53. 53. Saturday, September 8, 12
  54. 54. Saturday, September 8, 12
  55. 55. Saturday, September 8, 12
  56. 56. Saturday, September 8, 12
  57. 57. Saturday, September 8, 12
  58. 58. Saturday, September 8, 12
  59. 59. 手順が多く、敷居が高いSaturday, September 8, 12
  60. 60. でもThree.jsなら...!Saturday, September 8, 12
  61. 61. Three.jsとはSaturday, September 8, 12
  62. 62. Saturday, September 8, 12
  63. 63. http://mrdoob.github.com/three.js/Saturday, September 8, 12
  64. 64. Three.jsとは • WebGLのラッパーライブラリー • 複雑な手順は必要ない • WebGLを直感的に使うことができる • Mr.doob氏が中心になりGitHub上で開発されているSaturday, September 8, 12
  65. 65. Saturday, September 8, 12
  66. 66. http://www.webgl.com/Saturday, September 8, 12
  67. 67. WebGL作例の多くが Three.jsを使用Saturday, September 8, 12
  68. 68. Saturday, September 8, 12
  69. 69. Saturday, September 8, 12
  70. 70. 書籍でも WebGLの合わせて解説されるSaturday, September 8, 12
  71. 71. Three.jsは WebGLにおけるjQuerySaturday, September 8, 12
  72. 72. Three.jsのながれSaturday, September 8, 12
  73. 73. Three.jsの利用手順 1. レンダラーをHTMLにappend(設置) 2. シーンを作成 3. カメラを配置 4. ライトを配置 5. モデルを配置 6. 撮影Saturday, September 8, 12
  74. 74. <script src="three.min.js"></script> <script> //ここにTHREE.jsを用いた描画の処理を書いていく </script>Saturday, September 8, 12
  75. 75. window.addEventListener("DOMContentLoaded", function(){ //描画領域の大きさに利用する var width = window.innerWidth; var height = window.innerHeight; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定Saturday, September 8, 12
  76. 76. window.addEventListener("DOMContentLoaded", function(){ //描画領域の大きさに利用する var width = window.innerWidth; var height = window.innerHeight; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定Saturday, September 8, 12
  77. 77. window.addEventListener("DOMContentLoaded", function(){ //描画領域の大きさに利用する var width = window.innerWidth; var height = window.innerHeight; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera =Saturday, September 8, 12
  78. 78. //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );Saturday, September 8, 12
  79. 79. //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );Saturday, September 8, 12
  80. 80. //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );Saturday, September 8, 12
  81. 81. //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );Saturday, September 8, 12
  82. 82. //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );Saturday, September 8, 12
  83. 83. //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );Saturday, September 8, 12
  84. 84. //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );Saturday, September 8, 12
  85. 85. //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );Saturday, September 8, 12
  86. 86. //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );Saturday, September 8, 12
  87. 87. //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );Saturday, September 8, 12
  88. 88. //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );Saturday, September 8, 12
  89. 89. //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );Saturday, September 8, 12
  90. 90. //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );Saturday, September 8, 12
  91. 91. var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); directionalLight.position.z = 3; //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200);Saturday, September 8, 12
  92. 92. var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); directionalLight.position.z = 3; //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200);Saturday, September 8, 12
  93. 93. var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); directionalLight.position.z = 3; //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200);Saturday, September 8, 12
  94. 94. var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); directionalLight.position.z = 3; //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200); //マテリアルを設定 var material = new THREE.MeshLambertMaterial({color: 0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material); //メッシュをシーンに追加Saturday, September 8, 12
  95. 95. var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); directionalLight.position.z = 3; //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200); //マテリアルを設定 var material = new THREE.MeshLambertMaterial({color: 0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material); //メッシュをシーンに追加Saturday, September 8, 12
  96. 96. var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); directionalLight.position.z = 3; //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200); //マテリアルを設定 var material = new THREE.MeshLambertMaterial({color: 0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material); //メッシュをシーンに追加Saturday, September 8, 12
  97. 97. var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); //カメラの位置を手前に500移動 camera.position.z = 500; //カメラをシーンに追加 scene.add( camera ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); directionalLight.position.z = 3; //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200); //マテリアルを設定 var material = new THREE.MeshLambertMaterial({color: 0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material); //メッシュをシーンに追加Saturday, September 8, 12
  98. 98. //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); directionalLight.position.z = 3; //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200); //マテリアルを設定 var material = new THREE.MeshLambertMaterial({color: 0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); });Saturday, September 8, 12
  99. 99. //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); directionalLight.position.z = 3; //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200); //マテリアルを設定 var material = new THREE.MeshLambertMaterial({color: 0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); });Saturday, September 8, 12
  100. 100. //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); directionalLight.position.z = 3; //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200); //マテリアルを設定 var material = new THREE.MeshLambertMaterial({color: 0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); });Saturday, September 8, 12
  101. 101. //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); directionalLight.position.z = 3; //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200); //マテリアルを設定 var material = new THREE.MeshLambertMaterial({color: 0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); });Saturday, September 8, 12
  102. 102. //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200); //マテリアルを設定 var material = new THREE.MeshLambertMaterial({color: 0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); });Saturday, September 8, 12
  103. 103. //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200); //マテリアルを設定 var material = new THREE.MeshLambertMaterial({color: 0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); });Saturday, September 8, 12
  104. 104. //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200); //マテリアルを設定 var material = new THREE.MeshLambertMaterial({color: 0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); });Saturday, September 8, 12
  105. 105. //横幅、高さ、奥行きが200の立方体のジオメトリーを設定 var geometry = new THREE.CubeGeometry(200, 200, 200); //マテリアルを設定 var material = new THREE.MeshLambertMaterial({color: 0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); });Saturday, September 8, 12
  106. 106. //マテリアルを設定 var material = new THREE.MeshLambertMaterial({color: 0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); });Saturday, September 8, 12
  107. 107. Saturday, September 8, 12
  108. 108. http://yomotsu.github.com/ html5conf2012/2.htmlSaturday, September 8, 12
  109. 109. 正面から描画しているだけ...Saturday, September 8, 12
  110. 110. カメラ、モデル、光源を動かし、 連続でレンダリングするSaturday, September 8, 12
  111. 111. var theta = 0; function anim(){ var radian = theta * Math.PI / 180; cubeMesh.rotation.set( radian, radian, radian ); theta++; renderer.render( scene, camera ); requestAnimationFrame( anim ); }; anim();Saturday, September 8, 12
  112. 112. Saturday, September 8, 12
  113. 113. http://yomotsu.github.com/ html5conf2012/3.htmlSaturday, September 8, 12
  114. 114. Three.jsは直感的Saturday, September 8, 12
  115. 115. ほかにも、たくさんのAPIがあるSaturday, September 8, 12
  116. 116. 便利なThree.jsのAPIs モデルを読み込むSaturday, September 8, 12
  117. 117. Saturday, September 8, 12
  118. 118. Saturday, September 8, 12
  119. 119. THREE.collaraLoader THREE.OBJLoaderSaturday, September 8, 12
  120. 120. THREE.collaraLoader THREE.OBJLoaderSaturday, September 8, 12
  121. 121. Saturday, September 8, 12
  122. 122. https://github.com/mrdoob/ three.js/tree/master/examples/js/Saturday, September 8, 12
  123. 123. <script src="three.js"></script> <script src="ColladaLoader.js"></script>Saturday, September 8, 12
  124. 124. //collada loader var loader = new THREE.ColladaLoader(); loader.options.convertUpAxis = true; loader.load( model.dae, function( collada ) { var dae = collada.scene; scene.add( dae ); } );Saturday, September 8, 12
  125. 125. //collada loader var loader = new THREE.ColladaLoader(); loader.options.convertUpAxis = true; loader.load( model.dae, function( collada ) { var dae = collada.scene; scene.add( dae ); } );Saturday, September 8, 12
  126. 126. //collada loader var loader = new THREE.ColladaLoader(); loader.options.convertUpAxis = true; loader.load( model.dae, function( collada ) { var dae = collada.scene; scene.add( dae ); } );Saturday, September 8, 12
  127. 127. //collada loader var loader = new THREE.ColladaLoader(); loader.options.convertUpAxis = true; loader.load( model.dae, function( collada ) { var dae = collada.scene; scene.add( dae ); } );Saturday, September 8, 12
  128. 128. //collada loader var loader = new THREE.ColladaLoader(); loader.options.convertUpAxis = true; loader.load( model.dae, function( collada ) { var dae = collada.scene; scene.add( dae ); } );Saturday, September 8, 12
  129. 129. Saturday, September 8, 12
  130. 130. http://yomotsu.github.com/threejs- examples/load_converted_MMD_models/Saturday, September 8, 12
  131. 131. さまざまな loader • JSONLoader (recommend!) • ColladaLoader.js • OBJLoader.js • UTF8Loader.js • VTKLoader.jsSaturday, September 8, 12
  132. 132. 便利なThree.jsのAPIs 注視点を座標で決めるSaturday, September 8, 12
  133. 133. Saturday, September 8, 12
  134. 134. Saturday, September 8, 12
  135. 135. Saturday, September 8, 12
  136. 136. カメラの向き調整は大変Saturday, September 8, 12
  137. 137. camera.lookAt( new THREE.Vector3( 0, 0, 0) );Saturday, September 8, 12
  138. 138. Saturday, September 8, 12
  139. 139. lookAt なし lookAt ありSaturday, September 8, 12
  140. 140. lookAt なし lookAt あり http://yomotsu.github.com/ html5conf2012/4.htmlSaturday, September 8, 12
  141. 141. 便利なThree.jsのAPIs モデルをクリックしたいSaturday, September 8, 12
  142. 142. Saturday, September 8, 12
  143. 143. Saturday, September 8, 12
  144. 144. Saturday, September 8, 12
  145. 145. Saturday, September 8, 12
  146. 146. Saturday, September 8, 12
  147. 147. Saturday, September 8, 12
  148. 148. http://yomotsu.github.com/threejs- examples/ray_basic2/Saturday, September 8, 12
  149. 149. Three.jsには便利なAPIが 他にもたくさんあるSaturday, September 8, 12
  150. 150. Three.jsと組み合わせる JSライブラリーで機能補完Saturday, September 8, 12
  151. 151. Saturday, September 8, 12
  152. 152. Saturday, September 8, 12
  153. 153. Saturday, September 8, 12
  154. 154. + 物理演算エンジン(Physics engine)Saturday, September 8, 12
  155. 155. Saturday, September 8, 12
  156. 156. Saturday, September 8, 12
  157. 157. Three.js Physics engine 表現の世界 物理法則の世界 •形 •形 • 材質 • 大きさ • 光と影 • 重さ • 反射 •力 • 特殊シェーダー • 摩擦 • 衝突Saturday, September 8, 12
  158. 158. Three.js Physics engine 表現の世界 物理法則の世界 •形 •形 • 材質 • 大きさ • 光と影 • 重さ • 反射 •力 • 特殊シェーダー • 摩擦 • 衝突Saturday, September 8, 12
  159. 159. Three.js Physics engine 表現の世界 物理法則の世界 • 重力で動いた座標 • 力によって動いた座標 • 動いたことによる衝突時の座標 etc...Saturday, September 8, 12
  160. 160. おすすめのPhysics engine • Physijs + Ammo.js AmmoはC++のBulletから自動でJSに変換したライブラリ。1MBほどある。 PhysijsはAmmoを使いやすくするラッパー。 • cannon.js JSでゼロから作られたライブラリー。50KB以下でかなり軽量。開発途中。 • box2dweb.js 2D物理エンジン。box2dのJS版。box2.jsよりもメンテナンスされている。Saturday, September 8, 12
  161. 161. Lets see some results • http://yomotsu.github.com/threejs-examples/ cannonjs_control/ • http://yomotsu.github.com/threejs-examples/ box2dwebjs_ragdoll/Saturday, September 8, 12
  162. 162. Three.jsと組み合わせる CSS 3D transformSaturday, September 8, 12
  163. 163. Saturday, September 8, 12
  164. 164. http://dev.w3.org/csswg/css3-3d-transforms/Saturday, September 8, 12
  165. 165. Saturday, September 8, 12
  166. 166. http://www.emagix.net/academic/mscs- project/item/camera-sync-with-css3-and- webgl-threejsSaturday, September 8, 12
  167. 167. Saturday, September 8, 12
  168. 168. http://yomotsu.github.com/threejs- examples/sync-with-css/Saturday, September 8, 12
  169. 169. Three.jsと組み合わせる Web Audio APISaturday, September 8, 12
  170. 170. Saturday, September 8, 12
  171. 171. http://airtightinteractive.com/ demos/js/reactive/Saturday, September 8, 12
  172. 172. Three.jsと組み合わせる Media CaptureSaturday, September 8, 12
  173. 173. カメラと2D CanvasとWebGLでARSaturday, September 8, 12
  174. 174. Saturday, September 8, 12
  175. 175. http://fhtr.org/JSARToolKit/Saturday, September 8, 12
  176. 176. まとめSaturday, September 8, 12
  177. 177. • HTMLはグラフィクスのための技術でもあるSaturday, September 8, 12
  178. 178. • WebGLは高速で描画できる • WebGL1.0はスタンダードな技術 • JavaScriptとGLSLで書く • WebGLは学習コストがやや高いSaturday, September 8, 12
  179. 179. • Three.jsはWebGLにおけるjQuery • Three.jsのコードは直感的な操作 • Three.jsは組み合わせいろいろSaturday, September 8, 12
  180. 180. Webでの表現技術は 進歩しているSaturday, September 8, 12
  181. 181. 3DCGプログラミングも そのひとつSaturday, September 8, 12
  182. 182. any questions? twiter@yomotsuSaturday, September 8, 12
  183. 183. Saturday, September 8, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×