WebGL and Three.js

2012-09-08 Akihiro OyamadaSaturday, September 8, 12

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

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

Saturday, September 8, 12

<video> <audio> canvas CSS3 WOFF SVG (WebFonts) WebGL WebAudioSaturday, September 8, 12

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

Las t ye arSaturday, September 8, 12

Lets see some WebGL worksSaturday, September 8, 12

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

Webで3Dを描画する技術用途はいろいろSaturday, September 8, 12

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

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

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

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

http://yomotsu.github.com/ html5conf2012/1.htmlSaturday, September 8, 12

<!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

コードで何をしているのかSaturday, September 8, 12

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

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

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

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

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

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

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

Three.jsとはSaturday, September 8, 12

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

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

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

WebGL作例の多くが Three.jsを使用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. 撮影Saturday, September 8, 12

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

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

//レンダラーのサイズは当初設定した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

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

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

//光源を設定 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

//光源をシーンに追加 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

//横幅、高さ、奥行きが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

//マテリアルを設定 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

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

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

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

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

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

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

THREE.collaraLoader THREE.OBJLoaderSaturday, September 8, 12

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

//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

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

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

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

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

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

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

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

便利なThree.jsのAPIs モデルをクリックしたい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

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

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

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

おすすめの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

Lets see some results • http://yomotsu.github.com/threejs-examples/ cannonjs_control/ • http://yomotsu.github.com/threejs-examples/ box2dwebjs_ragdoll/Saturday, September 8, 12

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

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

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

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

Three.jsと組み合わせる Web Audio APISaturday, 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

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

まとめSaturday, September 8, 12

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

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

• 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

http://stocker.jp	12377
http://w3q.jp	1210
http://fumijp.blogspot.com	759
http://fumijp.blogspot.jp	674
http://fumit.blogspot.jp	540
https://twitter.com	505
https://twitter.com	505
http://akikotake.tumblr.com	179
http://thisiswebthings.tumblr.com	105
http://fumijp.blogspot.co.uk	95
http://tweetedtimes.com	57
http://fumit.blogspot.com	47
http://twitter.com	46
http://fumijp.blogspot.ca	44
http://fumijp.blogspot.com.au	39
http://fumijp.blogspot.in	38
http://fumijp.blogspot.de	32
http://d.hatena.ne.jp	30
http://fumijp.blogspot.sg	27
http://fumijp.blogspot.fr	20
http://fumijp.blogspot.hu	14
http://fumijp.blogspot.mx	14
http://fumijp.blogspot.kr	13
http://fumijp.blogspot.hk	12
https://si0.twimg.com	12
http://fumijp.blogspot.tw	11
http://fumijp.blogspot.ie	9
http://fumijp.blogspot.com.br	9
http://fumijp.blogspot.com.ar	9
http://wiki.onakasuita.org	9
http://fumijp.blogspot.it	8
http://fumijp.blogspot.fi	8
http://sc.dotbranch.com	8
http://webcache.googleusercontent.com	8
http://fumijp.blogspot.com.es	8
http://fumijp.blogspot.ch	6
http://nuevospowerpoints.blogspot.com	6
http://fumijp.blogspot.nl	6
http://nuevospowerpoints.blogspot.com.es	6
http://fumijp.blogspot.ro	6
http://fumijp.blogspot.co.nz	6
http://fumijp.blogspot.co.il	5
http://fumijp.blogspot.gr	5
http://fumijp.blogspot.se	5
http://translate.googleusercontent.com	4
http://fumijp.blogspot.no	4
http://www.tumblr.com	4
https://twimg0-a.akamaihd.net	4
http://ss.dotbranch.com	4
http://fumijp.blogspot.dk	4
http://fumijp.blogspot.co.at	3

WebGL and Three.js

by yomotsu on Sep 08, 2012

Accessibility

Categories

Upload Details

Usage Rights

70 Embeds 17,585

Statistics

WebGL and Three.js Presentation Transcript