WebGL 2.0 で 3D レンダリングを高速化

この記事は Zhenyao Mo、ソフトウェア エンジニアによる Chromium Blog の記事 "Faster 3D rendering with WebGL 2.0" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

WebGL JavaScript API は、ハードウェア アクセラレーションによる 3D グラフィックをウェブの世界にもたらします。Chrome 56 では WebGL 2.0がサポートされます。API は大幅にアップグレードされ、さまざまなグラフィックの新機能や、高度なレンダリング技術が追加されています。現在、WebGL 2.0 は最新のグラフィック ハードウェアを搭載した Windows、macOS、Linux の Chrome ユーザーが利用できます。近日中に Android にも対応する予定です。



WebGL 1.0 は 6 年前に初めて Chrome で導入され、ウェブ 開発者はプラグインを使わずに没入感のあるグラフィックを作成できるようになりました。たとえば、リアルタイムでワールドカップのプレイをリミックスしたり、ニュース記事でロック クライミングのルートを視覚化したりできるようになりました。WebGL 2.0 では、リアルタイム レンダリングの高速化、新たなタイプのテクスチャとシェーダー、ビデオメモリの消費量の削減などが導入されており、3D ウェブ アプリケーションをさらに簡単に構築できるようになっています。遅延シェーディング、トーン マッピング、ボリューム効果、パーティクル効果などのテクニックも効率的に実装されています。 新しい API は、WebGL にモバイルゲームでよく使われているグラフィック プラットフォームである OpenGL ES 3.0に匹敵する機能をもたらしています。

新しいレンダリング機能に加えて、WebGL 2.0 ではテストスイートへの準拠が大幅に向上しています。テストケースは 34 万件以上あり、さまざまなウェブブラウザが確実に互換性のあるグラフィック プラットフォームを提供できます。Chrome は複数の GPU ベンダーのすべてのデスクトップ プラットフォームで、これらのテストケースに 100% 合格しています。そのため、WebGL 2.0 実装には安定性と一貫性があることが保証されています。

WebGL 2.0 を使ってみるには、WebGL 2.0 サンプルパックをご覧ください。これには、小さな自己完結型の最新 API 機能サンプルも含まれています。実際に動作する WebGL 2.0 は、After the Flood¹でもご覧いただけます。これは、PlayCanvas と Mozilla が共同で作成したインタラクティブ デモです。OpenGL ES 3.1 のサポートや、Vulkan、Metal、DirectX 12といった新しい明示的グラフィック インターフェースをサポートした低レベルウェブ グラフィック API など、今後のグラフィック機能に関するニュースについては、本サイトのお知らせにご期待ください。

[1] お使いのマシンでこのデモを含む WebGL 2.0 コンテンツが実行できない場合、グラフィック ハードウェアまたはドライバのアップデートが必要かもしれません。


Posted by Eiji Kitamura - Developer Relations Team