1. WebGL & Three.js
最新の話題とデモ紹介
2013/1/22 @ GTUG Girls
安藤幸央 @yukio_andoh

2. Jurassic Park 1993

3. IRIS GL
1991

5. GL = Graphics Library

7. History
VRML X3D Canvas3D OpenGL ES Google o3d WebGL

8. get.webgl.org

9. IEWebGL
http://iewebgl.com/

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

30. 頂点座標群（ポリゴン）
マテリアル（質感）
テクスチャ（バンプ）
ライティング
カメラ
ビュー・スクリーン
アニメーション

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

42. WebGL Bookcase
http://workshop.chromeexperiments.com/bookcase

43. Google Body
http://www.zygotebody.com/

44. WebGL Experiments
http://www.chromeexperiments.com/webgl

45. WebGL samples (google code)
http://code.google.com/p/webglsamples/

46. PlayWebGL
http://playwebgl.com/

47. Emberwind (HTML5 or WebGL)
http://operasoftware.github.com/

48. Demo Repository
http://www.khronos.org/webgl/wiki/Demo_Repository

49. WebGL Earth
http://www.webglearth.com/

50. Google MapsGL
http://maps.google.com/gl
`

51. procedural city
http://alteredqualia.com/three/examples/webgl_city.html

52. WebGL+3D printer
http://www.myrobotnation.com/

53. My Robot Nation / KODAMA Studios : オモチャ専用3Dプリント
http://www.myrobotnation.com/

54. Resouces

55. WebGL playground
http://webglplayground.net/

56. WebGL
Reference
Card
http://www.khronos.org/files/
webgl/webgl-reference-
card-1_0.pdf

57. WebGL Inspector
http://benvanik.github.com/WebGL-Inspector/

58. WebGL Conformance
https://cvs.khronos.org/svn/repos/registry/trunk/public/
webgl/sdk/tests/webgl-conformance-tests.html

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/

61. LEARNING WEBGL
http://learningwebgl.com/blog/

62. Khronos
http://www.khronos.org/

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