K
A graphic of skull
Photo by Abhipsa Pal on Unsplash

WebGLについて

WebGL とは

WebGL は Web Graphics Library の略であり、その名の通りウェブアプリ、つまりは JavaScript でグラフィック操作を行うためのライブラリである。

そもそもアプリから 2D/3D の描画をする際には OpenGL という C 言語のライブラリが存在し、広く使われている。 ネイティブなアプリであれば OpenGL を使えば良いのだが、当然ながらウェブ上のアプリからも綺麗なアニメーションを表示したいという要求が出てくる。

そこで 2006 年に Firefox ブラウザを開発する Mozilla がウェブ上で 3D 描画をするプロトタイプを発表。2009 年、そこに OpenGL の仕様を策定しているクロノスグループが参加しワーキンググループが発足、主要なブラウザベンダーである Apple や Google も参加したことにより標準化の動きが生まれた。

WebGL は OpenGL(より正確には組込みシステム用に定義されたサブセットである OpenGL ES)をベースに定義されており、この仕様をもとに各ブラウザが機能を 提供している。

2017 年にリリースされた WenGL 2.0 が最新の API となっており、2023 年 6 月現在モバイルを含む主要な各ブラウザでサポートされている。(https://caniuse.com/webgl2)

WebGL のメリット

ウェブ上で 2D/3D を描画する方法にはそれまで Flush Player や Unity Web Player といった技術が存在した。

これらの既存技術はブラウザへのプラグインという形で提供されるため、ユーザーのブラウザにプラグインがインストールされていないと動作しないという欠点がある。 セキュリティの観点からプラグインの導入が敬遠されていることもあり、せっかくかっこいいウェブサイトを作っても動作環境が整わない可能性があった。

これに対し、WebGL は JavaScript の API であり、仕様策定のワーキンググループに主要なブラウザベンダーが参加していることもあり、多くのブラウザに標準でサポートされている

「GPU が OpenGL をサポートしていないといけない」という制限はあるものの、WebGL の登場により JavaScript さえ動けばほとんどのブラウザ環境で 2D/3D が好きなように描画できる状況が生まれた。

WebGL のその先

現在 WebGL を置き換える次世代のインターフェイスとして WebGPU が提案されている。 (2023 年 6 月現在デスクトップ版の Chrome のみが正式にサポートしている。)

そもそも OpenGL は GPU を利用することで描画演算を高速に処理することを実現しているが、近年のハードウェア性能の向上や機械学習の盛り上がりを背景に、この GPU を取り巻く環境が大きく変化し、1990 年代前半に登場したOpenGL では満足いかないケースが増えてきた

より具体的には、OpenGL は抽象度が高い API のため、GPU 利用を細かくチューニングすることが難しい。加えて、機械学習を中心に、GPU をグラフィックスだけでなく、一般的な計算リソースとして利用したいというニーズが高まりつつある(GPGPU: General Purpose GPU と呼ばれる)。

そこで GPU をより効率的に利用したい各社がより低レベルの API を発表する流れが生まれた。GPU チップメーカーの NVIDIA から CUDA(CUDA はコンピューティングプラットフォーム全体の名称であり、API はその一部)が、Apple からは Metal、そしてクロノスグループからも Vulcan という仕様がそれぞれ発表されている。

これらの動きを背景に、WebGL も次世代 API へと置き換える流れが生まれ、WebGPU という仕様が登場。標準化の動きが進んでいる。


WebGL とは何なのか、WebGL が生まれた背景、そしてこれからの動きについて追ってきた。

このほかのトピックに Three.js といった WebGL をよりラクに利用するためのライブラリや、シェーダーを記述するための言語である GLSL などがあり、次回以降この辺りにも踏み込んでいけたらと思っている。

それではまた。

References