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://hexgl.bkcore.com/

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. 撮影

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

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