• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WebGL and Three.js
 

WebGL and Three.js

on

  • 47,784 views

introduction to WebGL and Three.js

introduction to WebGL and Three.js

Statistics

Views

Total Views
47,784
Views on SlideShare
28,203
Embed Views
19,581

Actions

Likes
118
Downloads
355
Comments
3

83 Embeds 19,581

http://stocker.jp 13203
http://w3q.jp 1210
http://fumijp.blogspot.com 805
http://fumijp.blogspot.jp 733
http://fumit.blogspot.jp 633
http://naoyashiga.hatenablog.com 607
https://twitter.com 581
https://twitter.com 581
http://akikotake.tumblr.com 198
http://thisiswebthings.tumblr.com 164
http://fumijp.blogspot.co.uk 96
http://tweetedtimes.com 57
http://fumit.blogspot.com 48
http://fumijp.blogspot.ca 47
http://fumijp.blogspot.in 46
http://twitter.com 46
http://wiki.onakasuita.org 43
http://fumijp.blogspot.com.au 40
http://fumijp.blogspot.de 34
http://d.hatena.ne.jp 30
http://fumijp.blogspot.sg 28
http://fumijp.blogspot.fr 25
http://s.deeeki.com 21
http://fumijp.blogspot.hu 14
http://fumijp.blogspot.kr 14
http://fumijp.blogspot.mx 14
http://hackernotes.org 14
http://fumijp.blogspot.hk 13
http://fumijp.blogspot.tw 12
https://si0.twimg.com 12
http://fumijp.blogspot.com.br 11
http://www.thehackernotes.com 9
http://fumijp.blogspot.ie 9
http://fumijp.blogspot.com.ar 9
http://fumijp.blogspot.fi 9
http://webcache.googleusercontent.com 9
http://fumijp.blogspot.com.es 8
http://sc.dotbranch.com 8
http://fumijp.blogspot.ch 8
http://fumijp.blogspot.it 8
http://fumijp.blogspot.nl 7
http://fumijp.blogspot.co.nz 7
http://localhost 6
http://fumijp.blogspot.ro 6
http://nuevospowerpoints.blogspot.com 6
http://nuevospowerpoints.blogspot.com.es 6
http://fumijp.blogspot.co.il 5
http://fumijp.blogspot.gr 5
http://fumijp.blogspot.se 5
https://twimg0-a.akamaihd.net 4
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Great presentation
    Are you sure you want to
    Your message goes here
    Processing…
  • @claudio_di_capua
    thank you for seeing my slide.
    I just changed the setting. now you can download it.

    Plus, I have shared figures. if you like, check it out as well.
    https://github.com/yomotsu/figures-to-explain-webgl-threejs
    Are you sure you want to
    Your message goes here
    Processing…
  • Could you activate the save option, i don't want loss this material in the future.
    A very good introduction.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    WebGL and Three.js WebGL and Three.js Presentation Transcript

    • 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
    • Saturday, September 8, 12
    • Lets see some WebGL worksSaturday, September 8, 12
    • Saturday, 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
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • GPUに直接つながるので高速Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • WebGLは標準技術Saturday, September 8, 12
    • WebGLを書いてみようSaturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • WebGLで描けるのは三角形と点と線Saturday, September 8, 12
    • 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
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • 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
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • WebGLのながれ • Vertex Shaderソースを用意してコンパイル • Flagment Shaderソースを用意してコンパイル • それぞれをprogramに登録するSaturday, September 8, 12
    • JavaScriptから情報を入力するSaturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • 手順が多く、敷居が高いSaturday, September 8, 12
    • でもThree.jsなら...!Saturday, September 8, 12
    • Three.jsとはSaturday, September 8, 12
    • 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
    • Saturday, September 8, 12
    • http://www.webgl.com/Saturday, September 8, 12
    • WebGL作例の多くが Three.jsを使用Saturday, September 8, 12
    • Saturday, September 8, 12
    • 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
    • <script src="three.min.js"></script> <script> //ここにTHREE.jsを用いた描画の処理を書いていく </script>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(); //カメラを設定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
    • //レンダラーのサイズは当初設定した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
    • //レンダラーのサイズは当初設定した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
    • //レンダラーのサイズは当初設定した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
    • //レンダラーのサイズは当初設定した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
    • //レンダラーのサイズは当初設定した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
    • //レンダラーのサイズは当初設定した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
    • //レンダラーのサイズは当初設定した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
    • //レンダラーのサイズは当初設定した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
    • //レンダラーのサイズは当初設定した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
    • //レンダラーのサイズは当初設定した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
    • //レンダラーのサイズは当初設定した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
    • //レンダラーのサイズは当初設定した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 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 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 ); });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
    • //光源を設定 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
    • //光源を設定 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
    • //横幅、高さ、奥行きが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
    • http://yomotsu.github.com/ html5conf2012/2.htmlSaturday, 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
    • Saturday, September 8, 12
    • http://yomotsu.github.com/ html5conf2012/3.htmlSaturday, September 8, 12
    • Three.jsは直感的Saturday, September 8, 12
    • ほかにも、たくさんのAPIがあるSaturday, September 8, 12
    • 便利なThree.jsのAPIs モデルを読み込むSaturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • THREE.collaraLoader THREE.OBJLoaderSaturday, September 8, 12
    • THREE.collaraLoader THREE.OBJLoaderSaturday, September 8, 12
    • Saturday, September 8, 12
    • https://github.com/mrdoob/ three.js/tree/master/examples/js/Saturday, September 8, 12
    • <script src="three.js"></script> <script src="ColladaLoader.js"></script>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
    • //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
    • //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
    • //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
    • //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
    • 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
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • カメラの向き調整は大変Saturday, September 8, 12
    • camera.lookAt( new THREE.Vector3( 0, 0, 0) );Saturday, September 8, 12
    • 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
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • 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
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • + 物理演算エンジン(Physics engine)Saturday, September 8, 12
    • Saturday, September 8, 12
    • Saturday, September 8, 12
    • Three.js 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
    • Saturday, September 8, 12
    • http://dev.w3.org/csswg/css3-3d-transforms/Saturday, September 8, 12
    • Saturday, September 8, 12
    • http://www.emagix.net/academic/mscs- project/item/camera-sync-with-css3-and- webgl-threejsSaturday, September 8, 12
    • Saturday, September 8, 12
    • http://yomotsu.github.com/threejs- examples/sync-with-css/Saturday, September 8, 12
    • Three.jsと組み合わせる Web Audio APISaturday, September 8, 12
    • Saturday, 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
    • Saturday, 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
    • Saturday, September 8, 12