Download as PDF, PPTX
![<!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](https://image.slidesharecdn.com/slide-120908003835-phpapp02/85/WebGL-and-Three-js-32-320.jpg)
![<!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](https://image.slidesharecdn.com/slide-120908003835-phpapp02/75/WebGL-and-Three-js-32-2048.jpg)
More Related Content
![WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]](https://cdn.slidesharecdn.com/ss_thumbnails/webglgtug10th-130122052159-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
WebGL and Three.js
- 1. 2012-09-08 Akihiro Oyamada Saturday,September 8, 12
- 2. おやまだ あきひろ 小山田 晃浩 twiter@yomotsu 株式会社ピクセルグリッド Microsoft MVP for IE Saturday, September 8, 12
- 3. このセッションの流れ 1. HTMLとグラフィックス技術 2. WebGLとは 3. Three.jsとは 4. まとめ Saturday, September 8, 12
- 4.
- 5. <video> <audio> canvas CSS3 WOFF SVG (WebFonts) WebGL WebAudio Saturday, September 8, 12
- 6.
- 7. Las t ye ar Saturday, September 8, 12
- 8.
- 9. Let's see someWebGL works Saturday, September 8, 12
- 10.
- 11.
- 12. Webで3Dを描画する技術 用途はいろいろ Saturday, September 8, 12
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. http://yomotsu.github.com/ html5conf2012/1.html Saturday, September 8, 12
- 32. <!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
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. WebGLのながれ • 頂点情報の配列は... • Vertex Shaderで形になり • Flagment Shaderで色がつき • HTMLのcanvasに表示される Saturday, September 8, 12
- 42. 各shaderは、 自分で用意しなければならない Saturday, September 8, 12
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. WebGLのながれ • Vertex Shaderソースを用意してコンパイル • Flagment Shaderソースを用意してコンパイル • それぞれをprogramに登録する Saturday, September 8, 12
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64. Three.jsとは • WebGLのラッパーライブラリー • 複雑な手順は必要ない • WebGLを直感的に使うことができる • Mr.doob氏が中心になりGitHub上で開発されている Saturday, September 8, 12
- 65.
- 66.
- 67. WebGL作例の多くが Three.jsを使用 Saturday, September 8, 12
- 68.
- 69.
- 70. 書籍でも WebGLの合わせて解説される Saturday, September 8, 12
- 71. Three.jsは WebGLにおけるjQuery Saturday, September 8, 12
- 72.
- 73. Three.jsの利用手順 1. レンダラーをHTMLにappend(設置) 2. シーンを作成 3. カメラを配置 4. ライトを配置 5. モデルを配置 6. 撮影 Saturday, September 8, 12
- 74. <script src="three.min.js"></script> <script> //ここにTHREE.jsを用いた描画の処理を書いていく </script> Saturday, September 8, 12
- 75. 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
- 76. 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
- 77. 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
- 78. //レンダラーのサイズは当初設定した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
- 79. //レンダラーのサイズは当初設定した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
- 80. //レンダラーのサイズは当初設定した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
- 81. //レンダラーのサイズは当初設定した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
- 82. //レンダラーのサイズは当初設定した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
- 83. //レンダラーのサイズは当初設定した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
- 84. //レンダラーのサイズは当初設定した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
- 85. //レンダラーのサイズは当初設定した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
- 86. //レンダラーのサイズは当初設定した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
- 87. //レンダラーのサイズは当初設定した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
- 88. //レンダラーのサイズは当初設定した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
- 89. //レンダラーのサイズは当初設定した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
- 90. //レンダラーのサイズは当初設定した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
- 91. 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
- 92. 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
- 93. 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
- 94. 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
- 95. 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
- 96. 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
- 97. 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
- 98. //光源を設定 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
- 99. //光源を設定 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
- 100. //光源を設定 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
- 101. //光源を設定 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
- 102. //光源をシーンに追加 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
- 103. //横幅、高さ、奥行きが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
- 104. //横幅、高さ、奥行きが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
- 105. //横幅、高さ、奥行きが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
- 106. //マテリアルを設定 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
- 107.
- 108. http://yomotsu.github.com/ html5conf2012/2.html Saturday, September 8, 12
- 109.
- 110. カメラ、モデル、光源を動かし、 連続でレンダリングする Saturday, September 8, 12
- 111. 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
- 112.
- 113. http://yomotsu.github.com/ html5conf2012/3.html Saturday, September 8, 12
- 114.
- 115.
- 116. 便利なThree.jsのAPIs モデルを読み込む Saturday, September 8, 12
- 117.
- 118.
- 119. THREE.collaraLoader THREE.OBJLoader Saturday, September 8, 12
- 120. THREE.collaraLoader THREE.OBJLoader Saturday, September 8, 12
- 121.
- 122. https://github.com/mrdoob/ three.js/tree/master/examples/js/ Saturday, September 8, 12
- 123. <script src="three.js"></script> <script src="ColladaLoader.js"></script> Saturday, September 8, 12
- 124. //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
- 125. //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
- 126. //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
- 127. //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
- 128. //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
- 129.
- 130. http://yomotsu.github.com/threejs- examples/load_converted_MMD_models/ Saturday, September 8, 12
- 131. さまざまな loader • JSONLoader (recommend!) • ColladaLoader.js • OBJLoader.js • UTF8Loader.js • VTKLoader.js Saturday, September 8, 12
- 132. 便利なThree.jsのAPIs 注視点を座標で決める Saturday, September 8, 12
- 133.
- 134.
- 135.
- 136.
- 137. camera.lookAt( new THREE.Vector3(0, 0, 0) ); Saturday, September 8, 12
- 138.
- 139. lookAt なし lookAt あり Saturday, September 8, 12
- 140. lookAt なし lookAt あり http://yomotsu.github.com/ html5conf2012/4.html Saturday, September 8, 12
- 141. 便利なThree.jsのAPIs モデルをクリックしたい Saturday, September 8, 12
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148. http://yomotsu.github.com/threejs- examples/ray_basic2/ Saturday, September 8, 12
- 149. Three.jsには便利なAPIが 他にもたくさんある Saturday, September 8, 12
- 150. Three.jsと組み合わせる JSライブラリーで機能補完 Saturday, September 8, 12
- 151.
- 152.
- 153.
- 154. + 物理演算エンジン(Physics engine) Saturday,September 8, 12
- 155.
- 156.
- 157. Three.js Physics engine 表現の世界 物理法則の世界 •形 •形 • 材質 • 大きさ • 光と影 • 重さ • 反射 •力 • 特殊シェーダー • 摩擦 • 衝突 Saturday, September 8, 12
- 158. Three.js Physics engine 表現の世界 物理法則の世界 •形 •形 • 材質 • 大きさ • 光と影 • 重さ • 反射 •力 • 特殊シェーダー • 摩擦 • 衝突 Saturday, September 8, 12
- 159. Three.js Physics engine 表現の世界 物理法則の世界 • 重力で動いた座標 • 力によって動いた座標 • 動いたことによる衝突時の座標 etc... Saturday, September 8, 12
- 160. おすすめの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
- 161. Let's see someresults • http://yomotsu.github.com/threejs-examples/ cannonjs_control/ • http://yomotsu.github.com/threejs-examples/ box2dwebjs_ragdoll/ Saturday, September 8, 12
- 162. Three.jsと組み合わせる CSS 3D transform Saturday, September 8, 12
- 163.
- 164.
- 165.
- 166. http://www.emagix.net/academic/mscs- project/item/camera-sync-with-css3-and- webgl-threejs Saturday, September 8, 12
- 167.
- 168. http://yomotsu.github.com/threejs- examples/sync-with-css/ Saturday, September 8, 12
- 169. Three.jsと組み合わせる Web Audio API Saturday, September 8, 12
- 170.
- 171. http://airtightinteractive.com/ demos/js/reactive/ Saturday, September 8, 12
- 172. Three.jsと組み合わせる Media Capture Saturday, September 8, 12
- 173.
- 174.
- 175.
- 176.
- 177.
- 178. • WebGLは高速で描画できる • WebGL1.0はスタンダードな技術 • JavaScriptとGLSLで書く • WebGLは学習コストがやや高い Saturday, September 8, 12
- 179. • Three.jsはWebGLにおけるjQuery • Three.jsのコードは直感的な操作 • Three.jsは組み合わせいろいろ Saturday, September 8, 12
- 180. Webでの表現技術は 進歩している Saturday, September 8, 12
- 181. 3DCGプログラミングも そのひとつ Saturday, September 8, 12
- 182. any questions? twiter@yomotsu Saturday, September 8, 12
- 183.