WebGL and Three.js

1. 2012-09-08 Akihiro Oyamada Saturday, September 8, 12

2. おやまだあきひろ小山田晃浩 twiter@yomotsu 株式会社ピクセルグリッド Microsoft MVP for IE Saturday, September 8, 12

3. このセッションの流れ 1. HTMLとグラフィックス技術 2. WebGLとは 3. Three.jsとは 4. まとめ Saturday, September 8, 12

4. Saturday, September 8, 12

5. <video> <audio> canvas CSS3 WOFF SVG (WebFonts) WebGL WebAudio Saturday, September 8, 12

6. HTMLはグラフィクスの技術でもある Saturday, September 8, 12

7. Las t ye ar Saturday, September 8, 12

9. Let's see some WebGL works Saturday, September 8, 12

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. Webで3Dを描画する技術用途はいろいろ Saturday, September 8, 12

18. GPUに直接つながるので高速 Saturday, September 8, 12

22. WebGLは標準技術 Saturday, September 8, 12

23. WebGLを書いてみよう Saturday, September 8, 12

29. WebGLで描けるのは三角形と点と線 Saturday, September 8, 12

31. http://yomotsu.github.com/ html5conf2012/1.html Saturday, September 8, 12

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. コードで何をしているのか Saturday, September 8, 12

41. WebGLのながれ • 頂点情報の配列は... • Vertex Shaderで形になり • Flagment Shaderで色がつき • HTMLのcanvasに表示される Saturday, September 8, 12

42. 各shaderは、自分で用意しなければならない Saturday, September 8, 12

43. shaderはGLSLという言語で書く Saturday, September 8, 12

50. WebGLのながれ • Vertex Shaderソースを用意してコンパイル • Flagment Shaderソースを用意してコンパイル • それぞれをprogramに登録する Saturday, September 8, 12

51. JavaScriptから情報を入力する Saturday, September 8, 12

59. 手順が多く、敷居が高い Saturday, September 8, 12

60. でもThree.jsなら...! Saturday, September 8, 12

61. Three.jsとは Saturday, September 8, 12

63. http://mrdoob.github.com/three.js/ Saturday, September 8, 12

64. Three.jsとは • WebGLのラッパーライブラリー • 複雑な手順は必要ない • WebGLを直感的に使うことができる • Mr.doob氏が中心になりGitHub上で開発されている Saturday, September 8, 12

66. http://www.webgl.com/ Saturday, September 8, 12

67. WebGL作例の多くが Three.jsを使用 Saturday, September 8, 12

70. 書籍でも WebGLの合わせて解説される Saturday, September 8, 12

71. Three.jsは WebGLにおけるjQuery Saturday, September 8, 12

72. Three.jsのながれ Saturday, September 8, 12

73. Three.jsの利用手順 1. レンダラーをHTMLにappend(設置) 2. シーンを作成 3. カメラを配置 4. ライトを配置 5. モデルを配置 6. 撮影 Saturday, September 8, 12

74. <script src="three.min.js"></script> <script> //ここにTHREE.jsを用いた描画の処理を書いていく </script> Saturday, September 8, 12

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. 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. 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. //レンダラーのサイズは当初設定した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. 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. 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. //光源を設定 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. //光源をシーンに追加 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. //横幅、高さ、奥行きが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. //マテリアルを設定 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

109. 正面から描画しているだけ... Saturday, September 8, 12

110. カメラ、モデル、光源を動かし、連続でレンダリングする Saturday, September 8, 12

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

114. Three.jsは直感的 Saturday, September 8, 12

115. ほかにも、たくさんのAPIがある Saturday, September 8, 12

116. 便利なThree.jsのAPIs モデルを読み込む Saturday, September 8, 12

119. THREE.collaraLoader THREE.OBJLoader Saturday, September 8, 12

120. THREE.collaraLoader THREE.OBJLoader Saturday, September 8, 12

122. https://github.com/mrdoob/ three.js/tree/master/examples/js/ Saturday, September 8, 12

123. <script src="three.js"></script> <script src="ColladaLoader.js"></script> Saturday, September 8, 12

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

130. http://yomotsu.github.com/threejs- examples/load_converted_MMD_models/ Saturday, September 8, 12

131. さまざまな loader • JSONLoader (recommend!) • ColladaLoader.js • OBJLoader.js • UTF8Loader.js • VTKLoader.js Saturday, September 8, 12

132. 便利なThree.jsのAPIs 注視点を座標で決める Saturday, September 8, 12

136. カメラの向き調整は大変 Saturday, September 8, 12

137. camera.lookAt( new THREE.Vector3( 0, 0, 0) ); Saturday, September 8, 12

139. lookAt なし lookAt あり Saturday, September 8, 12

140. lookAt なし lookAt あり http://yomotsu.github.com/ html5conf2012/4.html Saturday, September 8, 12

141. 便利なThree.jsのAPIs モデルをクリックしたい Saturday, September 8, 12

148. http://yomotsu.github.com/threejs- examples/ray_basic2/ Saturday, September 8, 12

149. Three.jsには便利なAPIが他にもたくさんある Saturday, September 8, 12

150. Three.jsと組み合わせる JSライブラリーで機能補完 Saturday, September 8, 12

154. + 物理演算エンジン(Physics engine) Saturday, September 8, 12

157. Three.js Physics engine 表現の世界物理法則の世界 •形 •形 • 材質 • 大きさ • 光と影 • 重さ • 反射 •力 • 特殊シェーダー • 摩擦 • 衝突 Saturday, September 8, 12

158. Three.js Physics engine 表現の世界物理法則の世界 •形 •形 • 材質 • 大きさ • 光と影 • 重さ • 反射 •力 • 特殊シェーダー • 摩擦 • 衝突 Saturday, September 8, 12

159. Three.js Physics engine 表現の世界物理法則の世界 • 重力で動いた座標 • 力によって動いた座標 • 動いたことによる衝突時の座標 etc... Saturday, September 8, 12

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. Let's see some results • http://yomotsu.github.com/threejs-examples/ cannonjs_control/ • http://yomotsu.github.com/threejs-examples/ box2dwebjs_ragdoll/ Saturday, September 8, 12

162. Three.jsと組み合わせる CSS 3D transform Saturday, September 8, 12

164. http://dev.w3.org/csswg/css3-3d-transforms/ Saturday, September 8, 12

166. http://www.emagix.net/academic/mscs- project/item/camera-sync-with-css3-and- webgl-threejs Saturday, September 8, 12

168. http://yomotsu.github.com/threejs- examples/sync-with-css/ Saturday, September 8, 12

169. Three.jsと組み合わせる Web Audio API Saturday, September 8, 12

171. http://airtightinteractive.com/ demos/js/reactive/ Saturday, September 8, 12

172. Three.jsと組み合わせる Media Capture Saturday, September 8, 12

173. カメラと2D CanvasとWebGLでAR Saturday, September 8, 12

175. http://fhtr.org/JSARToolKit/ Saturday, September 8, 12

176. まとめ Saturday, September 8, 12

177. • HTMLはグラフィクスのための技術でもある Saturday, September 8, 12

178. • WebGLは高速で描画できる • WebGL1.0はスタンダードな技術 • JavaScriptとGLSLで書く • WebGLは学習コストがやや高い Saturday, September 8, 12

179. • Three.jsはWebGLにおけるjQuery • Three.jsのコードは直感的な操作 • Three.jsは組み合わせいろいろ Saturday, September 8, 12

180. Webでの表現技術は進歩している Saturday, September 8, 12

181. 3DCGプログラミングもそのひとつ Saturday, September 8, 12

182. any questions? twiter@yomotsu Saturday, September 8, 12

WebGL and Three.js

More Related Content

WebGL and Three.js