こんにちは！島根支社エンジニアの渡部です。
Fenrir Advent Calendar 2014は「2014年にグッときたコレ」がテーマということで、18日目の今日は2014年にググっと普及に向けて加速した WebGL について語ります！
WebGL とは
Webブラウザにおける基本的なグラフィックスは HTML/CSS を用いたマークアップと JavaScript による制御で実現されています。
また、 Flash や Unity Web Player のようにブラウザ外部のプラグインを用いて他のツールで作成した高度な 2D/3D グラフィックスを実現する手段もあります。
WebGL はそれを更に推し進め、外部プラグイン不要でブラウザ内部の機能だけで高度な 2D/3D グラフィックスを描画するために作られた新しい標準仕様です。
美麗なグラフィックスのPC/スマートフォンゲームで広く用いられている OpenGL/OpenGL ES を元にしているので、ブラウザ上でもネイティブアプリのように高速なグラフィックスが動作します。
WebGLのこれまで
WebGL は元々 HTML5 で追加された Canvas の3D版として研究開発が始められました。
現在のように標準規格 WebGL として策定が開始されたのが2009年のことで、対応ブラウザも徐々にリリースされていきましたが、ほぼPCブラウザのみの対応で Internet Explorer が対応していないなどの問題から利用は一部に限られていました。
WebGLを使った高度な表現を見れる有名なサイトとしては GLSL Sandbox や Shadertoy が挙げられます。
C++/Objective-C/Java などから利用されている OpenGL をベースにしているため、JavaScript で利用可能なライブラリが数少ないことも WebGL を使ったアプリケーションが少ない一因です。
動作環境の問題がほぼ解決！
2013年にリリースされた Internet Explorer 11 や Chrome for Android 30 が WebGL に対応し、更に今年リリースされた iOS8 版の Mobile Safari も WebGL が実行できるようになったことで、PC/スマートフォンの主要ブラウザ全てで WebGL を動かせるようになりました。
過去に作られた WebGL を利用したサイトは WebGL 対応の決まったブラウザで開かないと動作しないということがあり、とくにスマートフォンで全く動かせなかったことが普及の妨げになっていましたが、これからのデバイスは全て WebGL 対応となるので広く使われるサイトでも対応することが可能になります。
WebGL対応の開発環境が倍増！
今年に入ってFlash/ActionScript風の構文でブラウザアプリを作成出来る CreateJS が WebGL を使った描画に対応したり、ゲーム機向けのソフトの開発にも使われる Unreal Engine 4 が WebGL へのエクスポートに正式対応するなど、2D/3Dグラフィックスともに WebGL に対応した開発環境が増えてきています。
独自プラグインの Unity Web Player で3Dグラフィックスを実装していた Unity も、次期バージョンで WebGL 出力をサポートするため、Unity Web Player を使って作られた作品も来年以降 WebGL への移行が始まるかと思います。
その他にもハイエンドアプリケーション向けからカジュアルアプリ向けのものまで、多くの開発環境が WebGL サポートを表明している事から、 WebGL の開発環境が以前に比べて急速に整いつつあります。
WebGL を使って快適なグラフィックスを
WebGL は新しい規格なので現状古いブラウザでは動かない、開発環境がまだ少ないといった問題もありますが、ブラウザ上で GPU をフル活用した高速なグラフィックスを実現するには最良の手段です。
主要ブラウザの全てが最新版で対応しており、開発環境も増えつつあるのでぜひ一度試して見て下さい。
余談ですが、WebGL の他にもブラウザで OpenCL ベースの SIMD 演算が可能な WebCL もワーキングドラフトが策定されており、ブラウザで Oculus Rift などのVRデバイスを利用可能にする WebVR も開発が始まっています。
エンジニア募集
フェンリルでは新しい技術に興味のあるWebエンジニアを随時募集しています。
私が働く島根支社の採用ページもあるので、ぜひ一度ご覧下さい！
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
