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/

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

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

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

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/

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

モデルをクリックしたい

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/

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/

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

three.js の紹介

introduction to webgl and webvr

creating applications with webgl and three.js

finding the key - malwine(using web technologies: html, dom,...

webgl (three.js) code lab - intro. [ gtug girls 10th]

enei16 - webgl with three.js

html5, css3, canvas, svg and webgl

introduction to three.js & leap motion

140716 : 同業前端聚會分享 - webgl 與 three.js

webgl i (all-round) · webgl 기초-webgl = rasterization...

opengl and webgl

latham, william; todd, stephen; todd, peter and putnam...

implementation of a pic simulation using webgl · 1.5...

datenvisualisierung mit webgl (three.js)

the next frontier: webgl and webvr

integrating angular js & three.js

ie webgl and babylon.js (web3d 2014)

webgl -...

webgl: up and running - gbv

lessons learned with unity and webgl