>   >  ブラウザ上でリッチな3D表現を実現! WebGL最新動向
ブラウザ上でリッチな3D表現を実現! WebGL最新動向

ブラウザ上でリッチな3D表現を実現! WebGL最新動向

HTML5時代に突入してから、3DCGを使ったWebコンテンツも一般的になってきた。プラグインを必要とせずブラウザのみで3D描画するための技術が「WebGL」で、最近ではより高度でリッチな3D表現が可能になってきている。ここではWebGLでどんなことができるのか、最新のサービスについて紹介していく。

※本記事は月刊「CGWORLD + digital video」vol. 233(2018年1月号)からの転載となります

TEXT_長谷川雄介 / Yusuke Hasegawa
EDIT_藤井紀明 / Noriaki Fujii(CGWORLD)、山田桃子 / Momoko Yamada
2017 ©StudioGUFFAW All Rights Reserved.

本格的なWebGL時代が到来!
この潮流を見逃すな

リッチな3DCGをふんだんに活用したコンシューマゲームが国内外から多数リリースされる昨今、モバイルゲームでも3D表現は当たり前になりつつある。Oculus RiftHTC Viveなど次々に発表されるVR機器や、最新のiOS・Android機に標準搭載されたAR機能など、3DCGの舞台はもはや既存のあり方を超えて広がりつつある。

2010年台前半からは、3DはいよいよWebの世界にも進出している。Webブラウザ上で表示できる3DCG、それを可能にした技術が「WebGL」だ。3DCGを扱う人なら何らかのかたちで日々利用している3D規格OpenGL、それをWebブラウザ上で動作するようにした標準規格である。100社以上の企業からなる標準化団体Khronos Group(クロノスグループ、以下KG)がOpenGLおよびこのWebGLの規格策定を行なっている。Adobeがかつて普及を図り、業界の支持を集めていたFlashがスマートフォン普及を機に急速に失速している今、WebGLの進化はこれからのWeb表現の可能性そのものと言っても過言ではないだろう。今や、世のWebブラウザの実に90%以上がWebGL 1.0をサポートし、3Dを駆使した様々な映像表現や動的コンテンツをWebの世界で実現できるようになった。

このWebGL 1.0は、正確にはOpenGLの組み込み機器用のサブセット規格OpenGL ES 2.0をベースにしたものだ。それ以前の古い3D規格では、GPUがあらかじめ保有している限られた固定的な機能の範囲でしか描画表現ができなかった。しかしこの世代の3D規格から、シェーダと呼ばれるGPUで実行されるプログラムをプログラマーが記述し、これら3DAPIに与えることで、より多彩な3D表現を行うことが可能になっているのだ。

次項からは、近年国内外で続々と登場する、WebGLを駆使した注目のサービスを例に挙げて紹介していきたい。

Topic 1 WebGLの成り立ちと技術的な仕様

WebGLの普及に大きく貢献した汎用フォーマット「glTF」

KGはOpenGL ES 3.0ベースの強化版となるWebGL 2.0をリリースした。主要なブラウザが2017年になってから対応を始めているが、このWebGL 2.0はおおよそPlayStation 3程度の性能があると言われている。ひと昔前の最新ゲームに匹敵する映像表現が、Webブラウザ上で実現しようとしているのだ。

しかし、3Dコンテンツの表示には、ほかにWebと親和性の高い3Dファイルフォーマットも必要である。既存の汎用形式のCOLLADAやFBXは仕様の冗長さが多く、Webには不向きだった。そこでKGは「glTF」(GL Transmission Format)というフォーマットを策定した。glTFは特定の企業やツールに依存せず、仕様がGitHubで公開されているため誰でも利用できる。サポートする機能もPBR(物理ベースレンダリング)、スキニングアニメーション、モーフターゲット(Mayaでいうブレンドシェイプ)など、多彩である。

こうした技術はWeb3Dに不可欠なものだが、これらを直接プログラムするのには、非常に高度な技術が求められる。ベクトル・行列......Webエンジニアには、馴染みのない素養が多く問われてしまうのだ。しかしWeb3Dの潜在需要は強く、WebGLを抽象化し、より扱いやすくしたライブラリが多く登場するようになった。PBRや物理シミュレーションといった高度な表現も、これらを使って比較的簡単に実現できる。ただ、これら既存のライブラリの多くはCG技術の世界の考え方をまだ色濃く残しており、Webエンジニアの中でもこれらをもってしても、WebGLの習得を未だ難しく感じる人たちも多い。その状況を変えようという試みも起きている。

Web開発者とCG開発者の溝を埋め、両者に使いやすい方法を提供するのは、国産オープンソースのGrimoire.jsライブラリだ。HTMLのような「タグ」ベースで3Dシーンを構築していけるのが特徴で、PBRやglTFもサポートしている開発者は、経産省傘下の情報処理推進機構が未踏事業として支援した、なんと4人の日本人大学生だ。もはやWebGLは一部の人だけが使う特殊な技術ではない。実用的に使えるところにまでに進化しているのだ。

OpenGL/WebGLの系譜


WebGLの原型となったOpenGLは、かつてのCG界の雄・SGIによる自社製3D APIのIRIS GLを、移植性を高めてどの企業でも利用できるようオープン化したものだ。バージョン更新と共に機能を増やしていったが、CG表現の多様化に固定的な機能の追加では間に合わなくなり、OpenGL 2.0からはシェーダ言語によるソフトウェアでの柔軟性の獲得によって対応することになった。モバイル市場が隆盛すると、軽量なサブセット規格であるOpenGL ESが策定された。WebGLはそのOpenGL ESがベースになっている

WebGLのレンダリングパイプライン


GPUの処理は複数の工程に分かれており、その中をデータがパイプラインのように進み、形を変えていく。WebGLもそのGPUの処理工程を考慮した仕様になっている。頂点シェーダとフラグメントシェーダ(ピクセルシェーダとも呼ぶ)の処理工程では、プログラマーが書いたあらゆる処理を自在に実行させることができる。今日、Webにおいて多彩な3D表現が可能になったのは、WebGLのこのシェーダ機能によるところが大きい。WebGL 2.0では、この処理パイプラインが一部改良され、より多彩な処理が可能になった

CGとWebのエンジニアの架け橋となるフレームワーク「Grimoire.js」



  • Grimoire.jsの公式サイト。このフレームワークの思想と共にいくつかの簡単なサンプルが紹介されている



  • glTFのサンプルを表示したもの。モデルの表示は、画像の挿入などの今までのWeb開発に非常に近いかたちで提供されている



  • レイマーチングのような高度な表現も、簡単にGrimoire.jsを使ってWeb上で公開できる



  • デバッグツール。Chrome拡張として通常のWeb開発者ツールのようなかたちで提供されている

次ページ:
Topic 2 「Sketchfab」と「PlayCanvas」

特集