WebとCGの未来

現代人は1日にたくさんのWebページを閲覧します。気になるワードがあれば検索ワードを検索サイトに打ち込むだけで殆どの場合関連する情報にたどり着けます。様々な情報が文字、画像、動画、音楽といった手段を通じてWebサイト上で公開されています。今では当たり前となった多種のメディアを配信できるWebページでも、初めて画像が表示できるようになったのは1993年、今から24 年前にMozaicブラウザが出現してからのことです。

1993年に公開されたMozaicブラウザ。世界初の画像が表示できるブラウザとなった。

かつては情報にアクセスしやすくするためであったWebサイトは次第に機能を持つように進化しています。TwitterやFacebookにアクセスするのは、専用のアプリを入れなくてもWebブラウザだけ でできます。

モバイルアプリの中では、中身でWebブラウザを活用している例が多く見られます。中身はWebブラウザが埋め込まれているだけで、単にWebサイトを表示しているだけというアプリも散見されます。これはWebブラウザを用いても十分な表現が実現でき、必要な機能がすべて提供できるのと、今までのWebデザインの知見がそのまま使えるからです。特にモバイルでは多くのディスプレイのサイズで最適なユーザーインタフェースを提供しなければならないのですが、これもまたWebの得意なことの一つです。

Webの新しいCG表現

このように私たちが意識的にWebブラウザを見ていなくても、私たちがITを使うとき様々な形でWebブラウザを活用しています。それほどまでに強力なWebというアプリケーションのプラットフォームはさらに新たな表現の力を得るようになりました。

5年ほど前、WebGLという新たな表現のための機能がいくつかのブラウザで実装され始めました。
WebGLを使うと、Webの既存の表現手法では実現が難しかった高度なCG表現がWebブラウザだけでできます。今まではCGを使うといえば、何かアプリケーションをダウンロードしてインストールしなければいけなかったのに、ページを訪れるだけで見ることができるようになったのです。

CGで一番親しみの深いアプリケーションはゲームでしょう。例えばそんなゲームも、ページのアドレスを開くだけでプレイできるようになります。それはつまり、LINEやTwitterなどのSNSでリンクをシェアできることでもあります。WebGLはモバイルでも動くので、インストールまでのハードルが高いゲームを、ソーシャル性という武器で拡散させることができるのです。

Unityで作ったゲームがアップロードできるUnityRoom。誰もが簡単にゲームを作ってアップロードできる。
このようなゲームもWebページに行くだけでプレイできるようになる。

しかし、これだけでは一昔前のFlashと一緒じゃないかと思われるかもしれません。しかし、WebGLはWebの様々なところで徐々にWebらしい使われ方が始まってきています。
例えば、Matterportというサービスでは、Web上で不動産をGoogleストリートビューのように歩き回ることができ、ユーザーは見たい位置から自分の興味のある不動産を見ることができます。

Matterport

3DモデルをWeb上で共有できるサービスも3Dデザイナー間で人気です。今までイラストレーターがネット上に自分の描いた絵を上げてポートフォリオページを作るようなことが、3Dデザイナーも可能になります。

また、完成した3Dモデルデータをお客さんに見せる時も、お客さんのところに高価なMayaや3dsMaxなどのモデリングソフトは要りません。ブラウザさえ動く環境があればURL一つでモデルを共有することができるようになるのです。

Sketchfab.com
ユーザーが作成した3DCGモデルをアップロードすることができる。

このようにWebアプリケーションの中でCGが取り扱えるので、ユーザーに伝わる新たな種類の情報がいろんなところで登場しています。またそれらはURLという誰もが共通でアクセスできる文字列を共有すれば、アクセスできます。今まで一つのアプリケーション内で閉じてきたこのようなデータもWebで情報として繋がることによって新たな価値が生まれていくでしょう。

そのほかにも、単純な3DCGではないWebGLの使われ方も各所で見られるようになりました。例えばPixiv SketchなどではWebブラウザ上で、今までのイラストを描くためのソフトと遜色ないほどの書き心地で絵を描くことができます。WebGLの技術で、画像同士を合成したりすることがより高速になり、今までのアプリケーションで実現していたレイヤーの機能や筆っぽさのシミュレーションなどができるようになっているのです。

この技術を表現以外に使う例も存在します。WebGLを経由することでデバイスのGPUを活用し、高速な機械学習の計算をさせる例も出てきました。これを用いると、あらかじめ機械学習などのモデルを作ってしまえば、ユーザー側のデバイス上で実際に動かすことができ、高度なサーバーを提供することなく機械学習を用いたWebサービスを作ることができます。

make.girls.moe
WebGLとAIを用いてGPUの備わっているPC上で高速に女の子の画像を生成するサイト

最近では機械学習技術の発達により、データさえあればできることが非常に増えてきています。そのため、Webの広がりやすさを用いてデータセットを集めようという動きも活発です。例えばGoogleは人間の落書きから何であるかを学習させるためのデータセットを用意するために、quickdraw.withgoogleというサイトを公開しました。今、様々な企業がどのようにしてデータセットを集めるかに必死になって取り組んでいます。
その中でWeb上で新たな表現手法であるWebGLが登場したことにより、実現できることと同時に集められるデータの種類も増えています。

quickdraw.withgoogle.com

少し前にHTML5が出た直後、Web界隈ではこれからはモバイルアプリの時代ではない、すべてWebの時代だと湧き上がりました。しかし、現実はそこまで甘いものではなく、実際には多くのユーザーが使っている時間のほとんどはブラウザではない何らかのアプリを開いている時間であるという統計があります。しかし、一方でアプリはFacebookやLINEなどのベースとなるSNSを中心に時間が消費されているのみで、新規に始めるユニークユーザーを獲得するのが難しいのが現状です。そんな時こそ、SNSでURLが拡散されやすいWebは強いのです。また、特定のユーザーのデータセットのみでなく、たくさんの種類の人間からデータセットを集められるという意味では、新しい技術の潮流である機械学習とWeb技術の親和性は非常に高いのかもしれません。

WebGLで着目するべき点はこれだけに収まりません。今流行のVRやARも関係があります。FirefoxやMicrosoft EdgeがサポートしたWebVRという技術を使えばブラウザでWebサイトを開くだけでVR体験をすることができます。モバイルで開いた時には手軽なスマホVR、デスクトップPCなどでVRデバイスがつながっている場合はOculus Riftなどのより高度なVRデバイスが使うことができます。

この一番良いところは、VR空間などで作成されたものが独自URLを発行することで他の人もシェアできるという点です。つまり、ソーシャル性のあるVRも作りやすくなります。また、何よりVRデバイスを持っていなくても、単なる表示が可能なので、VRデバイスを持っている人だけに限定されないコンテンツを提供することができます。

一方で2017年はARが大躍進を遂げた年でした。AppleがARKit、GoogleがARCoreを出して、スマートフォンをかざすだけでその場の空間の情報がより詳しく取れるようになりました。今では平面のある部分ではほぼ確実な位置に3DCGを表示することが可能になっています。近いうちにほぼ実用に耐える精度で現実の位置に3DCGのコンテンツを配置することができるようになるでしょう。

実際、このようなAR技術がWebに来ようとしています。GoogleはARCoreの機能をブラウザに移植したサンプルを公開しています。ブラウザでカメラを特定の場所に持って行くだけで新たな映像表現が見えるようにもなります。

ARCoreをモバイルのブラウザ上で動かす技術デモ

この技術だけでは、実現できるものは少なく見えるかもしれませんが、ブラウザ上で動くということは、コンテンツを安全に実行できるということです。普段どんなに怪しいWebサイトを訪れても、PC上のファイルが消されたりすることがないように、将来ARグラスをかぶって街中を歩いているときに、勝手に不都合なプログラムが実行されてはいけません。すなわち、このようなWebブラウザの技術にARを当てはめて行くことにより、世界中のあらゆるところにコンテンツが置けるような世界ができるかもしれません。もしかしたら人々がARグラスをかけて世界を見る頃には、そのARグラスで動いているのはChromeやFirefoxかもしれないのです。

このような今までより多様化したWebの進化に対して、Webエンジニアは何を求められてゆくのでしょうか。Webエンジニアは、様々な新たな技術を最初にエンドユーザーに届けることができる者になっていきます。そのため、純粋にWebの技術だけではなく、様々な新しい別分野の技術を知っていることが大きな差別化に繋がる時代がやってきます。今までエンドユーザーに提供されたことのないものを、どのように届ければ親和性があるか、実用性があるかをも考え、あらたなUXを定義する様な存在になって行くと思います。

しかしそのために多くの知識をWebとは別に持たなければならないのはコストが高いですが、これらを簡単に扱える様にするライブラリやツールがすぐ出てくるのもWeb開発の特徴です。最初はさまざまなWebに活かせそうな技術を手軽に扱えるライブラリなどを使ってみて、どのようなUXに落とし込める可能性があるかということを考えていくのが大事であると思えます。

例えば、私は2016年度の未踏の際、Web技術の上でWebGLをはじめとしたCG技術を活用するにはどうしたら良いかを考えました。その際作成したのがオープンソースのWebGLフレームワーク、Grimoire.jsです。現状、WebエンジニアがWebGLを活用するには多くのCG周りの知識が必要であることが問題です。今までのほとんどのWebGLライブラリはあくまでWeb上でもCGのエンジニアが創作できるように、今までCG開発をしてきた人に効率が良いように作られていただけでした。

Grimoire.jsを使うと、WebエンジニアはHTMLのようなマークアップでWebGLのキャンバスを描画できます。一方で、難解な3DCG周りのコードは今までのCG周りのエンジニアが親しんだコードで記述することができます。

Grimoire.jsでのモデル表示の例
簡単なモデルビューワーなら10行とかからず表現できる

また、Chromeの拡張機能としてGrimoire.jsインスペクターが使えるので既存のWeb開発に則った形でWebGLを用いた開発が可能です。

Grimoire.jsインスペクター
Chromeに拡張としてインストールでき、WebGLの中身を操作して確かめることができるので効率的にWebGL周りの開発ができる

Grimore.jsが示したのは、将来のWebGLでは、WebエンジニアとCGエンジニアというお互いに共通言語のないエンジニアリングコミュニティを結びつける必要があり、実際それが可能だということです。

実際にはこれはWebの中でもWebGLに限定されている動きではなく、WebGL以外にも様々な新しい技術でWebとの融合は始まっています。これらが浸透することによって、今までエンドユーザーに届くまで長い時間がかかった様々な新しい技術を、より早くユーザーに届けることができ、様々な技術の発展を加速することができる。これこそがWebの素晴らしいところであり、今後の強みになるところなのではないでしょうか。

石井 翔
AltLayer株式会社　代表取締役
東京工業大学　情報理工学院修士在学中

2016年度未踏事業に「Web開発のフローに親和するWeb3Dライブラリの開発」で採択され、WebGLフレームワークGrimoire,jsを開発し、スーパークリエータに選ばれる。
8歳の頃からプログラミングを趣味で始め、リアルタイムCG技術に強い興味を抱く。その後、Webでどのようなデバイスでも動くWebGLの魅力に魅了され、WebにおけるCGは今までのCG技術とは違う様々な新しい課題があることに気がつき、ライブラリの開発に没頭する。