1. Web GLの話
2012/08/26 Sapporo.js
@havanaclub_
2012年8月26日日曜日

2. WebGLってなんすか
(いきなり)
2012年8月26日日曜日

3. WebGLってなんすか
Open GL ES 2.0 のJavaScript
porting
canvas要素にOpenGLのプレーンを作
れる
GPUに直接命令を投げれる（ドライ
バ経由で）
2012年8月26日日曜日

4. 対応ブラウザ
PC
新しげな Firefox, Chrome,
Safari,Opera
IEは対応する気がない（アドオン…）
Handheld
Firefox, Opera, ソニエリ
UIWebViewは
setWebGLEnabled:YESがいるよ
2012年8月26日日曜日

5. OpenGL ES 2.0 ってな
んぞ
OpenGL 2.0のサブセット
最近のスマホの標準
ProgrammableShaderモデル, 実数精
度プリフィクス, 冗長なAPIの削除etc
ちなみにこの前のSIGGRAPHで
ES3.0が公開されたよ
2012年8月26日日曜日

6. 何がうれしいの
zero-deploy
cross platform
cross device
で3Dインタラクションプログラムが
動く（やったー）
2012年8月26日日曜日

7. デモるよ
Google zygote body
http://zygotebody.com/
MMD on WebGL
ft っぽいの http://edv.sakura.ne.jp/mmd/
doob.github.com/three.js/examples/webgl_geometry_minecraft_ao.html
2012年8月26日日曜日

8. Programmable shader
OpenGL ES 2.0では全部の描画を
Programmable Shaderを使わないと
いけない =>どゆこと？
頂点を投げてphong shadingで塗れ
とかいうようなAPIが一切なくなった
パイプラインにデータとシェーダプ
ログラムを投げて描画させる
=>自由度の代わりに煩雑
2012年8月26日日曜日

9. Shader pipeline
テクスチャ
array
Fragment 出力ビットマッ
頂点データ Vertex 頂点データ'
shader shader プバッファ
GLSL GLSL
2012年8月26日日曜日

10. プログラムの流れ
1. 初期化（キャンバスとか座標関係とか
作る）
2. 頂点データ&頂点用GLSLをセット
3. Vertex shader（頂点シェーダ）で頂
点をごにょる
4. テクスチャとFragment Shader用
GLSLをセット
5. Fragment shader（DirectXでいうピ
クセルシェーダ）で画素ごとにどうい
う色にするか決める
2012年8月26日日曜日

11. GLSL
シェーダプログラミング専用言語
Cっぽい。型付き
複数の頂点・ピクセルに同じプログ
ラムが適用される一種のストリーム処
理
WebGLだと実行時コンパイル後GPU
に流される
2012年8月26日日曜日

12. セキュリティ
ローカルファイルや異なるドメインの
画像はテクスチャとして読めないので
ローカル開発するときもWebサーバ立
てること
異ドメインについてはCORSヘッダつ
ければ大丈夫だそう（未調査）
2012年8月26日日曜日

13. 実際どんなかんじな
の（コード解説）
Learning WebGL のサンプルを少し整理した奴
http://learningwebgl.com/blog/?page_id=1217
2012年8月26日日曜日

14. 補足：座標の話
http://www.belanecbn.sk/opengl_tutorialy/obrazky/
opengl_perspective_projection.jpg
2012年8月26日日曜日

15. ぶっちゃけ
めんどい
2012年8月26日日曜日

16. ライブラリとか使お
う
2012年8月26日日曜日

17. 各種ライブラリ
three.js
http://mrdoob.github.com/three.js/ おすすめ
PhiloGL
http://www.senchalabs.org/philogl/
GLGE
http://www.glge.org/
SceneJS
http://scenejs.org/
2012年8月26日日曜日

18. やってくれること
• 球とかの単純なオブジェクトの生成
• モデルデータ（＋テクスチャ）・カメ
ラの管理（シーングラフ管理）
• ボーンとかIKあたりのアニメーション
支援
• LOD、Fogなどなど
2012年8月26日日曜日

19. デモ
2012年8月26日日曜日

20. パフォーマンス
• JavaScriptよりGPUのほうが10倍くら
い早いのでなるべくGPUにやらせるこ
と
• パーティクル生成とかポストプロセス
とか
2012年8月26日日曜日

21. で、使い道は？
とりあえずゲーム方面？
Quake 2は移植できたし
Minecraftくらいなら余裕そう
GISとか3Dチャートとかよろしいので
は
3Dチャートライブラリ作りたい(Rに
はなんかあるのを見せてもらった）
2012年8月26日日曜日

22. 本とか
2012年8月26日日曜日

23. WebGL: Up and Running
Building 3D Graphics for the Web
今月出たばっかの本
three.jsベースでゲームと
か作る
とても良いです
2012年8月26日日曜日

24. Professional WebGL Programming:
Developing 3D Graphics for the
Web
今年7月の本
絵を出してテクス
チャ貼るところまで
（初心者向け？）
持ってない
2012年8月26日日曜日

25. OpenGL Insights
今月出たばっかの本
OpenGLの最近のトピック
や使いこなしテクが色々！
WebGLの話もいくつか
（結構値段するけど）
2012年8月26日日曜日

26. Programming OpenGL
ES 2.0
Super Bibleとかは結構
レガシー記述が多い
Programmable shader
なOpenGLはこれから入
ると良い
日本語版もあるよ
2012年8月26日日曜日

27. OpenGL 4.0 Shading
Language cookbook
GLSLはこれいいよ
GLSLのバージョンが
違うのでそのへんは
がんばる
あとnVidiaのサイト
とかWebに色々サン
プルのってる
2012年8月26日日曜日