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

WebGL & Three.js
最新の話題とデモ紹介

2013/1/22 @ GTUG Girls
安藤幸央 @yukio_andoh

History
VRML X3D Canvas3D OpenGL ES Google o3d WebGL

IEWebGL
http://iewebgl.com/

Pros and Cons
of Using WebGL
グラフィックスハードウェ DOMやCanvasを扱う知識
アを最大限に生かせる。 OpenGL ES + GLSL
ブラウザと組み合わせて最学ぶのが難しい
大限のパフォーマンスをデバッグが難しい
ピクセル単位で操作できるオプティマイズが難しい
三次元の豊かな表現力まだまだ動かない環境も
特殊なプラグイン無しスマートフォンでは？

Three.js (mr doob)

http://mrdoob.com

三次元グラフィックス
リアルタイム vs. レンダリング
実時間描画 vs. 長時間,高精細

by Andreas Wetterberg

3DCGに必要な要素
頂点座標群（ポリゴン）

マテリアル（質感）

テクスチャ

ライティング

カメラ

ビュー・スクリーン

アニメーション
by Syntopia



テクスチャ

ライティング

カメラ


by Auntie P



テクスチャ

ライティング

カメラ


by Lucy Nieto



テクスチャ（バンプ）

ライティング

カメラ





テクスチャ

ライティング

カメラ


by Ravages



テクスチャ

ライティング

カメラ


by hansbrinker



テクスチャ

ライティング

カメラ


by Looking Glass



テクスチャ

ライティング

カメラ

ビュー

by zen

屈折

by Steve took it

被写界深度 (DOF:Depth of field)

by MR+G

パーティクル

by Torley

モーションブラー

by prawnpie

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

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

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

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

PlayWebGL
http://playwebgl.com/

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

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

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

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

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

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

My Robot Nation / KODAMA Studios : オモチャ専用3Dプリント

http://www.myrobotnation.com/

WebGL playground
http://webglplayground.net/

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

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

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

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/

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/

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

Khronos
http://www.khronos.org/

education

Useful science

data visualization

ﬁne arts
and more !
Art music video
demo scene

Ad promotion

banner
storytelling

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

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

More Related Content

Viewers also liked (7)

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

More from Yukio Andoh (20)

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