昨年の Google I/O において、Google Maps Platform のチームは、Maps JavaScript API の新しい WebGL による機能のプレビュー版を発表しました。クラウドベースのマップのスタイル設定で利用可能なカスタマイズとスタイル設定オプションの一部として、この一連の機能はこれまでにないベクター ベースマップの制御を実現しています。機能の例として、以下のものが挙げられます。なお、機能の詳細についてはデモをご覧ください。

  • 傾きと回転 : ユーザーはマップを 3 次元で動かすことができます
  • カメラの移動 : 視点の遠近を制御したり、スムーズなカメラ アニメーションを作成できます
  • WebGL Overlay View : マップの WebGL レンダリング コンテキストのライフサイクルを活用して、2D と 3D オブジェクトを深度とオクルージョンを考慮してマップ上に直接レンダリングできるようにします

WebGL を利用したマップ機能は、最新のすべてのブラウザでサポートされているネイティブ WebGL API によって実現します。これは、デバイス内の GPU のレンダリング性能を利用可能にするもので、これまで Maps JavaScript API では不可能だったパフォーマンスの高い素晴らしいマップ体験を実現できます。

WebGL を利用したマップ機能をプレビューの段階でお試しいただいたすべてのデベロッパーの皆様に感謝致します。皆様からのフィードバック、バグレポート、テストは、これらの機能のプレビューから今日の一般提供に至る過程において大きな影響を与えました。

最新情報

WebGL Overlay View を一般提供するにあたり、Google は API を進化させ、内部レンダラに改善を加えました。これには、WebGL 2.0 レンダリング コンテキストを使用するためのベクターマップのアップグレード、コアライブラリの一部としての追加の拡張機能の提供、リアルタイム レンダリングの高速化、新しいグラフィック機能、ビデオメモリ消費の低減などが含まれます。

ユースケース

昨年、これらの機能のプレビュー版をリリースして以来、お客様は以下のようなユースケースを実現されています。

deck.gl と WebGL Overlay View を使用した大規模な地理空間データセットの 2D と 3D ビジュアリゼーションの作成 :


BigQuery から取得した大規模な地理空間データセットの統合を容易にする CARTO Builder などのエンタープライズ グレードのデータ 可視化 ソフトウェア ツールでのマップ作成 :



デジタル分析の実行におけるデジタルツインの利用方法や、実空間での各種シミュレーションの試行 : 

動作例

これは、WebGL を利用したマップ機能によって実現される充実したユースケースのほんの一部です。これらを含むデモにご興味がある場合は、デモ ギャラリーをご確認ください。  

使ってみる

一般提供に向けた変更点の一覧、および WebGL を利用したマップ機能を deck.gl や threejs.org などのオープンソース ライブラリで使用する方法の詳細については、ドキュメントと WebGL の Codelab をご参照ください。

この機会に、先進的な 3D マッピングの世界をぜひお楽しみください。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。




この記事は Google マップ、Google Maps Platform エンジニアリング リード Travis McPhail による Google Cloud Blog の記事 "Richer data visualization on Google Maps Platform using deck.gl" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

Google Cloud Next では、最新のオープンソース データ可視化ライブラリ deck.gl（バージョン 8.6）をご紹介しました。このリリースでは、ロケーション インテリジェンス プラットフォーム CARTO、vis.gl Technical Steering Committee（TSC）、Google Maps Platform と Google Cloud のチームとの密接な連携により、Maps JavaScript API の WebGL Overlay View 機能と deck.gl の緊密な統合を実現しました。この統合により、2D と 3D といった形式でデータを美しく可視化し、さまざまな知見を得ることができる deck.gl の機能を活用して、新たなレベルのデータ マッピング エクスペリエンスを作り出せます。

deck.gl と WebGL Overlay View の統合により実現したさまざまな可視化の例。

この新しい可視化機能は、地理空間情報を使用する、あらゆるユースケースでご活用いただけます。CARTO チームは、deck.gl と Maps JavaScript API の統合による優れた機能を示すために、テキサス州で電気トラックの可能性を示す各種データソースを可視化したサンプルアプリを作成しました。このサンプルアプリでは、WebGL を利用したマップ機能ツールと deck.gl によって、CARTO がテキサス州の面積と人口の規模を、完全にインタラクティブな地図として可視化した様子がわかります。

deck.gl を使用して、テキサス州のトラックを電化できる可能性を可視化した CARTO のストーリー マップ

deck.gl と Maps JavaScript API が連携する

deck.gl は、これまで Maps JavaScript API のラスター ベースマップをサポートしてきました。今回の新しいリリースでは、インターリーブ モードでのベクター ベースマップもサポートされるようになります。deck.gl によって Google のベクター地図とデータレイヤを組み合わせることができるようになるため、ラベルや 3D などのコンテンツを損ねることなく深度とオクルージョン（手前にある物体が背後にある物体を隠す状態）を確保した完璧なレンダリングを行う、ピクセル パーフェクトな可視化を実現できます。

具体的な仕組みとしては、同じ WebGL レンダリング コンテキストをベクター ベースマップと deck.gl が共有することで、地図上にレンダリングされる描画のパフォーマンスと柔軟性が向上します。つまり、deck.gl によって地図上にレンダリングされて可視化されるのではなく、地図の一部としてレンダリングされるようになりました。この WebGL コンテキストの共有は容易ではないため、Google Maps Platform チームと CARTO チームが協力して両社のライブラリを進化させ、サポートを提供しています。

例を見てみましょう。

以下のコードでは、オープンソース ライブラリの loaders.gl を使用して CSV ファイルからデータを読み込み、deck.gl の可視化レイヤである Hexagon Layer と Google Maps Platform 用のオーバーレイを作成して、最終的に地図に追加しています。

deck.gl の Hexagon Layer で可視化するための簡単なコード。
上記のコードによる Hexagon Layer の可視化が適用された英国の地図。


高度な可視化機能

deck.gl には、可視化表現の作成と既存の可視化の利用に使用できる柔軟性の高いフレームワークが用意されています。参考として、deck.gl ウェブサイトにある例と CARTO のデモギャラリーをご覧ください。

デモギャラリーをご覧ください。

柔軟性の高い deck.gl により、CARTO のテキサス州のデモのように優れた可視化を実現できます。主な可視化表現の種類をいくつかご紹介します。

Hexagon Layer

Hexagon Layer は、集計データを可視化する際に便利です。人口などのプロパティを使用して、六角形の色や高さを定義できます。次の例では、テキサス州の人口がいくつかの大都市に集中していることがわかります。

テキサス州の人口密度を Hexagon Layer で可視化した例。

ベクタータイルを使用した大規模データセットのマッピング

送電線の可視化のように、大規模なデータセットを可視化する場合は、データをタイルにして徐々に読み込む必要があります。deck.gl では、MVTLayer、TileLayer、Tile3DLayer など、さまざまな既製レイヤが用意されています。

Tile3DLayer を使用したテキサス州の送電線の可視化。

この地図では、約 70 MB に上る送電線の公開データセットを可視化しています。この可視化では、deck.gl の CartoLayer を使用して、データを 512 KB 未満の小さなベクタータイルにして読み込みます。

アニメーションと充実した地図作成機能

地図作成機能に加え、アニメーション機能によって、さらに充実した可視化機能とシームレスなユーザー エクスペリエンスが実現しました。以下の例は、テキサス州の再生可能エネルギー源を示しています。

アニメーションとトランジション効果のサポートにより、データ可視化エクスペリエンスがさらに充実。
アニメーションとトランジション効果のサポートにより、データ可視化エクスペリエンスがさらに充実。


ルートのアニメーション化と 3D 対応

ルートのアニメーション化は、deck.gl の可視化の中でも特によく使用されています。インターリーブのサポートにより、建物など Google Maps Platform の機能をすべて損ねることなくルートを描画できます。

TripsLayer により、データを時系列に可視化。

TripsLayer により、データを時系列に可視化。


こちらからコードをご確認いただけます。

お試しください

まず、deck.gl と Google Maps Platform のデモをご覧のうえ、deck.gl のウェブサイトで、レイヤのカスタマイズ方法や独自レイヤの作成方法の詳細をご確認ください。また、テキサス州のデモのソースコードも自由にご利用いただけます。

deck.gl と Google Maps Platform を活用して、優れた視覚化を実現していただければ幸いです。CARTO の詳細情報、無料アカウントの作成方法、BigQuery のデータをオーバーレイする方法については、CARTO のウェブサイトをご覧ください。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。




Posted by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer


Google I/O 2021 での WebGL を利用したマップ機能のベータ版リリースの発表に備え、Google Maps Platform チームは、2012 年からの Google Cloud パートナーである Ubilabs と協力して、3D レンダリングを地図に導入すると実現できることをデベロッパーに紹介するためのデモを作成しました。最初のデモ「Google Maps Platform WebGL-powered Maps Features（Google Maps Platform WebGL を利用したマップ機能）」は、各 WebGL 機能とそれらを効果的に使用する方法をデベロッパー向けに詳しく紹介しています。

デベロッパー向けのデモでは、WebGL を利用したマップ機能の活用方法を Google Maps Platform デベロッパーに紹介しています。

2 番目のデモ「Travel with Next Generation Maps（次世代マップを活用した旅行）」では、架空の旅行アプリを例にして、Google Maps Platform の新しい 3D 機能でマッピング エクスペリエンスがどのように変容するかを全体像として見ることができます。

Ubilabs と開発した旅行デモでは、WebGL を利用したマッピング エクスペリエンスの効果をビジネス ユーザーに紹介しました。

WebGL を利用した新しいマップ機能の紹介

このプロジェクトに携わった Ubilabs のソフトウェア エンジニアである Martin Schuhfuss 氏は、2019 年の Google I/O で Google Maps Platform エンジニアリング リードの Travis McPhail と話したことを覚えています。その内容は、Google Maps Platform チームが一部の API で検討している変更と、ベクトル地図や 3D コンテンツをサポートするための取り組みについてでした。そして 2021 å¹´。Schuhfuss 氏は Google I/O 2021 向けに Google Maps Platform の新しい WebGL 機能を紹介するデモの作成に向けて、Google Maps Platform チームとの打ち合わせに参加することになりました。信頼できる Google Cloud パートナーとして、Ubilabs はそれら機能の初期ユーザーに任命されていました。初期段階にある機能の常として、開発プロセスが進行する中、デバッグや初期ドキュメントの作成が必要になる可能性がありました。

Ubilabs の共同創業者かつ開発責任者であり、Google Maps Platform の Google Developer Expert である Martin Kleppe 氏も、プロジェクト マネージャーやデザイナー、その他 3 名のデベロッパーとともにプロジェクトに取り組みました。

Schuhfuss 氏は次のように語っています。「私たちはインターネットでの地図のユースケース、特に 3D のシーンで興味深いものを探しました。小規模なテスト版を作成し、自分たちに何ができるかを試していました。しかし、当時はドキュメントすら存在しませんでした。」

Ubilabs はデモのうち 1 つをデベロッパー向けとし、新しい機能について順を追って説明するとともに、コードサンプルを盛り込んで使用方法を紹介することにしました。2 番目のデモである旅行アプリは、航空便での移動、タクシー乗車、ホテルの検索、旅先での食事という場面に当てはめて新しい機能を紹介しています。Schuhfuss 氏は、WebGL ベータ版機能の初期ユーザーとして学んだすべてを効果的に要約した、ユーザー向けのデモ案内文を作成しました。そのテキストの大半は、機能を初めて試す他のユーザー向けにドキュメントにまとめられました。

Schuhfuss 氏は次のように語っています。「各機能について、できるようになったこと、そしてそれがどのように表示されるのかを示すのに最適な Google Maps Platform の使い方は何か。チーム内で自問を繰り返しました。そして、ある都市を訪れる旅の過程を、初めから終わりまで表現する旅行デモを作成することにしました。」

デベロッパーは真上から見下ろした、北が上になった 2D の地図表示に慣れています。そのため、Schuhfuss 氏は、どんな場面でも 3 次元機能を利用してカメラを動かし、地図に情報を追加できる仕組みの紹介に力を入れました。たとえば、以下のスクリーンショットでは、地図にシンプルな傾斜と回転を追加するだけで、エクスペリエンス全体がいかに変化するかがわかります。

この例では、デベロッパーに新しい傾斜と回転の機能が示されています。

Kleppe 氏は次のように説明します。「WebGL 機能の基盤をなすテクノロジーは、GPU による高速レンダリング サービスを使用します。ユーザーはマシンのグラフィック カードを使って建物を 3D レンダリングし、3D オブジェクトを空間に配置できます。以前は追加のレイヤとして地図上にデータを表示できるだけでしたが、現在では新たなレベルの制御が可能になりました。これにより、街の景色を見るような没入型エクスペリエンスを実現できます。」

まず、チームは小規模なデモを作成し、次にそれらをクリックして詳細を見られる大規模なデモに組み込みました。意図したとおりに機能しないものがあると、Ubilabs はトラブルシューティングを試み、Google Maps Platform エンジニア チームと協力して問題を修正しました。あるケースでは、Schuhfuss 氏が 3 つの異なるオブジェクトをあるシーンに追加すると、3 番目のオブジェクトは常に数秒後に消え、2 番目のオブジェクトはさらに数秒後に消えました。Ubilabs は、この問題に関するフィードバックを Google Maps Platform エンジニア チームと共有しました。同チームは次のリリースで問題を解決し、このサービスをユーザー向けに改善できました。

Schuhfuss 氏は次のように述べています。「私はデバッグに時間をかけ、起きている現象を把握しようとしました。建物の背後に隠れるようにレンダリングするものをオクルージョン（手前にある物体が背後にある物体を隠す状態）できるようにするには、WebGL コンテキストを共有する必要があります。WebGL はグラフィック カードと通信でき、小さな状態の変化の影響を受けやすいインターフェースです。」

Schuhfuss 氏は、緯度と経度による座標の把握と算出とは別に、かなりシンプルな Three.js 機能が残りの開発に必要であることがわかりました。同チームは Google Maps Platform チームと定期的に連絡を取り、進捗状況を確認し合いし、技術的な問題や更新に対処しました。

Google I/O のインタラクティブなデモ

Ubilabs は各デモの締めくくりに、デベロッパーが WebGL 機能で作成できるものとして、目を引く機能を紹介しました。

「旅行デモの最後のページは一番のお気に入りです」と Schuhfuss 氏は言います。氏は Google I/O の数日前にそのページを完全に再構築しました。「私が気に入っているのは、カメラを回転させたときのテキストラベルの動作と、建物が隠れるとテキストの下に小さなステムが表示されることです。」

ロンドンの観光スポットのテキストラベルが各場所の上に表示され、地図を回転させると、小さなステムが各建物をはっきりと指し示すように表示されます。

デベロッパー向けのデモの最後のページでは、ユーザーに「地図を再定義する」ことを推奨しており、埋め込みの動画や花火が表示されます。

Schuhfuss 氏は次のように語ります。「次に気に入っているのは花火です。動画を埋め込むことができ、どこかに表示したくて港にビデオウォールを構築しました。開発の途中では、リック・アストリーの曲も再生されていたようです。」

WebGL 機能を使用すると、動画を地図に埋め込んだり、花火などの機能を地図に追加したりできます。

「通りが表示された基本地図と、ビジネス情報を描画するレイヤ、ルートを計算するための追加 API など、さまざまなデータソースを組み合わせることができます。さらに、その上に独自の情報を配置できます。API のデータセットだけではありません。自分のデータを世界の抽象的なビューにいつでも自由に統合できます。」

さらに、Schuhfuss 氏は、slack ワークスペースの Three.js コミュニティも運営しており、オンラインで驚きの声が多数寄せられたことに加えて、「ユーザーによるこうした機能のユースケースを見るのを本当に楽しみにしています。」とも述べています。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やご意見はページ右上の「お問い合わせ」より承っております。



Posted by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer 


Google I/O 2021 において、Google は傾きと回転、および WebGL Overlay View のベータ版リリースを発表しました。これにより、まったく新しい方法でマッピング エクスペリエンスの構築が可能になります。Overlay View は Maps JavaScript API に以前から存在する機能で、マップの上に透明なレイヤをレンダリングできます。開発者は何年にもわたり、マップの上に 2 次元の描画をするため Overlay View を使用してきましたが、Overlay View ではマップの上に実質的に浮かんでいる透明なレイヤにしかレンダリングできない状態でした。


WebGL Overlay View では、ベクターの基本地図のレンダリングに使用されるのと同じ WebGL レンダリングのライフサイクルにに直接働きかけて、利用できます。これにより、初めて 2 次元と 3 次元のオブジェクトを直接マップ上に高速にレンダリングできるようになったため、従来の Maps JavaScript API では不可能であったユーザー体験が構築可能になりました。


この記事では、Maps JavaScript API の新しい WebGL による機能の簡単な概要をご紹介します。これにより、次世代のマッピング エクスペリエンスを作成するために十分な知識が得られます。


WebGL とは


WebGL は低レベルのブラウザ API で、元は Mozilla Foundation により作られたものです。この API を使用すれば、スマートフォンやコンピュータなどのクライアント デバイスの GPU のレンダリング能力や処理能力を、ウェブアプリから利用できます。ブラウザ単独では、3D 空間のオブジェクトのレンダリングといった重い処理を実行することはできませんが、WebGL を使用すれば、そのような処理に特化して設計されたクライアント側の GPU で実行できます。


WebGL について詳しくは、WebGL の設計と保守をしている Khronos Group のドキュメントをご覧ください。


要件

WebGL Overlay View を使用するには、ベクターマップが有効な Map ID が必要です。また、マップ ID を作成するときは、傾きと回転を有効にすることを強くおすすめします。これを有効にしないと、マップはデフォルトの真上からのビューに限定されます。言い換えると、マップを 3 次元的に動かすことはできません。

マップ ID とベクターマップの詳しい使い方は、関連ドキュメントをご覧ください。


傾きと回転の設定

設定された傾きと回転でマップを読み込むには、マップを作成するときに「tilt」と「heading」プロパティの値を指定します。

const mapOptions = {

  mapId: "15431d2b469f209e",

  tilt: 0,

  heading: 0,

  zoom: 17,

  center: {

    lat: -33.86957547870852, 

    lng: 151.20832318199652

  }

}

const mapDiv = document.getElementById("map");

const map = new google.maps.Map(mapDiv, mapOptions);

tilt は度単位の整数または浮動小数点数で、値は 0 から 67.5 までです。0 度はデフォルトの真下に向いたビューを、67.5 は最大の傾斜角度を意味します。設定可能な tilt の最大値はズームレベルによっても異なります。

回転は heading プロパティで、0 から 360 度までの整数または浮動小数点数として設定します。0 と 360 は北の方向を意味します。

また、傾きと回転は実行時のいつでも、プログラムからマップ オブジェクトに対して「setTilt」と「setHeading」を直接呼び出して変更できます。この機能は、ユーザーの操作などのイベントに対応してマップの向きを変える場合に役立ちます。

map.setTilt(45);

map.setHeading(180);


さらに、ユーザーは Shift キーを押したまま、マウスでドラッグするか矢印キーを使用して、マップの傾きと回転を手動でコントロールできます。

傾きと回転の詳しい説明は、ドキュメントをご覧ください。


WebGL Overlay View をマップへ追加する

「google.maps.WebglOverlayView」のインスタンスを作成すると、WebGL Overlay View を Maps JavaScript API で使用できます。オーバーレイのインスタンスを作成したら、インスタンスの「setMap」を呼び出して、マップに適用します。

const webglOverlayView = new google.maps.WebglOverlayView;

webglOverlayView.setMap(map);


マップの WebGL レンダリング コンテキストにアクセスし、そこでレンダリングするオブジェクトを扱えるようにするため、WebGL Overlay View ではベクター基本地図の WebGL レンダリング コンテキストのライフサイクルにおいて 5 つの機能を提供します。

概要について簡単にご説明します。
  • 「onAdd」では、たとえばフェッチや最終的にオーバーレイに渡すための中間データ構造の作成など、前処理をします。これらの処理をすべてここで行うのは、マップのレンダリング速度が低下しないことを保証するためです。
  • 「onRemove」では、すべての中間オブジェクトを破棄します。できればより早い段階で破棄します。
  • 「onContextRestored」はマップがレンダリングされる前に呼び出され、WebGL の状態、たとえばシェーダー、GL バッファ オブジェクトなどの初期化、バインド、再初期化をします。
  • 「onDraw」では、マップの実際のレンダリングと、その関連する操作に指定された動作をします。シーンをレンダリングするための描画呼び出しは、できるだけ最小限にしてください。ここで多くの動作をすると、基本地図のレンダリングと、WebGL で行うすべての動作の速度が低下します。
  • 「onContextLost」では、既存の GL ステートに関連付けられているすべてのステートをクリーンアップします。この時点では WebGL コンテキストは破棄されているため、これらのステートは無意味になっています。
これらの操作を実装するには、ひとつの関数にこれらを設定し、WebGL のレンダリング コンテキストのライフサイクルにおいて、適切な時点で Maps JavaScript API により実行されるようにします。例 :

webglOverlayView.onDraw = (gl,

coordinateTransformer) => { //レンダリングを実行 }


WebGL Overlay View と、そのライフサイクル操作の使い方について詳しくは、ドキュメントをご覧ください。

カメラ アニメーションの作成

WebGL Overlay View のベータ版リリースには「moveCamera」を紹介しています。これは新しくい統合されたカメラ コントロール手法で、カメラの位置、傾き斜、回転、ズームを同時に設定できます。「setTilt」や「setHeading」と同様に、「moveCamera」は「Map」オブジェクトに対して直接呼び出されます。

アニメーションのループで「moveCamera」を連続的に呼び出すと、カメラの位置の間で滑らかなアニメーションを作成できます。たとえば、この例ではブラウザの「requestAnimationFrame」API を使用して、各フレームの傾き斜と回転を変化できます。

const cameraOptions = {

  tilt: 0,

  heading: 0

}

function animateCamera () {

  cameraOptions.tilt += 1;

  cameraOptions.heading += 1;

  map.moveCamera(cameraOptions);

}

requestAnimationFrame(animateCamera);


ズームや浮動小数点数のサポートも含め、これらの調整によって従来では不可能であったようなカメラのコントロールが可能になるだけでなく、高い精度でカメラ位置をコントロールできるようになります。

「moveCamera」について詳しくは、ドキュメントをご覧ください。

試してみる

WebGL による Maps JavaScript API の新しい機能は、Beta チャンネルから API を読み込んで、今すぐ試すことができます。すぐに開発を始められるよう、新しい Codelab、すべての詳細が記されたドキュメント、サンプルコード、より詳細なサンプルアプリを用意しています。また、機能ツアーやトラベルのデモで詳細をご確認いただけます。さらに、これらの機能の実装をお試しいただけます。


フィードバックやご質問は、Issue Tracker にお寄せください。頂いたバグレポート、新機能のリクエスト、フィードバックなどは、新しい WebGL ベースのマップ機能のテストと改善に役立てさせていただきます。

3D でのマップ構築の可能性を探求し、優れたマップの作成にお役立てください。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。


WebGL 2.0 トランスフォーム フィードバック デモ（ライブリンク、Github レポジトリ）

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 Flood1 でもご覧いただけます。これは、PlayCanvas と Mozilla が共同で作成したインタラクティブ デモです。OpenGL ES 3.1 のサポートや、Vulkan、Metal、DirectX 12 といった新しい明示的グラフィック インターフェースをサポートした低レベルウェブ グラフィック API など、今後のグラフィック機能に関するニュースについては、本サイトのお知らせにご期待ください。

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


Posted by Eiji Kitamura - Developer Relations Team