WebGL ってそもそもなんなの！？
ささっと押さえる基本の基本
本日のテーマ
WebGL ってそもそもなんなの！？ と題して、まずは WebGL と呼ばれているものがいったい何者なのか、基本中の基本の部分になりますが、確認していきましょう。
まだ肩肘張る必要はありませんので、楽な気持ちで聞いてみてください。
環境による制約
WebGL は実行できる環境が制限されている、なんてみなさんも聞いたことがあると思います。
まずは、これがどういうことなのかちょっと考えてみましょう。
環境による制約
たとえばみなさんが普段から使っている商売道具、PC や Mac について考えてみてください。
OS は様々だと思いますが、もう少し踏み込んで考えてみるとみなさんがお使いの端末にも様々なスペックのものがありますよね。
ハイエンドな CPU や GPU を積んでいるもの、あるいはディスプレイの解像度や付属するキーボードのタイプなど、言い出せばキリがないほどいろいろなパターンがあると思います。
環境による制約
外見上でわかりやすいところで言うと、たとえばウェブカメラが付いているかどうか、というふうに考えてみるとどうでしょうか。
ラップトップタイプの端末には、ウェブカメラがあらかじめ搭載されているものが多いですね。モバイル端末であれば、カメラがついていないものとなるとほとんど考えられませんね。
このような、端末ごとの差異をここでは ハードウェアの違い というふうに表現します。
環境による制約
たとえば WebRTC という JavaScript の API があります。この API は、ウェブカメラやマイクなどのデバイスにアクセスすることができる素晴らしい API ですが、当然ながら、肝心のデバイス自体が備わっていない端末では実行はできたとしても意味を成しません。
このような、ハードウェアによる制約が、やはり WebGL にもあります。
ハードウェアにおける制約
WebGL とハードウェア要件という意味でどのような制約があるかを考えてみると、まず実行そのものが難しいケースと、実行はできるが結果が変わってしまうケースがあります。
実行が難しいケースというのは、ハードウェアの性能的に WebGL のグラフィックス API に対応できない場合ですね。
しかし実際には、そのような端末は現時点ではほとんどありません。モバイル端末でさえ、ほぼ間違いなくこの要件は満たしていると考えていいでしょう。
ハードウェアにおける制約
より具体的には、OpenGL ES 2.0 の実行が不可能なハードウェアでは、WebGL が実行できません。
これは、WebGL が OpenGL ES 2.0 のバインディングだからです。
そういう端末は PC やスマートフォンならほぼないですね。
ソフトウェア的制約
しかし、ハードウェアが対応していても、実はもうひとつ制約として引っかかってくる可能性があるものがあります。
それはブラウザの差異による ソフトウェア的制約 です。
ソフトウェア的制約
一般的なウェブブラウザには、各種ベンダによってなにかしらの JavaScript エンジンが搭載されています。
このブラウザに搭載されているエンジンが WebGL という規格の API に対応していない場合は、仮にハードウェアが WebGL や OpenGL ES を実行可能だとしても、WebGL は動作しません。
ソフトウェア的制約
ハードウェア的には、WebGL を実行できない端末はほとんどないという話をしましたが、ソフトウェア的にはどうなんでしょう。
これを考える上では、パソコンとモバイル端末では少々事情が違ってきます。
ソフトウェア的制約
まず Mac を含むいわゆるパソコンの場合は、主要なモダンブラウザの全てが WebGL に対応しています。
IE でも、11 以降のバージョンであれば 一応 WebGL は動きます。
ちょっと怪しいけどｗ
ソフトウェア的制約
モバイル端末の場合、現行、あるいはこれから発売されるであろう端末は、まず大丈夫です。
ただ、iOS 8 よりも前の OS を搭載した Apple の端末は WebGL が実行できません。これは OS により意図的に WebGL の実行が制限されているからであり、ハードウェア的には動作させられるだけの要件を満たしているにもかかわらず、なにかしらの理由により WebGL がブロックされているからです。
広告でのみ実行が許可されているという謎仕様……
ソフトウェア的制約
Android の場合は、みなさんも日常的に壁に当たっているかと思いますが、端末ごとの差異が大きすぎて動くも動かないも端末次第、という感じです。
ただ、Android + Chrome の組み合わせなら動く場合が多いでしょう。
いわゆるメーカー独自の組み込みデフォルトブラウザがカオスです。
まとめると
ちょっとまとめてみます。
WebGL は、現状、あるいはこれから先発売される、ほとんどすべての PC やモバイル端末で実行が可能となります。
ただし、ちょっと古いモバイル端末では、若干あやしい場合もあるでしょう。
まとめると
そして WebGL とは要するに JavaScript の API であり、その API に対応しないハードウェアやブラウザでは、動作させられません。
また、WebGL はグラフィックス特化の API なので、ハードウェアのなかでも GPU については WebGL に対する実行時の影響が大きい です。
これらの制約について開発者側がすべてに漏れ無く完璧に対応することは常識的に考えて無理です。
まとめると
ということで、動くかどうかで言えば、現時点ではほとんどの端末上で WebGL が動くようになっています。
ただし、動いたとしても動作に違いが出るケースというのはどうしてもゼロにはできません。
これは、WebGL がハードウェアやソフトウェアから複合的に様々な影響を受けるためだからなんですね。
どこまでできる？
さて、ここからは WebGL で具体的にどのようなことができるのか、事例をいくつか見てみましょう。
実際にこの場で、実行してみます。
WebGL の可能性
このように WebGL はかなり凝った演出を行うことが現状既に可能となっています。
これまでの Web では実現不可能だった、とてもリッチなウェブサイトを構築することも、WebGL なら可能です。
WebGL の可能性
WebGL はブラウザの JavaScript エンジンが対応していればプラグインなどを追加することなく、デフォルトの状態でそのまま動きます。
ユーザーに特別なインストールや準備を強要することはありません。
WebGL の可能性
ぜひみなさんも、そんな WebGL の大きな可能性を考えてみてください。
今回のハンズオンがそのみなさんの思い描いた可能性を実現するための、最初の一歩になるといいなと思っています。
一緒に頑張りましょう！
おまけ告知
WebGL スクール、第三期の募集をまさに今行っています。
体験会は 4 月 23 日の土曜日に、そして本講義は GW 明けの 5 月 14 日 より開始です。WebGL や GLSL に興味を持っていただけたのなら、ぜひ参加をご検討いただければと思います。