なぜ WebGL がいいの?

この記事は 「Why you should use WebGL」の著者 Florian 氏に転載許可をいただき、CC-by-sa license のもと公開します。まだ翻訳途中です ( still translating… )

---

There is (among graphics enthusiasts) a lot of debate what API/version of something to use with a bunch of hotly contested alternatives. I would like to convince you to give WebGL a try, and this blog post explains why. It will also quickly summarize a few things people usually ask about WebGL. There are many gotchas (like with anything) as well, and I am aware of a lot more of them than you can imagin

WebGL って何?

WebGL は Web 用の OpenGL ES 2.0 です。JavaScript でプログラミングします。(Java ではないですよ)

OpenGL なしで動くの?

はい。WebGL は OpenGL なしで動きます。Angle という互換ライブラリーが、下記の技術をつかって WebGL を実行してくれるのです。

• Desktop OpenGL (Linux と OSX)
• Mobile OpenGL ES 2.0 (android と blackberry)
• Direct3D 9 (Windows)

お気に入りのブラウザーで動くの?

WebGL をサポートしているブラウザー以下です。

• Desktop Chrome
• Desktop Firefox
• Desktop Safari (on OSX, 要設定)
• Desktop Opera
• Mobile Firefox for Android
• Mobile Chrome Beta for Android (要設定)
• Mobile Opera for Android
• Firefox OS builtin browser
• Blackberry builtin browser

WebGL をサポートしていないブラウザーは以下です。

• Internet Explorer
• Desktop Safari on Windows
• Mobile Safari (iOS, iPhone, iPad etc.)
• Opera for iOS
• Builtin Android browser

私の環境で動くの?

動くか否かは、グラフィックス ドライバーのバージョン、OS のバージョン、その他の因子で決まります。このことは、ホワイトリスト/ブラックリスト から知ることができます。

いやが応でも WebGL が動作しない環境もあります。

• Windows on ARM (surface など)
• Windows Phones
• Windows 8 Modern UI
• iOS (iPhone, iPad etc.)

これは、Microsoft と Apple が WebGL の実装をしていないことに加え、これらの環境でデフォルトのブラウザー以外を排除しているためです。

App ストアーからデフォルトのブラウザー以外をダウンロードできるので、こう書くと混乱する人もいるかもしれません。しかし、App ストアーから入手できるブラウザーは見た目こそ違うものの内部的には Internet Explorer あるいは、モバイル Safari のエンジンをそのまま使わなければならないという制約があります。他のブラウザーベンダーは自身のエンジンを持ち込むことができないために WebGL をサポートできないのです。

どれくらいの人たちが WebGL を体験できないの?

簡単には言い切れませんが、答えの一つとしてここでは WebGL statistics platform の情報を紹介します。2013 年 2 月 2 日現在の情報です。

データは、過去 60 日間の 530 以上のサイトの閲覧者 1300 万人の情報です。

過去 30 日間に、モバイルにおけるサポートが 4% から 6% になったことに注目してください。これはとても大きな変化です (50 % 増しですよ)! そのほとんどは Android 版 Chrome beta における、WebGL のサポート (要設定) のおかげです。

もっとも簡単な 3D API

もしあなたが 3D のアプリケーションの作るなら、コードを書き始める際、セットアップ方法とひな形の書き方をすべて知っておく必要があるでしょう。凄腕ゲームプログラマーのジョン・カーマック氏のように。しかし、幸運にも、WebGL はそんなに必要なことはありません。

Canvas を取得します

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

コンテキストを取得します

var gl = canvas.getContext('experimental-webgl');

これで終わりです。複雑な makefile や GLX/GLU などのインクルードは必要ありません。わずらわしいことはブラウザーがすべてやってくれます。これで API を利用する準備ができているのです。

そして、チュートリアル付きの Learning WebGL のような参考ドキュメントもたくさんありますし、shader の例としては GLSL Sandbox がとても参考になります。

最高にテストされた 3D の API

ハードウェア アクセラレーテッドなプログラミングを行う際にはたくさんの問題がつきまといます。そのうちの一つは、無数に存在するグラフィックスドライバーと、それらの非互換性です。

適合性テスト スイート

これらすべての問題を根絶するために、WebGL は総合的 (かつ成長する) 適合性テストを有しており、これには何千もの動作しなければいけない項目があります。だれでも試験することができ、もしテストに通らず問題点を見つけたらブラウザーベンダーに伝えてもかまいません。私が知っている限りでは、このようなテストを有している 3D API は WebGL だけです。このことは、WebGL のみを向上させるだけではありません。WebGL が Nvidia や AMD、Apple などのグラフィックスドライバーを利用するため、結果として OpenGL、OpenGL ES そして、Direct3D をも向上することにつながります。

Performance regression tests

Sometimes it is possible that a driver update, or a change in the WebGL implementation results in worse performance. To detect these problems, there is also a performance regression test suite. Again, as far as I know WebGL is the only 3D API in posession of such a test suite.

参考ドキュメントが一番多い 3D API

他の 3D API やフレームワークと異なり、WebGL はとてもオープンな標準技術です。

• Specification, tests and extensions on github
• performance regressions on github
• quick reference card from Khronos
• Khronos topic page
• Khronos WebGL wiki
• Specification
• Public Mailing list
• extension registry

加えて、非オフィシャルなドキュメントもあります。

• Learning WebGL
• r/webgl
• freenode.net 上の IRC チャンネル #webgl

拡張可能

WebGL は OpenGL から 拡張メカニズム も引き継いでいるため、

Web の 3D の技術としては唯一、新しいバージョンのリリースを待たずに機能を追加することができます。そして、それは、旧バージョンの API にも、上位バージョンの機能を追加できることになります。

現段階では、次の実装があります。

• Single and half floating point textures
• Standard derivatives functions in shaders
• Vertex Array Objects (VAOs)
• S3TC Compressed textures
• Depth Textures
• Anisotropic texture filtering

その他の拡張も提案されており、Multi-Render Targets や instanced drawing が草案を経て最終的には実装されることが期待されています。

WebGL を使わなくても気にかけないとダメ?

WebGL の存在はブラウザー、JavaScript、グラフィックスドライバーをよくすることにつながります。

• 開発者は JavaScript に速度を求めました。なので、ブラウザーベンダーは JavaScript の処理性能を向上しました。
• WebGL を実装した結果、ブラウザーのガベージ コレクションはすこし向上しました。
• Web の技術であるため、グラフィック ハードウェア ベンダーや OEM に対してたくさんの人がより良いグラフィックスドライバーを作るようにプッシュしてきました。

クリックできるリンクがユーザーを増やす

Web 以外の技術は、アプリケーションを使えるようにするために、いくつもの手順を繰り返すことになります。例えば、よくあるデスクトップ環境なら次のような手順となるでしょう。

• ダウンロードのためのリンクを発見する
• ダウンロードして保存する
• ダウンロードしたフォルダーを開く
• インストーラーをクリックする
• 何度も「はい」をクリックして「パス」を入力して、また何度も「はい」をクリックします
• そのあと待って…
• インストーラーを閉じて
• インストールしたアプリケーションを見つけて
• アプリケーションを起動して
• オートアップデートが完了するのを待って
• やっとアプリケーションを楽しめます

App ストアーにあるアプリケーションならもう少し少ない手順で楽しめるでしょう。でも WebGL のアプリケーションではどうでしょうか?

• 起動するためのリンクを見つける
• リンクをクリックする
• これでアプリケーションを楽しめます

お金になるの?

おそらくは。この記事執筆時点ではWebGL job boardに 50 ほどの職が掲載されています。それに、過去 2 年で私は WebGL でそれなりの収入を得ています。これは「Web はお金になるのか」という質問と同じことで、もちろんなりますよね。それと、もともと Java アプレットで作られた Minecraft が 2012 年に 9000 万ドルを稼ぎだしたことも思い出しました ( 私たちは JavaScirpt を使いますが、Java アプレットのほうが遥かに限られた環境ですよね )。

比較してみる

もちろん、他の技術との比較をしてみないとダメですよね。それでは見てみましょう。

Unity 3D

Unity 3D は API というよりはエンジンといったほうがいいかもしれません。そして、多くの人は Unity3D Web プレイヤーをインストールしていませんし、どのみちモバイル環境では動作しません。Web のことをあまり気にしないのであれば Unity 3D でもいいのでしょうが、私の場合は Web が好きなのであまり使うことはありません。

一応、Unity 3D を Web (とモバイル環境) で扱うこともできます。

• Google Chrome の NaCL (Native Client) では、Unity 3D をコンパイルして利用できます(明らかな欠陥ですが)。ただし、フレームワークやライブラリーなど様々な Web の技術とは組み合わせることはまだできません。HTML/CSS/JS と組み合わせられること意味があるのであり、そうすることでその他の様々な技術と組み合わせることができるのです。
• Unity 3D はモバイル向けにコンパイルし、Appストアーから配布することもできます。しかし、それは「クリックしてすぐ再生」ができるWebページとは全くの別物です。

Flash Stage 3D

Flash では (Direct3D や OpenGL の様式とは異なる) 非標準の API を利用します。そして、その API に関するドキュメントは乏しいようです (私が探した限りでは)。さらに残念なことに、Shader の記述形式は実質、アセンブラー言語です。一方で WebGL の Shader は、C 言語に近く、扱いやすい言語でプログラミングすることができます。Flash はもちろんモバイル環境では動きません(よく知られた話ではありますが)。Web 開発者としての観点としては、Flash が他の Web 技術と組み合わせることができないのも残念です。そして、さらに、Flash にはコンパイル済みの Shader が必要です。オンライン上では Shader をコンパイルすることができないのです。

Flash 自体はモバイルでは動かないのですが、一方でネイティブアプリとしてコンパイルして App ストアーから配布することはできます。ただ、それは Unity 3D と同様に、「クリックしてすぐ再生」ができる Web ページとは別物です (それが Flash のよさだったのですが)。

Silverlight 3D

Microsoft は Silverlight にそれほど注力していません。Silverlight 3D はさらに注力されていません。不便さ (モバイルで動作しない、プラグインが必要、ドキュメントが乏しい) もあり、加えてシェーダーをプリコンパイルする必要もあります。もちろん、Silverlight として何かを作る場合には開発環境として Visual Studio と .Net が必要になります。

そして、最大のハードルは、Silverlight の 3D 有効化のダイアログを多くのユーザーが無視してしまうことです。これでは事実上使い物にならないため、Silverlight 3D の採用は選択肢からは外れることでしょう。

Direct3D

Web 上では動作しません。モバイル環境でも動作しません。Apple 製品でも動作しません。標準化された API ではないのです。

OpenGL

深刻なグラフィックス ドライバーの問題があります。Web 上では動作しません。モバイル環境でも動作しません。

OpenGL ES

デスクトップ環境では動作しません。たくさんのモバイル環境で動作します。ただし、Web では動作しません。

未来

WebGL/HTML5 やその他はまだまだ完璧とは言えません。複雑な技術ゆえにまだたくさんの課題を抱えています。しかし、私は WebGL が最高の 3D 技術だと強く信じています。Web 標準であることは、一つのコードにより様々なプラットフォームで動作することを意味します。私はこれまで WebGL でたくさん楽しんできました。そして、同様に皆さんにも WebGL で楽しんでいただければ幸いです。

謝辞

I know I can be a grumpy and offensive guy at times, but this is to say a little thanks to all the unsung heroes who make WebGL possible and better. Kenneth Russel, Gregg Tavares, Brandon Jones, Jeff Gilbert, Benoit Jacob, Paul Irish, and everybody else, you do a fabulous job!