webgl (three.js) code lab - intro. [ gtug girls 10th]
DESCRIPTION
TRANSCRIPT
WebGL & Three.js最新の話題とデモ紹介
2013/1/22 @ GTUG Girls安藤幸央 @yukio_andoh
Jurassic Park 1993
IRIS GL
1991
GL = Graphics Library
HistoryCanvas3DVRML X3D OpenGL ES WebGLGoogle o3d
get.webgl.org
Pros and Consof Using WebGL グラフィックスハードウェアを最大限に生かせる。
ブラウザと組み合わせて最大限のパフォーマンスを
ピクセル単位で操作できる
三次元の豊かな表現力
特殊なプラグイン無し
DOMやCanvasを扱う知識
OpenGL ES + GLSL学ぶのが難しい
デバッグが難しい
オプティマイズが難しい
まだまだ動かない環境も
スマートフォンでは?
OpenGL パイプライン
[ 3DCG ]
三次元グラフィックスリアルタイム vs. レンダリング実時間描画 vs. 長時間,高精細
by Andreas Wetterberg
3DCGに必要な要素頂点座標群(ポリゴン)
マテリアル(質感)
テクスチャ
ライティング
カメラ
ビュー・スクリーン
アニメーション
by Syntopia
3DCGに必要な要素頂点座標群(ポリゴン)
マテリアル(質感)
テクスチャ
ライティング
カメラ
ビュー・スクリーン
アニメーション
by Syntopia
3DCGに必要な要素頂点座標群(ポリゴン)
マテリアル(質感)
テクスチャ
ライティング
カメラ
ビュー・スクリーン
アニメーション
by Auntie P
3DCGに必要な要素頂点座標群(ポリゴン)
マテリアル(質感)
テクスチャ
ライティング
カメラ
ビュー・スクリーン
アニメーション
by Lucy Nieto
頂点座標群(ポリゴン)
マテリアル(質感)
テクスチャ(バンプ)
ライティング
カメラ
ビュー・スクリーン
アニメーション
3DCGに必要な要素頂点座標群(ポリゴン)
マテリアル(質感)
テクスチャ
ライティング
カメラ
ビュー・スクリーン
アニメーション
by Ravages
3DCGに必要な要素頂点座標群(ポリゴン)
マテリアル(質感)
テクスチャ
ライティング
カメラ
ビュー・スクリーン
アニメーション
by hansbrinker
3DCGに必要な要素頂点座標群(ポリゴン)
マテリアル(質感)
テクスチャ
ライティング
カメラ
ビュー・スクリーン
アニメーション
by Looking Glass
3DCGに必要な要素頂点座標群(ポリゴン)
マテリアル(質感)
テクスチャ
ライティング
カメラ
ビュー
アニメーションby zen
by ancawonka
反射
by Steve took it
屈折
by moriza
影・陰
by MR+G
被写界深度 (DOF:Depth of field)
by Torley
パーティクル
by prawnpie
モーションブラー
WebGL Bookcasehttp://workshop.chromeexperiments.com/bookcase
WebGL Experimentshttp://www.chromeexperiments.com/webgl
WebGL samples (google code)http://code.google.com/p/webglsamples/
Emberwind (HTML5 or WebGL)http://operasoftware.github.com/
Demo Repositoryhttp://www.khronos.org/webgl/wiki/Demo_Repository
WebGL Earthhttp://www.webglearth.com/
procedural cityhttp://alteredqualia.com/three/examples/webgl_city.html
WebGL+3D printerhttp://www.myrobotnation.com/
http://www.myrobotnation.com/
My Robot Nation / KODAMA Studios : オモチャ専用3Dプリント
Resouces
ǁǁǁŬŚƌŽŶŽƐŽƌŐǁĞďŐůΞϮϬϭϭ<ŚƌŽŶŽƐ'ƌŽƵƉͲZĞǀ ϬϮϭϭ
tĞď'>ϭϬW/YƵŝĐŬZĞĨĞƌĞŶĐĞĂƌĚͲWĂŐĞϭ
tŚŽůĞ&ƌĂŵĞďƵīĞƌKƉĞƌĂƟŽŶƐϱϭϯϯǀŽŝĚĐůĞĂƌ;ƵůŽŶŐŵĂƐŬͿϱϭϯϭϭŵĂƐŬŝƚǁŝƐĞKZŽĨK>KZWd,^dE/>ͺh&&Zͺ/dǀŽŝĚĐůĞĂƌŽůŽƌ;ŇŽĂƚƌĞĚŇŽĂƚŐƌĞĞŶŇŽĂƚďůƵĞŇŽĂƚĂůƉŚĂͿǀŽŝĚĐůĞĂƌĞƉƚŚ;ŇŽĂƚĚĞƉƚŚͿĚĞƉƚŚůĂŵƉĞĚƚŽƚŚĞƌĂŶŐĞϬƚŽϭ
ǀŽŝĚĐůĞĂƌ^ƚĞŶĐŝů;ŝŶƚƐͿǀŽŝĚĐŽůŽƌDĂƐŬ;ůƌĞĚůŐƌĞĞŶůďůƵĞůĂůƉŚĂͿǀŽŝĚĚĞƉƚŚDĂƐŬ;ůŇĂŐͿǀŽŝĚƐƚĞŶĐŝůDĂƐŬ;ƵŝŶƚŵĂƐŬͿǀŽŝĚƐƚĞŶĐŝůDĂƐŬ^ĞƉĂƌĂƚĞ;ĞŶƵŵĨĂĐĞƵŝŶƚŵĂƐŬͿĨĂĐĞ&ZKEd <&ZKEdͺEͺ<
tĞď'>ΠŝƐĂƐŽŌǁĂƌĞŝŶƚĞƌĨĂĐĞĨŽƌĂĐĐĞƐƐŝŶŐŐƌĂƉŚŝĐƐŚĂƌĚǁĂƌĞĨƌŽŵǁŝƚŚŝŶĂǁĞďďƌŽǁƐĞƌ ĂƐĞĚŽŶKƉĞŶ'>^ϮϬtĞď'>ĂůůŽǁƐĂƉƌŽŐƌĂŵŵĞƌƚŽƐƉĞĐŝĨLJƚŚĞŽďũĞĐƚƐĂŶĚŽƉĞƌĂƟŽŶƐŝŶǀŽůǀĞĚŝŶƉƌŽĚƵĐŝŶŐŚŝŐŚͲƋƵĂůŝƚLJŐƌĂƉŚŝĐĂůŝŵĂŐĞƐƐƉĞĐŝĮĐĂůůLJĐŽůŽƌŝŵĂŐĞƐŽĨϯŽďũĞĐƚƐ
ͻŶŶŶƌĞĨĞƌƐƚŽƐĞĐƟŽŶƐŝŶƚŚĞtĞď'>ϭϬƐƉĞĐŝĮĐĂƟŽŶĂǀĂŝůĂďůĞĂƚǁǁǁŬŚƌŽŶŽƐŽƌŐǁĞďŐů
ͻŽŶƚĞŶƚŵĂƌŬĞĚŝŶƉƵƌƉůĞĚŽĞƐŶŽƚŚĂǀĞĂĐŽƌƌĞƐƉŽŶĚŝŶŐĨƵŶĐƟŽŶŝŶKƉĞŶ'>^dŚĞKƉĞŶ'>^ϮϬƐƉĞĐŝĮĐĂƟŽŶŝƐĂǀĂŝůĂďůĞĂƚǁǁǁŬŚƌŽŶŽƐŽƌŐƌĞŐŝƐƚƌLJŐůĞƐ
tĞď'>ĨƵŶĐƟŽŶĐĂůůƐďĞŚĂǀĞŝĚĞŶƟĐĂůůLJƚŽƚŚĞŝƌKƉĞŶ'>^ĐŽƵŶƚĞƌƉĂƌƚƐƵŶůĞƐƐŽƚŚĞƌǁŝƐĞŶŽƚĞĚ
ƌƌĂLJƵīĞƌĂŶĚdLJƉĞĚƌƌĂLJƐϱϭϮĂƚĂŝƐƚƌĂŶƐĨĞƌƌĞĚƚŽtĞď'>ƵƐŝŶŐƌƌĂLJƵīĞƌĂŶĚǀŝĞǁƐƵīĞƌƐƌĞƉƌĞƐĞŶƚƵŶƐƚƌƵĐƚƵƌĞĚďŝŶĂƌLJĚĂƚĂǁŚŝĐŚĐĂŶďĞŵŽĚŝĮĞĚƵƐŝŶŐŽŶĞŽƌŵŽƌĞƚLJƉĞĚĂƌƌĂLJǀŝĞǁƐ
ƵīĞƌƐƌƌĂLJƵīĞƌ;ƵůŽŶŐďLJƚĞ>ĞŶŐƚŚͿƵůŽŶŐďLJƚĞ>ĞŶŐƚŚƌĞĂĚͲŽŶůLJůĞŶŐƚŚŽĨǀŝĞǁŝŶďLJƚĞƐƌĞĂƚĞƐĂŶĞǁďƵīĞƌ dŽŵŽĚŝĨLJƚŚĞĚĂƚĂĐƌĞĂƚĞŽŶĞŽƌŵŽƌĞǀŝĞǁƐƌĞĨĞƌĞŶĐŝŶŐŝƚ
sŝĞǁƐ/ŶƚŚĞĨŽůůŽǁŝŶŐsŝĞǁdLJƉĞŵĂLJďĞ/ŶƚϴƌƌĂLJ /ŶƚϭϲƌƌĂLJ /ŶƚϯϮƌƌĂLJ hŝŶƚϴƌƌĂLJ hŝŶƚϭϲƌƌĂLJ hŝŶƚϯϮƌƌĂLJ &ůŽĂƚϯϮƌƌĂLJsŝĞǁdLJƉĞ;ƵůŽŶŐůĞŶŐƚŚͿ
ƌĞĂƚĞƐĂǀŝĞǁĂŶĚĂŶĞǁƵŶĚĞƌůLJŝŶŐďƵīĞƌƵůŽŶŐůĞŶŐƚŚZĞĂĚͲŽŶůLJ ŶƵŵďĞƌŽĨĞůĞŵĞŶƚƐŝŶƚŚŝƐǀŝĞǁ
sŝĞǁdLJƉĞ;sŝĞǁdLJƉĞŽƚŚĞƌͿƌĞĂƚĞƐŶĞǁƵŶĚĞƌůLJŝŶŐďƵīĞƌĂŶĚĐŽƉŝĞƐŽƚŚĞƌĂƌƌĂLJ
sŝĞǁdLJƉĞ;ƚLJƉĞŽƚŚĞƌͿƌĞĂƚĞƐŶĞǁƵŶĚĞƌůLJŝŶŐďƵīĞƌĂŶĚĐŽƉŝĞƐŽƚŚĞƌĂƌƌĂLJ
sŝĞǁdLJƉĞ;ƌƌĂLJƵīĞƌďƵīĞƌŽƉƟŽŶĂůƵůŽŶŐďLJƚĞKīƐĞƚŽƉƟŽŶĂůƵůŽŶŐůĞŶŐƚŚͿƌĞĂƚĞĂŶĞǁǀŝĞǁŽĨŐŝǀĞŶďƵīĞƌ ƐƚĂƌƟŶŐĂƚŽƉƟŽŶĂůďLJƚĞŽīƐĞƚĞdžƚĞŶĚŝŶŐĨŽƌŽƉƟŽŶĂůůĞŶŐƚŚĞůĞŵĞŶƚƐƌƌĂLJƵīĞƌďƵīĞƌZĞĂĚͲŽŶůLJ ďƵīĞƌďĂĐŬŝŶŐƚŚŝƐǀŝĞǁƵůŽŶŐďLJƚĞKīƐĞƚZĞĂĚͲŽŶůLJ ďLJƚĞŽīƐĞƚŽĨǀŝĞǁƐƚĂƌƚŝŶďƵīĞƌƵůŽŶŐůĞŶŐƚŚZĞĂĚͲŽŶůLJ ŶƵŵďĞƌŽĨĞůĞŵĞŶƚƐŝŶƚŚŝƐǀŝĞǁ
KƚŚĞƌWƌŽƉĞƌƟĞƐƵůŽŶŐďLJƚĞ>ĞŶŐƚŚZĞĂĚͲŽŶůLJ ůĞŶŐƚŚŽĨǀŝĞǁŝŶďLJƚĞƐĐŽŶƐƚƵůŽŶŐzd^ͺWZͺ>DEdĞůĞŵĞŶƚƐŝnjĞŝŶďLJƚĞƐ
DĞƚŚŽĚƐǀŝĞǁŝсŐĞƚƐĞƚĞůĞŵĞŶƚŝƐĞƚ;sŝĞǁdLJƉĞŽƚŚĞƌ ŽƉƟŽŶĂůƵůŽŶŐŽīƐĞƚͿƐĞƚ;ƚLJƉĞŽƚŚĞƌŽƉƟŽŶĂůƵůŽŶŐŽīƐĞƚͿ
ZĞƉůĂĐĞĞůĞŵĞŶƚƐŝŶƚŚŝƐǀŝĞǁǁŝƚŚƚŚŽƐĞĨƌŽŵŽƚŚĞƌ ƐƚĂƌƟŶŐĂƚŽƉƟŽŶĂůŽīƐĞƚ
sŝĞǁdLJƉĞƐƵďƐĞƚ;ůŽŶŐďĞŐŝŶŽƉƟŽŶĂůůŽŶŐĞŶĚͿZĞƚƵƌŶĂƐƵďƐĞƚŽĨƚŚŝƐǀŝĞǁƌĞĨĞƌĞŶĐŝŶŐƚŚĞƐĂŵĞƵŶĚĞƌůLJŝŶŐďƵīĞƌ
dŚĞtĞď'>ŽŶƚĞdžƚĂŶĚŐĞƚŽŶƚĞdžƚ;ͿϮϱdŚŝƐŽďũĞĐƚŵĂŶĂŐĞƐKƉĞŶ'>ƐƚĂƚĞĂŶĚƌĞŶĚĞƌƐƚŽƚŚĞĂĚƌĂǁŝŶŐďƵīĞƌ ǁŚŝĐŚŵƵƐƚŝƐĂůƐŽďĞĐƌĞĂƚĞĚĂƚƚŚĞƐĂŵĞƟŵĞŽĨĂƐƚŚĞĐŽŶƚĞdžƚĐƌĞĂƟŽŶƌĞĂƚĞƚŚĞ:HE*/5HQGHULQJ&RQWH[WŽďũĞĐƚĂŶĚĚƌĂǁŝŶŐďƵīĞƌďLJĐĂůůŝŶŐƚŚĞŐĞƚŽŶƚĞdžƚŵĞƚŚŽĚŽĨĂŐŝǀĞŶ,dD>ĂŶǀĂƐůĞŵĞŶƚŽďũĞĐƚǁŝƚŚƚŚĞĞdžĂĐƚƐƚƌŝŶŐǁĞďŐů dŚĞĚƌĂǁŝŶŐďƵīĞƌŝƐĂůƐŽĐƌĞĂƚĞĚďLJŐĞƚŽŶƚĞdžƚ
&ŽƌĞdžĂŵƉůĞ'2&7<3(KWPO!KWPO!ERG\!FDQYDVLG ´F´!FDQYDV!VFULSWW\SH ´WH[WMDYDVFULSW´!YDUFDQYDV GRFXPHQWJHW(OHPHQW%\,G³F´YDUJO FDQYDVJHW&RQWH[W³ZHEJO´JOFOHDU&RORUJOFOHDUJO&2/25B%8))(5B%,7VFULSW!ERG\!KWPO!
tĞď'>KďũĞĐƚϱϯdŚŝƐŝƐƚŚĞƉĂƌĞŶƚŝŶƚĞƌĨĂĐĞĨŽƌĂůůtĞď'>ƌĞƐŽƵƌĐĞŽďũĞĐƚƐZĞƐŽƵƌĐĞŝŶƚĞƌĨĂĐĞŽďũĞĐƚƐtĞď'>ƵīĞƌϱϰ KƉĞŶ'>ƵīĞƌKďũĞĐƚtĞď'>WƌŽŐƌĂŵϱϲ KƉĞŶ'>WƌŽŐƌĂŵKďũĞĐƚtĞď'>ZĞŶĚĞƌďƵīĞƌϱϳ KƉĞŶ'>ZĞŶĚĞƌďƵīĞƌKďũĞĐƚtĞď'>^ŚĂĚĞƌϱϴ KƉĞŶ'>^ŚĂĚĞƌKďũĞĐƚtĞď'>dĞdžƚƵƌĞϱϵ KƉĞŶ'>dĞdžƚƵƌĞKďũĞĐƚtĞď'>hŶŝĨŽƌŵ>ŽĐĂƟŽŶϱϭϬ >ŽĐĂƟŽŶŽĨĂƵŶŝĨŽƌŵǀĂƌŝĂďůĞŝŶĂ
ƐŚĂĚĞƌƉƌŽŐƌĂŵtĞď'>ĐƟǀĞ/ŶĨŽϱϭϭ /ŶĨŽƌŵĂƟŽŶƌĞƚƵƌŶĞĚĨƌŽŵĐĂůůƐƚŽ
ŐĞƚĐƟǀĞƩƌŝďĂŶĚŐĞƚĐƟǀĞhŶŝĨŽƌŵ,ĂƐƚŚĞĨŽůůŽǁŝŶŐƌĞĂĚͲŽŶůLJƉƌŽƉĞƌƟĞƐŶĂŵĞůŽĐĂƟŽŶƐŝnjĞƚLJƉĞ
tĞď'>ZĞŶĚĞƌŝŶŐŽŶƚĞdžƚϱϭϯdŚŝƐŝƐƚŚĞƉƌŝŶŝĐƉĂůŝŶƚĞƌĨĂĐĞŝŶtĞď'>dŚĞĨƵŶĐƟŽŶƐůŝƐƚĞĚŽŶƚŚŝƐƌĞĨĞƌĞŶĐĞĐĂƌĚĂƌĞĂǀĂŝůĂďůĞǁŝƚŚŝŶƚŚŝƐŝŶƚĞƌĨĂĐĞƩƌŝďƵƚĞƐĐĂŶǀĂƐ dLJƉĞ,dD>ĂŶǀĂƐůĞŵĞŶƚ
ƌĞĨĞƌĞŶĐĞƚŽƚŚĞĐĂŶǀĂƐĞůĞŵĞŶƚǁŚŝĐŚĐƌĞĂƚĞĚƚŚŝƐĐŽŶƚĞdžƚ
ĚƌĂǁŝŶŐƵīĞƌtŝĚƚŚ dLJƉĞ'>ƐŝnjĞŝdŚĞĂĐƚƵĂůǁŝĚƚŚŽĨƚŚĞĚƌĂǁŝŶŐďƵīĞƌ ǁŚŝĐŚŵĂLJĚŝīĞƌĨƌŽŵƚŚĞǁŝĚƚŚĂƩƌŝďƵƚĞŽĨƚŚĞ,dD>ĂŶǀĂƐůĞŵĞŶƚŝĨƚŚĞŝŵƉůĞŵĞŶƚĂƟŽŶŝƐƵŶĂďůĞƚŽƐĂƟƐĨLJƚŚĞƌĞƋƵĞƐƚĞĚǁŝĚƚŚŽƌŚĞŝŐŚƚ
ĚƌĂǁŝŶŐƵīĞƌ,ĞŝŐŚƚ dLJƉĞ'>ƐŝnjĞŝdŚĞĂĐƚƵĂůŚĞŝŐŚƚŽĨƚŚĞĚƌĂǁŝŶŐďƵīĞƌ ǁŚŝĐŚŵĂLJĚŝīĞƌĨƌŽŵƚŚĞŚĞŝŐŚƚĂƩƌŝďƵƚĞŽĨƚŚĞ,dD>ĂŶǀĂƐůĞŵĞŶƚŝĨƚŚĞŝŵƉůĞŵĞŶƚĂƟŽŶŝƐƵŶĂďůĞƚŽƐĂƟƐĨLJƚŚĞƌĞƋƵĞƐƚĞĚǁŝĚƚŚŽƌŚĞŝŐŚƚ
/ŶƚĞƌĨĂĐĞƐ/ŶƚĞƌĨĂĐĞƐĂƌĞŽƉƟŽŶĂůƌĞƋƵĞƐƚƐĂŶĚŵĂLJďĞŝŐŶŽƌĞĚďLJĂŶŝŵƉůĞŵĞŶƚĂƟŽŶ^ĞĞŐĞƚŽŶƚĞdžƚƩƌŝďƵƚĞƐĨŽƌĂĐƚƵĂůǀĂůƵĞƐ
tĞď'>ŽŶƚĞdžƚƩƌŝďƵƚĞƐϱϮdŚŝƐŝŶƚĞƌĨĂĐĞĐŽŶƚĂŝŶƐƌĞƋƵĞƐƚĞĚĚƌĂǁŝŶŐƐƵƌĨĂĐĞĂƩƌŝďƵƚĞƐĂŶĚŝƐƉĂƐƐĞĚĂƐƚŚĞƐĞĐŽŶĚƉĂƌĂŵĞƚĞƌƚŽŐĞƚŽŶƚĞdžƚƩƌŝďƵƚĞƐĂůƉŚĂ ĞĨĂƵůƚƚƌƵĞ
/ĨƚƌƵĞƌĞƋƵĞƐƚƐĂĚƌĂǁŝŶŐďƵīĞƌǁŝƚŚĂŶĂůƉŚĂĐŚĂŶŶĞůĨŽƌƚŚĞƉƵƌƉŽƐĞƐŽĨƉĞƌĨŽƌŵŝŶŐKƉĞŶ'>ĚĞƐƟŶĂƟŽŶĂůƉŚĂŽƉĞƌĂƟŽŶƐĂŶĚĐŽŵƉŽƐŝƟŶŐǁŝƚŚƚŚĞƉĂŐĞ
ĚĞƉƚŚ ĞĨĂƵůƚƚƌƵĞ/ĨƚƌƵĞƌĞƋƵĞƐƚƐĚƌĂǁŝŶŐďƵīĞƌǁŝƚŚĂĚĞƉƚŚďƵīĞƌŽĨĂƚůĞĂƐƚϭϲďŝƚƐ
ƐƚĞŶĐŝů ĞĨĂƵůƚĨĂůƐĞ/ĨƚƌƵĞƌĞƋƵĞƐƚƐĂƐƚĞŶĐŝůďƵīĞƌŽĨĂƚůĞĂƐƚϴďŝƚƐ
ĂŶƟĂůŝĂƐ ĞĨĂƵůƚƚƌƵĞ/ĨƚƌƵĞƌĞƋƵĞƐƚƐĚƌĂǁŝŶŐďƵīĞƌǁŝƚŚĂŶƟĂůŝĂƐŝŶŐƵƐŝŶŐŝƚƐĐŚŽŝĐĞŽĨƚĞĐŚŶŝƋƵĞ;ŵƵůƟƐĂŵƉůĞƐƵƉĞƌƐĂŵƉůĞͿĂŶĚƋƵĂůŝƚLJ
ƉƌĞŵƵůƟƉůŝĞĚůƉŚĂ ĞĨĂƵůƚƚƌƵĞ/ĨƚƌƵĞƌĞƋƵĞƐƚƐĚƌĂǁŝŶŐďƵīĞƌǁŚŝĐŚĐŽŶƚĂŝŶƐĐŽůŽƌƐǁŝƚŚƉƌĞŵƵůƟƉůŝĞĚĂůƉŚĂ;/ŐŶŽƌĞĚŝĨůƉŚĂŝƐĨĂůƐĞͿ
ƉƌĞƐĞƌǀĞƌĂǁŝŶŐƵīĞƌ ĞĨĂƵůƚĨĂůƐĞ/ĨƚƌƵĞƌĞƋƵĞƐƚƐƚŚĂƚĐŽŶƚĞŶƚƐŽĨƚŚĞĚƌĂǁŝŶŐďƵīĞƌƌĞŵĂŝŶŝŶďĞƚǁĞĞŶĨƌĂŵĞƐĂƚƉŽƚĞŶƟĂůƉĞƌĨŽƌŵĂŶĐĞĐŽƐƚ
sŝĞǁĂŶĚůŝƉϱϭϯϯͲϱϭϯϰdŚĞǀŝĞǁƉŽƌƚƐƉĞĐŝĮĞƐƚŚĞĂĸŶĞƚƌĂŶƐĨŽƌŵĂƟŽŶŽĨdžĂŶĚLJĨƌŽŵŶŽƌŵĂůŝnjĞĚĚĞǀŝĐĞĐŽŽƌĚŝŶĂƚĞƐƚŽǁŝŶĚŽǁĐŽŽƌĚŝŶĂƚĞƐƌĂǁŝŶŐďƵīĞƌƐŝnjĞŝƐĚĞƚĞƌŵŝŶĞĚďLJƚŚĞ,dD>ĂŶǀĂƐůĞŵĞŶƚǀŽŝĚĚĞƉƚŚZĂŶŐĞ;ŇŽĂƚnjEĞĂƌŇŽĂƚnj&ĂƌͿnjEĞĂƌůĂŵƉĞĚƚŽƚŚĞƌĂŶŐĞϬƚŽϭDƵƐƚďĞфсnj&Ăƌnj&ĂƌůĂŵƉĞĚƚŽƚŚĞƌĂŶŐĞϬƚŽϭǀŽŝĚƐĐŝƐƐŽƌ;ŝŶƚdžŝŶƚLJůŽŶŐǁŝĚƚŚůŽŶŐŚĞŝŐŚƚͿǀŽŝĚǀŝĞǁƉŽƌƚ;ŝŶƚdžŝŶƚLJůŽŶŐǁŝĚƚŚůŽŶŐŚĞŝŐŚƚͿ
WĞƌͲ&ƌĂŐŵĞŶƚKƉĞƌĂƟŽŶƐϱϭϯϯǀŽŝĚďůĞŶĚŽůŽƌ;ŇŽĂƚƌĞĚŇŽĂƚŐƌĞĞŶŇŽĂƚďůƵĞŇŽĂƚĂůƉŚĂͿǀŽŝĚďůĞŶĚƋƵĂƟŽŶ;ĞŶƵŵŵŽĚĞͿŵŽĚĞ^ĞĞŵŽĚĞZ'ĨŽƌďůĞŶĚƋƵĂƟŽŶ^ĞƉĂƌĂƚĞǀŽŝĚďůĞŶĚƋƵĂƟŽŶ^ĞƉĂƌĂƚĞ;ĞŶƵŵŵŽĚĞZ'
ĞŶƵŵŵŽĚĞůƉŚĂͿŵŽĚĞZ'ĂŶĚŵŽĚĞůƉŚĂ&hEͺ&hEͺ^hdZd &hEͺZsZ^ͺ^hdZd
ǀŽŝĚďůĞŶĚ&ƵŶĐ;ĞŶƵŵƐĨĂĐƚŽƌĞŶƵŵĚĨĂĐƚŽƌͿƐĨĂĐƚŽƌ^ĂŵĞĂƐĨŽƌĚĨĂĐƚŽƌƉůƵƐ^Zͺ>W,ͺ^dhZdĚĨĂĐƚŽƌZKKEKEͺD/Eh^ͺ^ZͺK>KZKEͺD/Eh^ͺ^dͺK>KZKEͺD/Eh^ͺ^Zͺ>W,KEͺD/Eh^ͺ^dͺ>W,KEͺD/Eh^ͺKE^dEdͺK>KZKEͺD/Eh^ͺKE^dEdͺ>W,
EŽƚĞ^ƌĐĂŶĚĚƐƚĨĂĐƚŽƌƐŵĂLJŶŽƚďŽƚŚƌĞĨĞƌĞŶĐĞĐŽŶƐƚĂŶƚĐŽůŽƌǀŽŝĚďůĞŶĚ&ƵŶĐ^ĞƉĂƌĂƚĞ;ĞŶƵŵƐƌĐZ'ĞŶƵŵĚƐƚZ'
ĞŶƵŵƐƌĐůƉŚĂĞŶƵŵĚƐƚůƉŚĂͿƐƌĐZ'ƐƌĐůƉŚĂ^ĞĞƐĨĂĐƚŽƌĨŽƌďůĞŶĚ&ƵŶĐĚƐƚZ'ĚƐƚůƉŚĂ^ĞĞĚĨĂĐƚŽƌĨŽƌďůĞŶĚ&ƵŶĐEŽƚĞ^ƌĐĂŶĚĚƐƚĨĂĐƚŽƌƐŵĂLJŶŽƚďŽƚŚƌĞĨĞƌĞŶĐĞĐŽŶƐƚĂŶƚĐŽůŽƌǀŽŝĚĚĞƉƚŚ&ƵŶĐ;ĞŶƵŵĨƵŶĐͿĨƵŶĐEsZ>tz^>^^Yh>>Yh>'ZdZ'Yh>EKdYh>
ǀŽŝĚƐĂŵƉůĞŽǀĞƌĂŐĞ;ŇŽĂƚǀĂůƵĞůŝŶǀĞƌƚͿǀŽŝĚƐƚĞŶĐŝů&ƵŶĐ;ĞŶƵŵĨƵŶĐŝŶƚƌĞĨƵŝŶƚŵĂƐŬͿĨƵŶĐEsZ>tz^>^^>Yh>EKdYh>'ZdZ'Yh>
ǀŽŝĚƐƚĞŶĐŝů&ƵŶĐ^ĞƉĂƌĂƚĞ;ĞŶƵŵĨĂĐĞĞŶƵŵĨƵŶĐŝŶƚƌĞĨƵŝŶƚŵĂƐŬͿ
ĨĂĐĞ&ZKEd <&ZKEdͺEͺ<ĨƵŶĐEsZ>tz^>^^>Yh>EKdYh>'ZdZ'Yh>
ǀŽŝĚƐƚĞŶĐŝůKƉ;ĞŶƵŵĨĂŝůĞŶƵŵnjĨĂŝůĞŶƵŵnjƉĂƐƐͿĨĂŝůnjĨĂŝůĂŶĚnjƉĂƐƐ<W ZKZW>/EZZ/EsZd /EZͺtZW ZͺtZW
ǀŽŝĚƐƚĞŶĐŝůKƉ^ĞƉĂƌĂƚĞ;ĞŶƵŵĨĂĐĞĞŶƵŵĨĂŝůĞŶƵŵnjĨĂŝůĞŶƵŵnjƉĂƐƐͿ
ĨĂĐĞ&ZKEd <&ZKEdͺEͺ<ĨĂŝůnjĨĂŝůĂŶĚnjƉĂƐƐ^ĞĞĨĂŝůnjĨĂŝůĂŶĚnjƉĂƐƐĨŽƌƐƚĞŶĐŝůKƉ
ƵīĞƌKďũĞĐƚƐϱϭϯϱKŶĐĞďŽƵŶĚďƵīĞƌƐŵĂLJŶŽƚďĞƌĞďŽƵŶĚǁŝƚŚĂĚŝīĞƌĞŶƚdĂƌŐĞƚǀŽŝĚďŝŶĚƵīĞƌ;ĞŶƵŵƚĂƌŐĞƚKďũĞĐƚďƵīĞƌͿƚĂƌŐĞƚZZzͺh&&Z>DEdͺZZzͺh&&Z
ǀŽŝĚďƵīĞƌĂƚĂ;ĞŶƵŵƚĂƌŐĞƚůŽŶŐƐŝnjĞĞŶƵŵƵƐĂŐĞͿƚĂƌŐĞƚZZzͺh&&Z>DEdͺZZzͺh&&ZƵƐĂŐĞ^dd/ͺZt^dZDͺZtzED/ͺZt
ǀŽŝĚďƵīĞƌĂƚĂ;ĞŶƵŵƚĂƌŐĞƚKďũĞĐƚĚĂƚĂĞŶƵŵƵƐĂŐĞͿƚĂƌŐĞƚĂŶĚƵƐĂŐĞ^ĂŵĞĂƐĨŽƌďƵīĞƌĂƚĂĂďŽǀĞ
ǀŽŝĚďƵīĞƌ^ƵďĂƚĂ;ĞŶƵŵƚĂƌŐĞƚůŽŶŐŽīƐĞƚKďũĞĐƚĚĂƚĂͿƚĂƌŐĞƚZZzͺh&&Z>DEdͺZZzͺh&&Z
KďũĞĐƚĐƌĞĂƚĞƵīĞƌ;ͿEŽƚĞŽƌƌĞƐƉŽŶĚŝŶŐKƉĞŶ'>^ĨƵŶĐƟŽŶŝƐ'ĞŶƵīĞƌƐǀŽŝĚĚĞůĞƚĞƵīĞƌ;KďũĞĐƚďƵīĞƌͿĂŶLJŐĞƚƵīĞƌWĂƌĂŵĞƚĞƌ;ĞŶƵŵƚĂƌŐĞƚĞŶƵŵƉŶĂŵĞͿƚĂƌŐĞƚZZzͺh&&Z>DEdͺZZzͺh&&ZƉŶĂŵĞh&&Zͺ^/h&&Zͺh^'ůŝƐƵīĞƌ;KďũĞĐƚďƵīĞƌͿ
ĞƚĞĐƚĂŶĚŶĂďůĞdžƚĞŶƐŝŽŶƐϱϭϯϭϰƐƚƌŝŶŐŐĞƚ^ƵƉƉŽƌƚĞĚdžƚĞŶƐŝŽŶƐ;ͿŽďũĞĐƚŐĞƚdžƚĞŶƐŝŽŶ;ƐƚƌŝŶŐŶĂŵĞͿ
ZĂƐƚĞƌŝnjĂƟŽŶϱϭϯϯǀŽŝĚĐƵůů&ĂĐĞ;ĞŶƵŵŵŽĚĞͿŵŽĚĞ<&ZKEdͺEͺ<&ZKEd
ǀŽŝĚĨƌŽŶƚ&ĂĐĞ;ĞŶƵŵŵŽĚĞͿŵŽĚĞttǀŽŝĚůŝŶĞtŝĚƚŚ;ŇŽĂƚǁŝĚƚŚͿǀŽŝĚƉŽůLJŐŽŶKīƐĞƚ;ŇŽĂƚĨĂĐƚŽƌ
ŇŽĂƚƵŶŝƚƐͿ
ĞƚĞĐƚĐŽŶƚĞdžƚůŽƐƚĞǀĞŶƚƐϱϭϯϭϯůŝƐŽŶƚĞdžƚ>ŽƐƚ;Ϳ
WebGLReferenceCardhttp://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf
WebGL Inspectorhttp://benvanik.github.com/WebGL-Inspector/
WebGL Conformancehttps://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/tests/webgl-conformance-tests.html
WebGL frameworksTDL http://code.google.com/p/threedlibrary/three.js https://github.com/mrdoob/three.jsCubicVR 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/
Exporterinka3d http://www.inka3d.com/Blender to WebGL http://code.google.com/p/blender-webgl-exporter/
LEARNING WEBGLhttp://learningwebgl.com/blog/
Khronoshttp://www.khronos.org/
Useful
Art
education
science
data visualization
fine artsmusic videodemo scene
Ad promotion
bannerstorytelling
and more !
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
Thank you. @yukio_andoh