webgl (three.js) code lab - intro. [ gtug girls 10th]

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

IEWebGLhttp://iewebgl.com/

Pros and Consof Using WebGL グラフィックスハードウェアを最大限に生かせる。

ブラウザと組み合わせて最大限のパフォーマンスを

ピクセル単位で操作できる

三次元の豊かな表現力

特殊なプラグイン無し

DOMやCanvasを扱う知識

OpenGL ES + GLSL学ぶのが難しい

デバッグが難しい

オプティマイズが難しい

まだまだ動かない環境も

スマートフォンでは？

OpenGL パイプライン

Three.js (mr doob)

http://mrdoob.com

[ 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

Google Bodyhttp://www.zygotebody.com/

WebGL Experimentshttp://www.chromeexperiments.com/webgl

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

PlayWebGLhttp://playwebgl.com/

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

Demo Repositoryhttp://www.khronos.org/webgl/wiki/Demo_Repository

WebGL Earthhttp://www.webglearth.com/

Google MapsGLhttp://maps.google.com/gl

`

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

WebGL playgroundhttp://webglplayground.net/

ǁǁǁŬŚƌŽŶŽƐŽƌŐǁĞďŐůΞϮϬϭϭ<ŚƌŽŶŽƐ'ƌŽƵƉͲ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