WebGL and Three.js

Transcript

None

WebGL WebAudio CSS3 SVG WOFF (WebFonts) <audio> <video> canvas

IUUQXXXTPMBSTZTUFNFYQMPSFSDPN IUUQTUBUJPOTBFSBDPEFPSH IUUQXXXUBOHFOUEDPVLBSNBEBXFCTIPXTSBZDFBTBSFYIJCJUJPO IUUQIFYHMCLDPSFDPN

IUUQZPNPUTVHJUIVCDPN IUNMDPOGIUNM

<!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>

ίʔυͰԿΛ͍ͯ͠Δͷ͔

None

8FC(-ͷͳ͕Ε w ௖఺৘ใͷ഑ྻ͸ w 7FSUFY4IBEFSͰܗʹͳΓ w 'MBHNFOU4IBEFSͰ৭͕͖ͭ w )5.-ͷDBOWBTʹදࣔ͞ΕΔ

֤TIBEFS͸ɺ ࣗ෼Ͱ༻ҙ͠ͳ͚Ε͹ͳΒͳ͍

TIBEFS͸(-4-ͱ͍͏ݴޠͰॻ͘

None

8FC(-ͷͳ͕Ε w 7FSUFY4IBEFSιʔεΛ༻ҙͯ͠ίϯύΠϧ w 'MBHNFOU4IBEFSιʔεΛ༻ҙͯ͠ίϯύΠϧ w ͦΕͧΕΛQSPHSBNʹొ࿥͢Δ

+BWB4DSJQU͔Β৘ใΛೖྗ͢Δ

None

खॱ͕ଟ͘ɺෑډ͕ߴ͍

Ͱ΋5ISFFKTͳΒ

5ISFFKTͱ͸

IUUQNSEPPCHJUIVCDPNUISFFKT

5ISFFKTͱ͸ w 8FC(-ͷϥούʔϥΠϒϥϦʔ w ෳࡶͳखॱ͸ඞཁͳ͍ w 8FC(-Λ௚ײతʹ࢖͏͜ͱ͕Ͱ͖Δ w .SEPPCࢯ͕த৺ʹͳΓ(JU)VC্Ͱ։ൃ͞Ε͍ͯΔ

IUUQXXXXFCHMDPN

8FC(-࡞ྫͷଟ͕͘ 5ISFFKTΛ࢖༻

None

ॻ੶Ͱ΋ 8FC(-ͷ߹Θͤͯղઆ͞ΕΔ

5ISFFKT͸ 8FC(-ʹ͓͚ΔK2VFSZ

5ISFFKTͷͳ͕Ε

5ISFFKTͷར༻खॱ ϨϯμϥʔΛ)5.-ʹBQQFOE ઃஔ γʔϯΛ࡞੒ ΧϝϥΛ഑ஔ ϥΠτΛ഑ஔ

ϞσϧΛ഑ஔ ࡱӨ

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

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

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;

//レンダラーのサイズは当初設定した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 =

//レンダラーのサイズは当初設定した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 scene = new THREE.Scene(); //カメラを設定 var fov = 80;

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

var near = 1; var far = 1000; var 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 ); });

͓͢͢Ίͷ1IZTJDTFOHJOF w 1IZTJKT "NNPKT "NNP͸$ ͷ#VMMFU͔ΒࣗಈͰ+4ʹม׵ͨ͠ϥΠϒϥϦɻ.#΄Ͳ͋Δɻ 1IZTJKT͸"NNPΛ࢖͍΍͘͢͢Δϥούʔɻ w DBOOPOKT +4Ͱθϩ͔Β࡞ΒΕͨϥΠϒϥϦʔɻ,#ҎԼͰ͔ͳΓܰྔɻ։ൃ్தɻ

w CPYEXFCKT %෺ཧΤϯδϯɻCPYEͷ+4൛ɻCPYKTΑΓ΋ϝϯςφϯε͞Ε͍ͯΔɻ

WebGL and Three.js

WebGL and Three.js

More Decks by yomotsu

Other Decks in Programming

Featured

Transcript