Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 WebGLについて #TechLunch

HTML5 WebGLについて #TechLunch

2012/03/14(水) @ Livesense TechLunch
発表者:島田 喜裕

E60aa4f80303f3f386898546ddb3686a?s=128

Livesense Inc.
PRO

April 23, 2014
Tweet

Transcript

  1. HTML5 WebGLについて

  2. WebGLとは? • ブラウザをプレステにしてしまう技術 • 2011年3月に1.0が勧告されたばかりの今一番 ホットな仕組み • OpenGLがWebGLのもとになっている

  3. OpenGL • OpenGL グラフィックスを高速に描画するための専用ハード ウェアを使うためのAPI

  4. GPU(Graphics Processing Unit) nVidiaのGPU

  5. GPU nVidiaのGPU VGAカード

  6. HTML5 HTML5では、これまで単に文章を構造化するのみ から、動画、オーディを扱えるようになった。 →クロスプラットホーム環境を実現

  7. canvas HTML5のcanvas要素では3次元グラフィックスを描 画することができる。 • 2次元や3次元グラフィックスをプラグインなしに HTML上に直接描画することができる。 • 原理的にはどのような3次元グラフィックスも描 画することが可能。

  8. WebGL • Webブラウザで3DCGが表示できる • Flash、SilverLight等のプラグイン不要 • 勝手にGPUを叩いてくれる • インターフェースはJavaScript 動作するブラウザ

    • FireFox、Chrome、Safari、Opera • IEではIEWebGL、JebGL、ChromeFrameなどを 使うことで動作させることができる
  9. WebGLの実行環境 • WebブラウザがWebGLに対応していること • PCに搭載されているグラフィックカードの OpenGLのバージョンが2.0以上である必要 (2012年2月現在) →古いPCでは対応してないのが現状 • スマートフォンなどでのWebGLの対応は現在

    (2012年2月)準備中段階。 →一気にウェブブラウザ用3次元グラフィックスAPI の地位を築く!?
  10. WebGLの問題 IEがWebGLとは反対の立場をとっている →「OpenGL」と「DirectX」はライバル ↓ DirectXはMS関連製品でしか動作しないため勝敗 は明らか!?

  11. セキュリティーホール WebGLはその機能要件ゆえにセキュリティが危険 に晒される可能性がある 1. ハードウェアの機能がWeb側につつぬけ 2. Webの利用体験を確保するためにサードパー ティを放任しすぎている 3. DoS攻撃に対する不備

  12. デモ • Flash、Unity、WebGLの動作を確認 • ジニーエフェクト • Google Labsが公開するBody • Google

    Chrome専用のWebGLコンテンツ • プレゼンテーションをWebGLで加工 • Aquarium
  13. まとめ • WebGLは扱いが難しい? • 仕様策定の行く末やブラウザ対応など課題はあ る • Web上でできることの幅が一段と広がる

  14. 次回 WebGL WebSockets WebWorkers WebStorage