bonsai's blog

ITベンチャー所属。Webエンジニア兼マーケッターです。python習得しようと頑張ってるごく一般的なサラリーマン。※ブログ初心者の為、至らぬ所は..m(_ _)m

WebGLは何かをまとめてみた

WebGLとはなんぞ?

WebGLとはGPU(Graphics Processing Unit)へ直接アクセスすることができるブラウザに組み込まれたAPIのこと。
つまり、ブラウザで、3次元CGを表示させるための標準仕様のこと。

WebGLOpenGLというネイティブ(アプリ)で動作するグラフィックスAPIをブラウザから呼び出すためのパイプ役のような存在

f:id:bonsaimasa:20190208091711p:plain
javascriptからOpenGLへ直接アクセスすることはできないがWebGLが間に入ることでOpenGLを間接的に呼び出すことができる

簡潔に表現するなら、WebGLOpenGLを介して直接GPUを利用できるため非常に高速

以下参照させてもらいました。
第1回目 WebGLの概念 - Qiita

WebGLはどんな感じか見てみる

実際に見てみるのが一番実感できます。
良いなと思う参考URLまとめてみました。

3Gアニメーション

alteredqualia.com

まずは3Gアニメーションです。
とても綺麗ですね。HTML,CSS,JavaScriptだけで表現されているとは思えないほど綺麗でダイナミックです。

カメラとの連動

airtightinteractive.com

カメラと連動させるとこんな事もできるらしいです。

3Gゲーム

cwar.de

3Gが表現出来るとの事でこんなゲームも実装可能です。

WebGLのメリット

  • FlashPlayerなどのプラグインが不要
  • 爆速なため、スマホでも動く(ネイティブに負けない)。これはハードがすごい!という要素もあるかと思いますが

WebGLのデメリット

  • レガシーなブラウザは対応していない

まとめ

WebGLをつかえば、ハイブリットアプリの未来ももっと開けそう。
通常のWebサイトでもメインビジュアルに用いるだけでサイトをリッチに出来ますね。
実際の実装が難しそうなので、時間がある時にコーディングしてみようと思います。