WebGL 2.0 時代の幕開け

ウェブのグラフィックスはどう変わっていくのか

自己紹介

杉本 雅広(すぎもと まさひろ)

ウェブでは主に doxas で活動。WebGL おじさんです。

@h_doxas

本日のテーマ

WebGL 2.0 がやってくるぞ!

本日のテーマ

WebGL 2.0 がやってくるぞ!

な、なんだってー!

(まだ WebGL 1.0 だってよくわかってないのに……)

本日のテーマ

WebGL 2.0 がやってくるぞ!

な、なんだってー!

(まだ WebGL 1.0 だってよくわかってないのに……)

誰かの心の声を代弁しました

本日のテーマ

今回はあまり技術的な話ではなく、過去と現在、そしてこれからさきの WebGL を取り巻く環境の変化などを踏まえながら、ウェブというプラットフォーム上で WebGL が果たす役割について考えてみたいと思います。

もし技術的な話が聞きたかったという方がいらっしゃったらすいません。その分は、なんとなく wgld.org というサイトとかで解説されていくと思いますので、気長にお待ち下さい。

がんばって更新します!

WebGL 1.0

WebGL 1.0 が登場したのは 2011 年。

WebGL 1.0

WebGL 1.0 が登場したのは 2011 年。

WebGL 1.0

WebGL 1.0 が登場したのは 2011 年。

2011 年というと、タイガーマスクを名乗る有志からの寄付が話題になったり、なでしこジャパンが世界一になったりしたらしいですが、私はその頃はまだ倉庫でダンボールにガムテープでフタをしつつ、フォークリフトでブイブイいわせる簡単なお仕事していましたので、あまり記憶が無いです。

さりとて、2012 年のはじめころから、WebGL について勉強したことをサイトにアウトプットするなどの活動を始めていたようです。なにげに、WebGL は登場してから結構時間経ってますよね。

WebGL 1.0

画像はイメージ図です

WebGL 1.0

WebGL は皆さんがご存知のとおり、OpenGL ES というモバイル向けの軽量な OpenGL 実装を元にした JavaScript の API です。やんわりと、PS2 相当くらいの機能性でしょうか。

これが、WebGL 2.0 になると、元になっている OpenGL ES の後継バージョンを元にした形になり、純粋に新しい機能等を利用できるようになります。

とは言え

元になっている OpenGL ES のバージョンがひとつ繰り上がり、高機能化した WebGL 2.0 ですが、フロントエンドエンジニア的目線で見た場合に、この進化は果たしてどれほどのメリットがあるのでしょうか。

劇的に、WebGL が使いやすくなるとか?

いえ、むしろ逆だと、私は思っています。

とは言え

元になっている OpenGL ES のバージョンがひとつ繰り上がり、高機能化した WebGL 2.0 ですが、フロントエンドエンジニア的目線で見た場合に、この進化は果たしてどれほどのメリットがあるのでしょうか。

劇的に、WebGL が使いやすくなるとか?

いえ、むしろ逆だと、私は思っています。

なんだってー!(二度目

3D プログラミング

WebGL は JavaScript で記述できますが、中身はほぼ OpenGL そのままです。

言い換えると 3D プログラミングをそのまま行うのと同じだけの知識や経験 が必要となります。

3D プログラミングのスキルと言えば、それ単体で飯のタネになるレベルの、なかなか修得が難しい分野ですよね。これをウェブや JavaScript 全般の知識と合わせて修得していくのは、普通に考えて並大抵のことでは無いと言えます。

3D プログラミング

ちょっと悲しい表現になってしまいますが、WebGL 2.0 になったことによって、フロントエンドエンジニアが得られるメリットは 直接的にはほぼ無い と考えていいと思います。

これは先に述べたとおり、WebGL がバージョンアップすることによるメリットは「3D 野郎からすれば大変うれしい」ものではあるけれども、3D の専門知識がない人にとっては難しすぎたり、高度すぎて必要なかったりする場合が多いのですね。

WebGL は専門家の道具になってしまうのか

と、こんなふうに書いてしまうと、まるで WebGL はそれを扱うことができる一部の人のための API なのだと、諦め半分、残念に思ってしまう方も多いかもしれません。

でも、そこは見方をちょっと変えてみればいいんです。

WebGL は専門家の道具になってしまうのか

要は、WebGL 2.0 だろうが、あるいはそれ以降の新しい API が出てこようが、それを理解して使いこなせる人は絶対に一定数いるはずです。

たとえば、three.js のコントリビュータたちや、日本語の解説記事が書けるレベルの優秀な若人たちは実際います。

あるいは、Unity などの WebGL 出力が行えるソリューションの中の人達だって、やっぱり新技術を理解し普及させてくれる人達という意味では同じです。

WebGL は専門家の道具になってしまうのか

引用元:Unity Will Let You Make Plugin-Free, Browser-Based Games For Free

進化し続けるウェブとウェブ開発

いきなり Unity とか持ち出しちゃいましたが、極端な話、数年後には手書きでコード書いてる人なんてほとんどいないかもしれない。

進化し続けるウェブとウェブ開発

いきなり Unity とか持ち出しちゃいましたが、極端な話、数年後には手書きでコード書いてる人なんてほとんどいないかもしれない。

大げさでしょうか? 私はそうは思いません。

進化し続けるウェブとウェブ開発

いきなり Unity とか持ち出しちゃいましたが、極端な話、数年後には手書きでコード書いてる人なんてほとんどいないかもしれない。

大げさでしょうか? 私はそうは思いません。

ウェブのインターフェースは全て GUI を持つアプリケーションで素早く構築することができ、それらを使いこなすことが我々の仕事になっているかもしれないし、それは現実に十分起こり得ることだと思います。

ゲーム業界とかもそういう傾向感じますよね

進化し続けるウェブとウェブ開発

WebGL 2.0 が出てきたことは、間違いなくウェブの表現のレベルを一段引き上げると思います。これまで非常に手間が掛かっていたテクニックのいくつかが WebGL 2.0 の登場でかなり効率的に書けるようになります。WebGL おじさんとしてはもう大興奮なわけです。

同じように世界中の WebGL おじさんたちも大興奮していると思いますので、いずれは、必ず皆さんの手に触れやすいところに、WebGL 2.0 の恩恵は降りてくると思います。

WebGL 2.0 の恩恵かどうかはなかなか判別できないかもしれないですが……

進化し続けるウェブとウェブ開発

パーティクル処理などはより高速化できるものの代表格

進化し続けるウェブとウェブ開発

ちょっと話題が散漫になってきたのでまとめると、WebGL 2.0 の登場は、今はまだ、フロントエンド全体で注視すべきトピックではありません。

ですが、こうしてウェブの世界にも順次 新しい 3D API がアップデートされ実際に導入されていく流れが実現できた ことには大きな意味があります。どんどんリッチになっていくウェブにおけるビジュアル表現は、今後も飛躍的向上を求められ続けるでしょう。

WebGL 2.0 の登場は、その巨大な流れの中の足がかりにしか過ぎないのです。

参考

Unity 出力の WebGL を利用したウェブサイトの一例です。

Everything: Tsukishiro Hikari 1st Solo Album

WebGL 2.0 小まとめ

  • ウェブのグラフィックスの進化の歴史としては大きな一歩目
  • 今すぐ大注目するようなものではない(注:WebGL おじさんを除く
  • three.js などのライブラリ側の WebGL 2.0 対応は必ず行われるはず
  • 今後 WebGL 2.0 対応を表明したライブラリ、ツール等は気にしておきたいところ
  • ツールなどを使うのが当たり前の未来だって十分にあり得る

WebGL 2.0 小まとめ

  • ウェブのグラフィックスの進化の歴史としては大きな一歩目
  • 今すぐ大注目するようなものではない(注:WebGL おじさんを除く
  • three.js などのライブラリ側の WebGL 2.0 対応は必ず行われるはず
  • 今後 WebGL 2.0 対応を表明したライブラリ、ツール等は気にしておきたいところ
  • ツールなどを使うのが当たり前の未来だって十分にあり得る

変化を恐れるエンジニアがどうなるかは、みなさんもう既にご存知ですね?

具体的な変化

さて、それではもう少し踏み込んで、WebGL おじさんは WebGL 2.0 の登場にどうして興奮するのか、その中身についてもちょっとだけ触れておきます。

たとえば、次に紹介するようなコンテンツは WebGL 2.0 の恩恵を受けやすいです。

大量の演算を必要とするアルゴリズム

  • 流体表現
  • 物理演算
  • 高品質なシャドウ

参考:Hair - Kuva Experiment

大量の演算を必要とするアルゴリズム

高い精度を要求するケース

  • マップ系のアプリケーション
  • 研究用のボリュームデータなどを扱う場合

参考:deck.gl

高い精度を要求するケース

CPU から多数のパラメータを渡す

  • オンラインの 3D モデリングツール
  • クラウドと連携した 3D 系ソリューション
  • 高品位なレンダリングエンジンなど

参考:Marmoset Viewer – Marmoset

CPU から多数のパラメータを渡す

GPU を活用したコンテンツづくり

全体的に、GPU による高速な演算を行いやすくする、あるいは精度を保ったまま GPU で処理を行う、といったことが WebGL 2.0 なら容易に行えるようになります。

これまでの WebGL では、計算結果を一度画素データにエクスポートしてから再読込して、その上でレンダリングを行なったりとかしていました。この辺は、基本機能でより汎用的にカバーできるようになります。

GPU を活用したコンテンツづくり

GPU というハードウェアも日々進化していっていますし、PC に限らず、モバイル端末もどんどん性能が向上しています。

今までは負荷の問題や仕様上の無理があり実現できなかったことも、WebGL 2.0 の登場や、ハードウェアの進化によって、どんどん実現可能なものになっていくでしょう。

GPU を活用したコンテンツづくり

これまで以上に専門知識を求められる場面が増える一方で、より使いやすい形に、少しずつ姿を変えていく側面もあると思います。

ぜひみなさんも、自分に合ったスタイルで構いませんので、心の片隅にある選択肢のひとつに、WebGL を加えておいていただけたらと思います。

まとめ

WebGL 1.0 が登場してから 6 年。やっと、WebGL 2.0 が普通に使えそうな感じになってきて、正直なところかなり時間が掛かったなという気がしています。

しかし先にも述べたとおりで、時間は掛かりはしたものの、正しく次のステップに進むことができたという事実が、個人的には非常に重要だと思っています。

まとめ

WebGL とは別の API になりますが、WebVR などの新しいウェブの世界を彩る API にも、やはり WebGL の進化はプラスになります。

ウェブの持つ役割がどんどんネイティブアプリケーションの特権を奪っていくような風潮がありますが、WebGL の進化も、そういう大きな流れのひとつなのかもしれません。

まとめ

3D プログラミングの難しさがそのまま WebGL の難しさに直結するため、API の持つ細かな部分までを把握して使いこなすのは、やはり大変です。

しかし、three.js や Unity など、WebGL に関連したソリューションを利用して WebGL と向き合っていくこともまた、ウェブ上でなにかを表現していくという意味においては、スクラッチで WebGL を扱うこととなにひとつ変わらない意義があります。

まとめ

今後、みなさんがどのようにウェブの表現と向き合っていくのかはわかりませんが、ぜひ WebGL の可能性や、自分に合った WebGL の利用の仕方を模索してみていただけましたらうれしいです。

まあ個人的には、スクラッチ WebGL おじさんがたくさん増えてくれたらそれこそ一番うれしいかもしれませんが(笑)

まとめ

ありがとうございました!