Tamabi media131118

  • 358 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
358
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング 2013年11月18日、 11月25日 多摩美術大学 情報デザイン学科メディア芸術コース 担当:田所淳
  • 2. 今日の内容 ‣ Three.js というJavaScriptのライブラリを使用して、Webブラ ウザ上で3Dプログラミングに挑戦します!
  • 3. Webブラウザで3Dグラフィクスを扱う
  • 4. WebGLについて ‣ Webブラウザ上で3Dグラフィクスを扱うには… ‣ WebGLという標準仕様が策定されている ‣ 非営利団体のKhronos Groupで管理 ‣ 公式サイト: http://www.khronos.org/webgl/
  • 5. WebGLについて ‣ ただし、WebGLで自由に3DCGのプログラミングするのは、か なり大変… ‣ 3D座標の操作のための様々な数学的な知識を前提とする ! ‣ そこで今回は、JavaScriptで容易に3Dを扱うことのできるライ ブラリを導入してみたい
  • 6. Three.js について
  • 7. Three.jsとは ‣ WebGL (とCanvas) を使用して高度な3D表現を可能とする、 Javascriptのライブラリ ‣ MITライセンスの、オープンソースプロジェクト ‣ Mr. Doobを中心に多くのコラボレーターと共に開発が現在も進 行中 ! ‣ ※ MITライセンス - ソフトウェアライセンスのひとつ ‣ ソフトウェアを誰でも無償で無制限に扱って良い。ただし、著 作権表示および本許諾表示をソフトウェアのすべての複製また は重要な部分に記載しなければならない。 ‣ 作者または著作権者は、ソフトウェアに関してなんら責任を負 わない。
  • 8. Three.js ‣ まずは、Three.jsのプロジェクトページをみてみる ‣ http://mrdoob.github.com/three.js/
  • 9. Three.js ‣ 様々な素晴しいサンプルがあるので、いくつか紹介
  • 10. jsdo.it でThree.jsを使うには ‣ jsdo.it には、あらかじめThree.jsが組込まれている! ‣ Three.jsを使用する際には、Javascriptのエディタで、Add Libraryボタンを押し、Three.jsを選択する
  • 11. Three.js を使ってみる!!
  • 12. Three.jsを使ってみる ‣ Three.jsでの3Dオブジェクト描画の考え方 ‣ シーン、カメラ、ライト、メッシュ(物体) ! ‣ 「シーンの中に物体(メッシュ)を配置して、ライティングした ものをカメラで撮影する」
  • 13. Three.jsを使ってみる ‣ Three.jsでの3Dオブジェクト描画の考え方 ‣ シーン、カメラ、ライト、メッシュ(物体) scene light camera mesh (= object)
  • 14. Three.jsを使ってみる ‣ 物体(mesh)は、材質(material)と形状(geometry)から成り立っ ている mesh (= object) = material 材質 + geometry 形状
  • 15. Three.jsを使ってみる ‣ テンプレートをfork ‣ 最低限の設定をしたテンプレートをjsdo.itにアップしました ‣ まずはこのプログラムをForkしてください ‣ http://jsdo.it/yoppa/d2ad
  • 16. Three.jsを使ってみる ‣ テンプレートには描画するコンテナの設定とWebGLのレンダラーの追加が行われている //画面設定 var b = document.body; var d = document.documentElement; var WIDTH = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth); var HEIGHT = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight); ! //コンテナとレンダラーの配置 var $container = $('#container'); var renderer = new THREE.WebGLRenderer(); renderer.setSize(WIDTH, HEIGHT); $container.append(renderer.domElement);
  • 17. Three.jsを使ってみる ‣ まずは、WebGLのシーンを追加 ! // シーンの生成 var scene = new THREE.Scene();
  • 18. Three.jsを使ってみる ‣ 次に、カメラとライトの配置 ! // カメラ配置 var camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 1, 1000); camera.position.z = 300; ! // ライト配置 var light = new light.position.x = light.position.y = light.position.z = scene.add(light); THREE.DirectionalLight(0xffffff, 1.5); 0.5; 0.5; 1;
  • 19. Three.jsを使ってみる ‣ 立方体のジオメトリと、マテリアルを設定 ! // 立方体のジオメトリとマテリアル設定 var geometry = new THREE.CubeGeometry(100, 100, 100); var material = new THREE.MeshLambertMaterial({color: 0x336699});
  • 20. Three.jsを使ってみる ‣ 設定したジオメトリとマテリアルで、メッシュを生成 // メッシュ生成 var mesh = new THREE.Mesh(geometry, material);
  • 21. Three.jsを使ってみる ‣ メッシュを、回転 (横に-30°、縦に30°) // メッシュを回転 mesh.rotation.x = 30 * Math.PI / 180.0; mesh.rotation.y = -30 * Math.PI / 180.0;
  • 22. Three.jsを使ってみる ‣ メッシュをシーンに追加して、レンダラで描画 // メッシュをシーンに追加 scene.add(mesh); ! //シーンを描画する renderer.render(scene, camera);
  • 23. Three.jsを使ってみる ‣ 完成!! 光のあたった立方体が表示されるはず
  • 24. Three.jsを使ってみる ‣ このように、Three.jsでは、簡単に3Dの物体を表示することが できる ‣ 実際には高度な数学的な知識が必要な、3D座標の回転も簡単 ! ‣ では、マウスの位置によって回転角度を変化させてみる
  • 25. Three.jsを使ってみる ‣ メッシュの回転とシーンの追加、レンダリングの部分を変更 // メッシュ生成 var mesh = new THREE.Mesh(geometry, material); // メッシュをシーンに追加 scene.add(mesh); ! // マウスの位置でメッシュを回転 renderer.domElement.addEventListener('mousemove', function(e) { mesh.rotation.x = e.pageY/ 100.0; mesh.rotation.y = e.pageX/ 100.0; ! //シーンを描画する renderer.render(scene, camera); }, false);
  • 26. Three.jsを使ってみる ‣ マウスの位置で回転するようになったはず
  • 27. Three.jsを使ってみる ‣ 最後にテクスチャを貼ってみる ‣ まずはファイルをアップロード ‣ jsdo.it の Filesタブに画像をドラッグして、URLをコピーする
  • 28. Three.jsを使ってみる ‣ マテリアルの設定に、テクスチャを追加 // 立方体のジオメトリとマテリアル設定 var geometry = new THREE.CubeGeometry(100, 100, 100); // テクスチャを読み込み var texture = new THREE.ImageUtils.loadTexture('http://jsrun.it/assets/6/Q/A/m/ 6QAmH.jpg3'); // テクスチャを反映 var material = new THREE.MeshLambertMaterial({map: texture}); // メッシュ生成 var mesh = new THREE.Mesh(geometry, material); // メッシュをシーンに追加 scene.add(mesh);
  • 29. Three.jsを使ってみる ‣ テクスチャーが貼れた!!
  • 30. Three.jsを使用したアニメーション
  • 31. ここまでの復習 ‣ ここまでのプログラムについてこれていない方は、こちら から ‣ まず下記のURLのプログラムをFORK ‣ 手元のプログラムをみながら復習と補足 ! http://jsdo.it/yoppa/yN9x
  • 32. 前回の復習 ‣ Javascriptコード //立方体の表示: 基本 ! //画面設定 var b = document.body; var d = document.documentElement; var WIDTH = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth); var HEIGHT = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight); ! //コンテナとレンダラーの配置 var $container = $('#container'); var renderer = new THREE.WebGLRenderer(); renderer.setSize(WIDTH, HEIGHT); $container.append(renderer.domElement); ! //立方体ジオメトリ var geometry = new THREE.CubeGeometry(100, 100, 100); //マテリアル var material = new THREE.MeshLambertMaterial({color: 0x3366cc}); //メッシュの生成 var mesh = new THREE.Mesh(geometry, material);
  • 33. 前回の復習 ‣ Javascriptコード //メッシュの回転 mesh.rotation = {x: 0.5, y: 0.5, z: 0.0}; ! //カメラを配置 var camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 1000); camera.position.z = 400; camera.lookAt(mesh.position); ! //シーンを生成し、メッシュ追加 var scene = new THREE.Scene(); scene.add(mesh); ! //ライト追加 var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position = {x: 0, y: 0.2, z: 1} scene.add(light); ! //レンダリング renderer.render(scene, camera);
  • 34. 前回の復習 ‣ 完成、(静止した)立方体が表示される
  • 35. Three.jsを使用したアニメーション ‣ Three.jsでアニメーションを実現するには ‣ プログラムをより構造化していく必要あり ! ‣ 準備 (初期設定) → 更新 (アニメーション) → 描画
  • 36. Three.jsを使用したアニメーション ‣ Three.jsでの構造化のイメージ init (初期化) animation (更新) ループ render (更新)
  • 37. Three.jsを使用したアニメーション ‣ Javascriptコードでのイメージ //画面設定、グローバルな変数の設定など ... ! //プログラム構造 init(); animate(); ! function init() { /* 初期化に関するコード */ } ! function animate() { /* 更新に関するコード */ render(); // レンダー呼び出し } ! function render() { renderer.render(scene, camera); //レンダリング }
  • 38. Three.jsを使用したアニメーション ‣ 先程作成した、立方体の描画のコードを、この構造にあてはめ ていく
  • 39. Three.jsを使用したアニメーション ‣ Javascript //画面設定 var b = document.body; var d = document.documentElement; var WIDTH = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth); var HEIGHT = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight); ! //Three.jsのシーンに関係するグローバルな変数 var mesh, scene, camera, renderer, light; ! //プログラム構造 init(); animate(); ! function init() { ! //コンテナとレンダラーの配置 var $container = $('#container'); renderer = new THREE.WebGLRenderer(); renderer.setSize(WIDTH, HEIGHT); $container.append(renderer.domElement);
  • 40. Three.jsを使用したアニメーション ‣ Javascript //立方体ジオメトリ var geometry = new THREE.CubeGeometry(100, 100, 100); //マテリアル ! var material = new THREE.MeshLambertMaterial({color: 0x3366cc}); //ジオメトリとマテリアルから、メッシュの生成 mesh = new THREE.Mesh(geometry, material); mesh.rotation.x += 20 / 180.0 * Math.PI; //カメラを配置 camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 1000); camera.position.z = 400; camera.lookAt(mesh.position); //シーンを生成し、メッシュ追加 scene = new THREE.Scene(); scene.add(mesh); //ライト追加 light = new THREE.DirectionalLight(0xffffff, 1.5); light.position = {x: 0, y: 0.2, z: 1} scene.add(light); }
  • 41. Three.jsを使用したアニメーション ‣ Javascript ! //アニメーション function animate() { requestAnimationFrame( animate ); render(); } ! //レンダリング function render() { renderer.render(scene, camera); }
  • 42. Three.jsを使用したアニメーション ‣ まずは、静止した立方体が表示される(はず)
  • 43. Three.jsを使用したアニメーション ‣ この立方体を動かすには ‣ 変化させたいパラメータを、animateの中で演算する ! ‣ 位置、回転、サイズ、色 ...etc. ! ‣ では、試しに回転角度を変化させてみる
  • 44. Three.jsを使用したアニメーション ‣ Javascript //アニメーション function animate() { ! ! } mesh.rotation.y += 5 / 180.0 * Math.PI; requestAnimationFrame( animate ); render(); 追加
  • 45. Three.jsを使用したアニメーション ‣ 立方体が、ぐるぐる回転する!!
  • 46. Three.jsを使用したアニメーション ‣ 立方体のスケールも変更してみる ‣ sin関数と、cos関数で、幅と高さを別々に変形
  • 47. Three.jsを使用したアニメーション ‣ Javascript //アニメーション function animate() { mesh.rotation.y += 5 / 180.0 * Math.PI; ! ! } mesh.scale.x = 0.4 * Math.sin( Date.now() / 100.0) + 1.0; mesh.scale.y = 0.4 * Math.cos( Date.now() / 100.0) + 1.0; requestAnimationFrame( animate ); render();
  • 48. Three.jsを使用したアニメーション ‣ 立方体が、グニャグニャと変形
  • 49. 応用:たくさんの図形をアニメーション
  • 50. 応用:たくさんの図形をアニメーション ‣ たくさんの図形を同時に動かす ‣ 配列 (Array) とくりかえし (for) の使用法がポイント! ! ‣ すこしずつ、回転スピードと、伸縮スピードをずらしながら、 たくさんの立方体を描いてみる!!
  • 51. 応用:たくさんの図形をアニメーション ‣ Javascript //画面設定 var b = document.body; var d = document.documentElement; var WIDTH = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth); var HEIGHT = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight); ! //Three.jsのシーンに関係するグローバルな変数 var var var var var var ! scene, camera, renderer, light; mouseX = 0, mouseY = 0; windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; mesh = []; NUM = 100; //プログラム構造 init(); animate(); ! function init() { ! //コンテナとレンダラーの配置 var $container = $('#container');
  • 52. 応用:たくさんの図形をアニメーション ‣ Javascript //立方体ジオメトリ var geometry = new THREE.CubeGeometry(100, 100, 100); //マテリアル var material = new THREE.MeshLambertMaterial({color: 0x3366cc}); //くりかえし for(var i = 0; i < NUM; i++){ //ジオメトリとマテリアルから、メッシュの生成 mesh[i] = new THREE.Mesh(geometry, material); mesh[i].rotation.x += i / 180.0 * Math.PI; scene.add(mesh[i]); } //カメラを配置 camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 1000); camera.position.z = 400; camera.lookAt(mesh[0].position); //ライト追加 light = new THREE.DirectionalLight(0xffffff, 1.5); light.position = {x: 0, y: 0.2, z: 1} scene.add(light);
  • 53. 応用:たくさんの図形をアニメーション ‣ Javascript //アニメーション function animate() { //くりかえし for(var i = 0; i < NUM; i++){ mesh[i].rotation.y += i / 18000.0 * Math.PI; mesh[i].scale.x = 0.8 * Math.sin( i * Date.now() / 20000.0) + 1.0; mesh[i].scale.y = 0.8 * Math.cos( i * Date.now() / 30000.0) + 1.0; } requestAnimationFrame( animate ); render(); } ! //レンダリング function render() { ! //カメラの視点をマウスで移動 camera.position.x += ( mouseX - camera.position.x ); camera.position.y += ( - mouseY - camera.position.y ); camera.lookAt(mesh[0].position); //レンダリング renderer.render(scene, camera); }
  • 54. 応用:たくさんの図形をアニメーション ‣ 複雑に変形を繰り返す立方体の組み合わせ ‣ http://jsdo.it/yoppa/bmak
  • 55. 応用:たくさんの図形をアニメーション ‣ 今週はここまで!