WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]

6,217 views

Published on

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,217
On SlideShare
0
From Embeds
0
Number of Embeds
1,231
Actions
Shares
0
Downloads
14
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]

  1. 1. WebGL & Three.js最新の話題とデモ紹介2013/1/22 @ GTUG Girls安藤幸央 @yukio_andoh
  2. 2. Jurassic Park 1993
  3. 3. IRIS GL 1991
  4. 4. GL = Graphics Library
  5. 5. HistoryVRML X3D Canvas3D OpenGL ES Google o3d WebGL
  6. 6. get.webgl.org
  7. 7. IEWebGLhttp://iewebgl.com/
  8. 8. Pros and Consof Using WebGL グラフィックスハードウェ DOMやCanvasを扱う知識 アを最大限に生かせる。 OpenGL ES + GLSL ブラウザと組み合わせて最 学ぶのが難しい 大限のパフォーマンスを デバッグが難しい ピクセル単位で操作できる オプティマイズが難しい 三次元の豊かな表現力 まだまだ動かない環境も 特殊なプラグイン無し スマートフォンでは?
  9. 9. OpenGL パイプライン
  10. 10. Three.js (mr doob) http://mrdoob.com
  11. 11. [ 3DCG ]
  12. 12. 三次元グラフィックスリアルタイム vs. レンダリング実時間描画 vs. 長時間,高精細 by Andreas Wetterberg
  13. 13. 3DCGに必要な要素 頂点座標群(ポリゴン) マテリアル(質感) テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by Syntopia
  14. 14. 3DCGに必要な要素 頂点座標群(ポリゴン) マテリアル(質感) テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by Syntopia
  15. 15. 3DCGに必要な要素 頂点座標群(ポリゴン) マテリアル(質感) テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by Auntie P
  16. 16. 3DCGに必要な要素 頂点座標群(ポリゴン) マテリアル(質感) テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by Lucy Nieto
  17. 17. 頂点座標群(ポリゴン)マテリアル(質感)テクスチャ(バンプ)ライティングカメラビュー・スクリーンアニメーション
  18. 18. 3DCGに必要な要素 頂点座標群(ポリゴン) マテリアル(質感) テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by Ravages
  19. 19. 3DCGに必要な要素 頂点座標群(ポリゴン) マテリアル(質感) テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by hansbrinker
  20. 20. 3DCGに必要な要素 頂点座標群(ポリゴン) マテリアル(質感) テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by Looking Glass
  21. 21. 3DCGに必要な要素 頂点座標群(ポリゴン) マテリアル(質感) テクスチャ ライティング カメラ ビュー アニメーション by zen
  22. 22. 反射 by ancawonka
  23. 23. 屈折 by Steve took it
  24. 24. 影・陰 by moriza
  25. 25. 被写界深度 (DOF:Depth of field) by MR+G
  26. 26. パーティクル by Torley
  27. 27. モーションブラー by prawnpie
  28. 28. WebGL Bookcasehttp://workshop.chromeexperiments.com/bookcase
  29. 29. Google Bodyhttp://www.zygotebody.com/
  30. 30. WebGL Experimentshttp://www.chromeexperiments.com/webgl
  31. 31. WebGL samples (google code)http://code.google.com/p/webglsamples/
  32. 32. PlayWebGLhttp://playwebgl.com/
  33. 33. Emberwind (HTML5 or WebGL)http://operasoftware.github.com/
  34. 34. Demo Repositoryhttp://www.khronos.org/webgl/wiki/Demo_Repository
  35. 35. WebGL Earthhttp://www.webglearth.com/
  36. 36. Google MapsGLhttp://maps.google.com/gl `
  37. 37. procedural cityhttp://alteredqualia.com/three/examples/webgl_city.html
  38. 38. WebGL+3D printerhttp://www.myrobotnation.com/
  39. 39. My Robot Nation / KODAMA Studios : オモチャ専用3Dプリント http://www.myrobotnation.com/
  40. 40. Resouces
  41. 41. WebGL playgroundhttp://webglplayground.net/
  42. 42. WebGLReferenceCardhttp://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf
  43. 43. WebGL Inspectorhttp://benvanik.github.com/WebGL-Inspector/
  44. 44. WebGL Conformancehttps://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/tests/webgl-conformance-tests.html
  45. 45. WebGL frameworks TDL http://code.google.com/p/threedlibrary/ three.js https://github.com/mrdoob/three.js CubicVR 3D Engine http://www.cubicvr.org/ CopperLicht http://www.ambiera.com/copperlicht/ PhiloGL http://senchalabs.github.com/philogl/ SpiderGL http://spidergl.org/ GLGE http://www.glge.org/ SceneJS http://www.scenejs.com/
  46. 46. WebGL frameworks& Exporters C3DL http://www.c3dl.org/ Jax http://blog.jaxgl.com/ StormEngineC http://code.google.com/p/stormenginec/ WebGLU http://sourceforge.net/projects/webglu/ Exporter inka3d http://www.inka3d.com/ Blender to WebGL http://code.google.com/p/blender-webgl- exporter/
  47. 47. LEARNING WEBGLhttp://learningwebgl.com/blog/
  48. 48. Khronoshttp://www.khronos.org/
  49. 49. educationUseful science data visualization fine arts and more !Art music video demo sceneAd promotion banner storytelling
  50. 50. Story boarding and DesignDesigning for ResponsivenessDesigning for SerendipityKnowing Your AudienceModeling and GeometryThe Complexity BudgetModeling and ConversionStructuring Models to Improve PerformanceManaging Scene ComplexityLayoutCull VolumesNavigation and interfaceAnimation and MorphingLighting for moodSound designing for ambienceEffect
  51. 51. Thank you. @yukio_andoh

×