Web GLの話

1,677 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,677
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web GLの話

  1. 1. Web GLの話 2012/08/26 Sapporo.js @havanaclub_2012年8月26日日曜日
  2. 2. WebGLってなんすか (いきなり)2012年8月26日日曜日
  3. 3. WebGLってなんすか Open GL ES 2.0 のJavaScript porting canvas要素にOpenGLのプレーンを作 れる GPUに直接命令を投げれる(ドライ バ経由で)2012年8月26日日曜日
  4. 4. 対応ブラウザ PC 新しげな Firefox, Chrome, Safari,Opera IEは対応する気がない(アドオン…) Handheld Firefox, Opera, ソニエリ UIWebViewは setWebGLEnabled:YESがいるよ2012年8月26日日曜日
  5. 5. OpenGL ES 2.0 ってな んぞ OpenGL 2.0のサブセット 最近のスマホの標準 ProgrammableShaderモデル, 実数精 度プリフィクス, 冗長なAPIの削除etc ちなみにこの前のSIGGRAPHで ES3.0が公開されたよ2012年8月26日日曜日
  6. 6. 何がうれしいの zero-deploy cross platform cross device で3Dインタラクションプログラムが 動く(やったー)2012年8月26日日曜日
  7. 7. デモるよ Google zygote body http://zygotebody.com/ MMD on WebGLft っぽいの  http://edv.sakura.ne.jp/mmd/ doob.github.com/three.js/examples/webgl_geometry_minecraft_ao.html 2012年8月26日日曜日
  8. 8. Programmable shader OpenGL ES 2.0では全部の描画を Programmable Shaderを使わないと いけない =>どゆこと? 頂点を投げてphong shadingで塗れ とかいうようなAPIが一切なくなった パイプラインにデータとシェーダプ ログラムを投げて描画させる  =>自由度の代わりに煩雑2012年8月26日日曜日
  9. 9. Shader pipeline テクスチャ array Fragment 出力ビットマッ 頂点データ Vertex 頂点データ shader shader プバッファ GLSL GLSL2012年8月26日日曜日
  10. 10. プログラムの流れ 1. 初期化(キャンバスとか座標関係とか 作る) 2. 頂点データ&頂点用GLSLをセット 3. Vertex shader(頂点シェーダ)で頂 点をごにょる 4. テクスチャとFragment Shader用 GLSLをセット 5. Fragment shader(DirectXでいうピ クセルシェーダ)で画素ごとにどうい う色にするか決める2012年8月26日日曜日
  11. 11. GLSL シェーダプログラミング専用言語 Cっぽい。型付き 複数の頂点・ピクセルに同じプログ ラムが適用される一種のストリーム処 理 WebGLだと実行時コンパイル後GPU に流される2012年8月26日日曜日
  12. 12. セキュリティ ローカルファイルや異なるドメインの 画像はテクスチャとして読めないので ローカル開発するときもWebサーバ立 てること 異ドメインについてはCORSヘッダつ ければ大丈夫だそう(未調査)2012年8月26日日曜日
  13. 13. 実際どんなかんじな の(コード解説) Learning WebGL のサンプルを少し整理した奴 http://learningwebgl.com/blog/?page_id=12172012年8月26日日曜日
  14. 14. 補足:座標の話 http://www.belanecbn.sk/opengl_tutorialy/obrazky/ opengl_perspective_projection.jpg2012年8月26日日曜日
  15. 15. ぶっちゃけ めんどい2012年8月26日日曜日
  16. 16. ライブラリとか使お う2012年8月26日日曜日
  17. 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. 18. やってくれること • 球とかの単純なオブジェクトの生成 • モデルデータ(+テクスチャ)・カメ ラの管理(シーングラフ管理) • ボーンとかIKあたりのアニメーション 支援 • LOD、Fogなどなど2012年8月26日日曜日
  19. 19. デモ2012年8月26日日曜日
  20. 20. パフォーマンス • JavaScriptよりGPUのほうが10倍くら い早いのでなるべくGPUにやらせるこ と • パーティクル生成とかポストプロセス とか2012年8月26日日曜日
  21. 21. で、使い道は? とりあえずゲーム方面? Quake 2は移植できたし Minecraftくらいなら余裕そう GISとか3Dチャートとかよろしいので は 3Dチャートライブラリ作りたい(Rに はなんかあるのを見せてもらった)2012年8月26日日曜日
  22. 22. 本とか2012年8月26日日曜日
  23. 23. WebGL: Up and Running Building 3D Graphics for the Web 今月出たばっかの本 three.jsベースでゲームと か作る とても良いです2012年8月26日日曜日
  24. 24. Professional WebGL Programming: Developing 3D Graphics for the Web 今年7月の本 絵を出してテクス チャ貼るところまで (初心者向け?) 持ってない2012年8月26日日曜日
  25. 25. OpenGL Insights 今月出たばっかの本 OpenGLの最近のトピック や使いこなしテクが色々! WebGLの話もいくつか (結構値段するけど)2012年8月26日日曜日
  26. 26. Programming OpenGL ES 2.0 Super Bibleとかは結構 レガシー記述が多い Programmable shader なOpenGLはこれから入 ると良い 日本語版もあるよ2012年8月26日日曜日
  27. 27. OpenGL 4.0 Shading Language cookbook GLSLはこれいいよ GLSLのバージョンが 違うのでそのへんは がんばる あとnVidiaのサイト とかWebに色々サン プルのってる2012年8月26日日曜日

×