Google Developers Japan: Google Earth

Local blog for Japanese speaking developers

WebAssembly で Google Earth が動作するブラウザが増加

2019年7月19日金曜日

この記事は Thomas Nattestad による Chromium Blog の記事 "WebAssembly brings Google Earth to more browsers" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。code { background-color: transparent } 約 14 年前、子どものころの家にズームインできる Google Earth は、ユーザーに興奮の渦を巻き起こしました。ただし、それを体験するためにはアプリケーションをダウンロードし、インストールすることが必要でした。Google Earth がネイティブアプリケーションとしてリリースされたのは、全世界をリアルタイムにレンダリングするためにブラウザでは利用できない高度なテクノロジーが必要だったからです。
ウェブは進化し、私たちは Google Earth をウェブプラットフォームで利用できるようにしたいと考えました。そうすれば多くの人が、全世界を体験簡単に体験できるようになるからです。ウェブアプリは優れたユーザーエクスペリエンスを実現できます。これはリンクを張ることができるためです。つまりリンクを共有することで、クリック 1 つでアプリにアクセスできるのです。またソフトウェアをダウンロードする際に、ウイルスが紛れ込むリスクもないため安全です。さらにウェブの他の部品に埋め込み、他の機能と組み合わせて使うこともできます。
WebAssembly（Wasm）は、ウェブでネイティブコードを使えるようにする W3C のウェブ標準です。Earth チームは、Google Earth を複数のブラウザで動作させるために検討を続けてきました。そして、WebAssembly にその解を見つけました。Google Earth が初めてウェブに登場したのは 2 年ほど前です。そのときは、Chrome 限定のソリューションであるネイティブクライアント（NaCl）が使われました。ブラウザでネイティブコードを実行し、ユーザーがモダンなウェブアプリケーションに期待するパフォーマンスを実現する方法は、これしかありませんでした。しかし、すべてのブラウザが同じように新技術をサポートしているとは限らないので、ブラウザ間の互換性を実現するのは容易なことではありません。
今回、Google Earth に WebAssembly を使った経験から、WebAssembly にはさまざまなブラウザからアプリにアクセスできるようにするだけでなく、オンライン体験をスムーズにできる可能性があると感じています。Google Earth のベータ版プレビューを試せるので、Earth チームが実現したことをご確認ください。実装の詳細については、こちらをご覧ください。
WebAssembly と複数のスレッドを利用するアプリケーションを連携させる方法 WebAssembly を使ってみようと考えている方は、いくつかの仕様を理解しておくことが重要です。特に、スレッドに関することが重要になります。
ブラウザには、マルチスレッドをサポートしているものも、そうでないものもあります。Google Earth では、データが常にブラウザにストリーミングされ、圧縮されたデータが復元され、画面にレンダリングする準備が行われています。この作業をバックグラウンドスレッドで行うことができれば、ブラウザでの Google Earth のパフォーマンスは明らかに向上します。
Chromium ベースのブラウザ（Chrome、将来のバージョンの Edge、Opera など）は、すべて WebAssembly をサポートしています（マルチスレッドに対応しているものも、していないものもあります）。Chromium をベースとした新バージョンの Edge が配布されれば、Edge でも Chrome と同じように WebAssembly アプリが動作するようになるでしょう。Firefox は WebAssembly をサポートしていますが、SharedArrayBuffer の問題により、マルチスレッドのサポートは無効にせざるを得ませんでした。また、Opera は Chromium ベースですが、現在のバージョンの Opera はシングルスレッドでしか WebAssembly をサポートしていません。Safari の WebAssembly 実装は強力ですが、WebGL2 を完全にはサポートしていません。各ブラウザの WebAssembly のサポート状況の詳細については、詳しい技術解説の投稿をご覧ください。
Emscripten: Google Earth のブラウザ移植を実現したツールネイティブオペレーティングシステム向けに作られたアプリケーションをウェブに移植するのは、簡単な作業ではありません。Emscripten ツールチェーンは、デベロッパーが C++ を WebAssembly にコンパイルし、ネイティブアプリケーションが使うたくさんの OS インターフェースをエミュレートする際に役立ちます。たとえば、アプリケーションでは、OS にファイルを開くように伝える POSIX API の fopen を使っているかもしれません。Emscripten がこの呼び出しを見つけると、ローカルストレージなどのブラウザで使える適切な動作を提示してくれます。OpenGL 呼び出しを WebGL 呼び出しに変換するときも、同じことをしてくれます。他の多くの機能と同様、この機能もネイティブアプリケーションをウェブに移植する作業を大幅に簡素化するものです。
Emscripten は、他のアプリケーションをウェブに移植する際にも使われています。たとえば、35 年前に作られた AutoCAD のコードベースや、それよりも新しい Sketchup のようなアプリケーションなどです。
WebAssembly の今後今後 WebAssembly には、いくつかの機能が追加される予定です。以下の機能は、Google Earth のウェブエクスペリエンスの改善にも役立ちます。
SIMD サポート: SIMD（single instruction, multiple data）では、1 つの CPU 命令が複数のデータに影響を与えます。SIMD を適切に設定すると、データ処理のスループットが上昇します。今年中には、SIMD の一部が初めて WebAssembly でサポートされる予定です。これによって、Google Earth のパフォーマンスが大きく向上することを期待しています。
ダイナミックリンク: この機能によって、Google Earth の読み込み時間が最適化される可能性があるので、Google Earth を別のウェブページやオンライン体験に埋め込む道が開かれます。現在のところ、連携が必要なモジュールは、すべて同時にコンパイルする必要があります。ダイナミックリンクが利用できれば、アプリケーションをたくさんのモジュールに分割し、小さなクライアントを配布して他のパーツを徐々に読み込むことができます（遅延読み込みと呼ばれています）。
デバッグの強化: 現在の Wasm ではソースマップがサポートされているので、デベロッパーツールでソースコードを確認できます。これは大きな第一歩ですが、デベロッパーが変数の内容を調べたり、適切なスタックトレースを表示したりできるようにしたいと考えています。
Google Earth は、大きな一歩を踏み出してクロスブラウザ標準を採用しました。これにより、アプリケーションをさらに多くのブラウザに移植できるようになりましたが、今後もさらに改善を重ねる予定です。ぜひ自分のネイティブコードで WebAssembly を試してみてください。高速で一貫性のある体験をすべてのユーザーに提供しましょう。

投稿者: Web Assembly、V8 およびウェブ機能担当プロダクトマネージャー、Thomas Nattestad

Chiko Shimizu - Developer Relations team

ラベル