WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]
•
11 likes•5,335 views
Report
Share
Related slideshows
WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]
- 1. WebGL & Three.js 最新の話題とデモ紹介 2013/1/22 @ GTUG Girls 安藤幸央 @yukio_andoh
- 3. IRIS GL 1991
- 5. GL = Graphics Library
- 7. History VRML X3D Canvas3D OpenGL ES Google o3d WebGL
- 10. Pros and Cons of Using WebGL グラフィックスハードウェ DOMやCanvasを扱う知識 アを最大限に生かせる。 OpenGL ES + GLSL ブラウザと組み合わせて最 学ぶのが難しい 大限のパフォーマンスを デバッグが難しい ピクセル単位で操作できる オプティマイズが難しい 三次元の豊かな表現力 まだまだ動かない環境も 特殊なプラグイン無し スマートフォンでは？
- 12. OpenGL パイプライン
- 16. Three.js (mr doob) http://mrdoob.com
- 17. [ 3DCG ]
- 23. 三次元グラフィックス リアルタイム vs. レンダリング 実時���描画 vs. 長時間,高精細 by Andreas Wetterberg
- 26. 3DCGに必要な要素 頂点座標群（ポリゴン） マテリアル（質感） テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by Syntopia
- 27. 3DCGに必要な要素 頂点座標群（ポリゴン） マテリアル（質感） テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by Syntopia
- 28. 3DCGに必要な要素 頂点座標群（ポリゴン） マテリアル（質感） テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by Auntie P
- 29. 3DCGに必要な要素 頂点座標群（ポリゴン） マテリアル（質感） テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by Lucy Nieto
- 31. 3DCGに必要な要素 頂点座標群（ポリゴン） マテリアル（質感） テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by Ravages
- 32. 3DCGに必要な要素 頂点座標群（ポリゴン） マテリアル（質感） テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by hansbrinker
- 33. 3DCGに必要な要素 頂点座標群（ポリゴン） マテリアル（質感） テクスチャ ライティング カメラ ビュー・スクリーン アニメーション by Looking Glass
- 34. 3DCGに必要な要素 頂点座標群（ポリゴン） マテリアル（質感） テクスチャ ライティング カメラ ビュー アニメーション by zen
- 35. 反射 by ancawonka
- 36. 屈折 by Steve took it
- 37. 影・陰 by moriza
- 38. 被写界深度 (DOF:Depth of field) by MR+G
- 39. パーティクル by Torley
- 40. モーションブラー by prawnpie
- 45. WebGL samples (google code) http://code.google.com/p/webglsamples/
- 47. Emberwind (HTML5 or WebGL) http://operasoftware.github.com/
- 53. My Robot Nation / KODAMA Studios : オモチャ専用3Dプリント http://www.myrobotnation.com/
- 54. Resouces
- 59. 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/
- 60. 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/
- 63. education Useful science data visualization fine arts and more ! Art music video demo scene Ad promotion banner storytelling
- 64. Story boarding and Design Designing for Responsiveness Designing for Serendipity Knowing Your Audience Modeling and Geometry The Complexity Budget Modeling and Conversion Structuring Models to Improve Performance Managing Scene Complexity Layout Cull Volumes Navigation and interface Animation and Morphing Lighting for mood Sound designing for ambience Effect
- 67. Thank you. @yukio_andoh