WebGL and Three.js

2012-09-08 Akihiro Oyamada

Saturday, September 8, 12

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


このセッションの流れ

1. HTMLとグラフィックス技術

2. WebGLとは

3. Three.jsとは

4. まとめ



WebGL WebAudio

CSS3 SVGWOFF(WebFonts)

<audio><video> canvas


HTMLはグラフィクスの技術でもある


Last year



Let's see some WebGL works



http://www.solar-system-explorer.com/

http://stations.aeracode.org/

http://www.tangent3d.co.uk/armada/webshows/rayceasar/exhibition/

http://hexgl.bkcore.com/




http://stations.aeracode.org

http://stations.aeracode.org





Webで3Dを描画する技術用途はいろいろ







GPUに直接つながるので高速





WebGLは標準技術


WebGLを書いてみよう







WebGLで描けるのは三角形と点と線



http://yomotsu.github.com/html5conf2012/1.html






<!doctype html><html><head><meta charset="utf-8"><title>webgl demo</title><script>document.addEventListener('DOMContentLoaded', function(){ var canvas = document.querySelector('#glcanvas'); var gl = canvas.getContext('experimental-webgl'); var vShaderSource = [ // gl_Position は同次座標系 vec4(x, y, z, w); 'attribute vec4 a_Position;', 'void main(){', ' gl_Position = a_Position;', '}' ].join('\n'); var fShaderSource = [ // gl_FragColor は色 vec4(red, green, blur, alpha); 'void main(){', ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);', '}' ].join('\n'); // 頂点シェーダーを作成する var vertexShader = gl.createShader(gl.VERTEX_SHADER); // 頂点シェーダーにソースコードを指定する gl.shaderSource(vertexShader, vShaderSource); // 頂点シェーダーをコンパイルする gl.compileShader(vertexShader); // フラグメントシェーダを作成する var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); // フラグメントシェーダーにソースコードを指定する gl.shaderSource(fragmentShader, fShaderSource); // フラグメントシェーダをコンパイルする gl.compileShader(fragmentShader); // シェーダープログラムを作成する var program = gl.createProgram(); // シェーダープログラムにコンパイルした各シェーダを追加する gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // シェーダープログラムに追加されたシェーダをリンクする gl.linkProgram(program); // ここまでで設定したシェーダープログラムを描画時に利用する gl.useProgram(program); gl.program = program;

//頂点 var vertices = new Float32Array([ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ]); // 頂点の数 var verticesLength = 3; // VBOを作成する var vertexBuffer = gl.createBuffer(); // VBOをコンテキストにバインドしてカレントにする gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // カレントのバッファー(VBO)にデータを転送する gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); // a_Position変数にカレントのバッファーを割り当てる gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0); // a_Position変数でのバッファーの割り当てを有効化する gl.enableVertexAttribArray(a_Position);

// Canvasをクリアする色を設定するgl.clearColor(0.0, 0.0, 0.0, 1.0);// Canvasをクリアするgl.clear(gl.COLOR_BUFFER_BIT);

// 三角形(TRIANGLES)描画モードで0番目から // verticesLength個の頂点を描画 gl.drawArrays(gl.TRIANGLES, 0, verticesLength); }, false); // addEventLitener のおわり </script></head><body> <canvas id="glcanvas" width="500" height="500"></canvas> </body></html>


コードで何をしているのか









WebGLのながれ

• 頂点情報の配列は...

• Vertex Shaderで形になり

• Flagment Shaderで色がつき

•HTMLのcanvasに表示される


各shaderは、自分で用意しなければならない


shaderはGLSLという言語で書く








WebGLのながれ

• Vertex Shaderソースを用意してコンパイル

• Flagment Shaderソースを用意してコンパイル

•それぞれをprogramに登録する


JavaScriptから情報を入力する









手順が多く、敷居が高い


でもThree.jsなら...!


Three.jsとは



http://mrdoob.github.com/three.js/




Three.jsとは

• WebGLのラッパーライブラリー

•複雑な手順は必要ない

•WebGLを直感的に使うことができる

•Mr.doob氏が中心になりGitHub上で開発されている



http://www.webgl.com/




WebGL作例の多くがThree.jsを使用




書籍でもWebGLの合わせて解説される


Three.jsはWebGLにおけるjQuery


Three.jsのながれ


Three.jsの利用手順

1. レンダラーをHTMLにappend(設置)

2. シーンを作成

3. カメラを配置

4. ライトを配置

5. モデルを配置

6. 撮影


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


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 = 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); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera );});











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 = 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 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 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 );});








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


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












正面から描画しているだけ...


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


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();









Three.jsは直感的


ほかにも、たくさんのAPIがある


便利なThree.jsのAPIs

モデルを読み込む




THREE.collaraLoader

THREE.OBJLoader


THREE.collaraLoader

THREE.OBJLoader



https://github.com/mrdoob/three.js/tree/master/examples/js/


https://github.com/mrdoob/three.js/tree/master/examples/js/loaders




<script src="three.js"></script><script src="ColladaLoader.js"></script>


//collada loadervar loader = new THREE.ColladaLoader();loader.options.convertUpAxis = true;loader.load( 'model.dae', function( collada ) { var dae = collada.scene; scene.add( dae );} );











http://yomotsu.github.com/threejs-examples/load_converted_MMD_models/






さまざまな loader

• JSONLoader (recommend!)

• ColladaLoader.js

• OBJLoader.js

• UTF8Loader.js

• VTKLoader.js



注視点を座標で決める





カメラの向き調整は大変


camera.lookAt( new THREE.Vector3( 0, 0, 0) );



lookAt ありlookAt なし



lookAt ありlookAt なし







モデルをクリックしたい








http://yomotsu.github.com/threejs-examples/ray_basic2/






Three.jsには便利なAPIが他にもたくさんある


Three.jsと組み合わせる

JSライブラリーで機能補完





+ 物理演算エンジン(Physics engine)




Three.js表現の世界

Physics engine物理法則の世界

• 形• 材質• 光と影•反射• 特殊シェーダー

•形• 大きさ•重さ• 力• 摩擦• 衝突


• 形• 材質• 光と影•反射• 特殊シェーダー

•形• 大きさ•重さ• 力• 摩擦• 衝突




• 重力で動いた座標•力によって動いた座標•動いたことによる衝突時の座標etc...




おすすめのPhysics engine

• Physijs + Ammo.jsAmmoはC++のBulletから自動でJSに変換したライブラリ。1MBほどある。

PhysijsはAmmoを使いやすくするラッパー。

• cannon.jsJSでゼロから作られたライブラリー。50KB以下でかなり軽量。開発途中。

• box2dweb.js2D物理エンジン。box2dのJS版。box2.jsよりもメンテナンスされている。


Let's see some results• http://yomotsu.github.com/threejs-examples/

cannonjs_control/

• http://yomotsu.github.com/threejs-examples/

box2dwebjs_ragdoll/


http://yomotsu.github.com/threejs-examples/cannonjs_control/




http://yomotsu.github.com/threejs-examples/box2dwebjs_ragdoll/





CSS 3D transform



http://dev.w3.org/csswg/css3-3d-transforms/





http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs









http://yomotsu.github.com/threejs-examples/sync-with-css/


http://yomotsu.github.com/threejs-examples/sync-with-css





Web Audio API



http://airtightinteractive.com/demos/js/reactive/







Media Capture


カメラと2D CanvasとWebGLでAR



http://fhtr.org/JSARToolKit/




まとめ


• HTMLはグラフィクスのための技術でもある


• WebGLは高速で描画できる

• WebGL1.0はスタンダードな技術

• JavaScriptとGLSLで書く

• WebGLは学習コストがやや高い


• Three.jsはWebGLにおけるjQuery

• Three.jsのコードは直感的な操作

• Three.jsは組み合わせいろいろ


Webでの表現技術は進歩している


3DCGプログラミングもそのひとつ


any questions?twiter@yomotsu



WebGL and Three.js

Technology