Google I/O の準備を行うにあたり、ウェブの拡張現実（AR）の画期的な可能性を紹介したいと考えました。Chacmool は、ウェブベースの AR が AR 体験を簡単に利用できることを示すために開発された教育用ウェブ エクスペリエンス デモです。ウェブのおかげで、AR がどこからでも便利で利用できるようになります。
現在、このデモは Android O 以降を搭載した ARCore 互換 Android デバイス上の Chrome Canary で有効になっています。また、ARCore をインストールする必要もあります。この取り組みは新しい WebXR 提案（WebXR Hit Test API）に基づいているため、現在も開発中であり、Immersive Web Community Group の他のメンバーとともに新しい API 提案をテストして改良する間、Canary で進める予定です。実際には、デモにアクセスするには、chrome://flags:
#webxr と #webxr-hit-test で 2 つのフラグを有効にする必要があります。これらの両方を有効にして Canary を再起動したら、Chacmool デモを確認できます。
Chacmool の AR エクスペリエンスは教育を中心としており、AR の没入的でインタラクティブな性質を利用して、ユーザーが古代の Chacmool 彫刻について知ることができます。ユーザーは実物大の像を現実に配置し、さまざまな角度や距離から動かして彫刻を見ることができます。AR の臨場感あふれる性質により、ユーザーは現実の世界と同じようにコンテンツを自由に探索、発見、プレイできます。AR でオブジェクトを見ると、平らな 2D 画面で見るのではなく、私たちが見ているものを深く理解できます。これは、非常に直感的なインタラクション モデルを使用して、さまざまな角度と距離から物体を見ることができるためです。つまり、オブジェクトの周りを歩いたり、物理的に近づいたり、遠くに離れたりします。また、このエクスペリエンスでは、アノテーションが彫刻に直接配置されています。これにより、ユーザーはテキストで記述されている内容と、それらの対象物が彫刻上のどこにあるかを直接接続できます。
このデモは、WebXR チーム初のウェブベース AR デモである WebAR-Article のコンポーネントの一部を利用して、約 1 か月かけて構築されました。彫刻に関する情報は Google の Arts & Culture ページから、3D モデルは Google Arts & Culture のパートナーである CyArk から提供されています。3D モデルをウェブで使用できるようにするために、Meshlab と Mesh Mixer を組み合わせて使用し、モデルを修復し、メッシュをデサイメントしてファイルサイズを小さくしました。その後、3D ジオメトリ メッシュとポイント クラウドを圧縮および解凍するためのライブラリである Draco を使用して、モデルのファイルサイズを 44.3 MB からわずか 225 KB に削減しました。最後に、ウェブワーカーを使用してバックグラウンド スレッドでモデルを読み込みます。これにより、モデルの読み込みと圧縮解除中もページがインタラクティブになります。これは通常、ジャンクを発生させ、ページのスクロールを防ぐオペレーションです。
デスクトップで開発してスマートフォンにデプロイするため、Chrome のリモート デバッグ ツールを使用してエクスペリエンスを検査することで、コード変更のイテレーション サイクルが短縮されます。また、Chrome には、デバッグとパフォーマンス チェックのための優れたデベロッパー ツールが用意されているため、十分に対応できません。
AR/VR 体験のためのベスト プラクティス
ネイティブ AR エクスペリエンスの設計に関する設計とエンジニアリングのガイドラインのほとんどは、ウェブベースの AR エクスペリエンスの作成に適用されます。一般的なベスト プラクティスについて詳しくは、最近リリースされた AR 設計ガイドラインをご覧ください。
特に、ウェブベースの AR エクスペリエンスを設計する場合は、AR を使用する際に画面全体を使用する（たとえば、動画プレーヤーがモバイルで全画面表示する場合と同様に全画面表示にする）ことをおすすめします。これにより、ユーザーがビューをスクロールしたり、ウェブページ上の他の要素に気を取られたりすることを防ぎます。AR への移行はスムーズかつシームレスに行い、AR オンボーディング（レチクルの描画など）に入る前にカメラビューを表示する必要があります。ウェブベースの AR について注意すべき重要な点は、ネイティブとは異なり、デベロッパーはカメラフレーム、照明推定、アンカー、プレーンに（まだ）アクセスできないため、デザイナーとデベロッパーがウェブベースの AR エクスペリエンスを設計する際は、これらの制限を念頭に置くことが重要です。
また、ウェブ エクスペリエンスに使用されるデバイスは多種多様であるため、最適なユーザー エクスペリエンスを生み出すようにパフォーマンスを最適化することも重要です。そのため、ポリゴン数を少なくし、照明をできるだけ少なくして、可能であればシャドウを事前計算して、描画呼び出しを最小限に抑えます。AR でテキストを表示する場合は、最新の（符号付き距離フィールド ベース）テキスト レンダリング技術を使用して、テキストがはっきりとしており、あらゆる距離と角度から判読できるようにしてください。アノテーションを配置する際は、ユーザーの視線を別の入力として考慮し、関連性がある場合にのみアノテーションを表示します（ユーザーが関心のある領域にフォーカスしているときに表示される近接ベースのアノテーションなど）。
最後に、このコンテンツはウェブベースであるため、ウェブ向けの一般的なおすすめのデザイン方法も適用することが重要です。サイトがさまざまなデバイス（パソコン、タブレット、モバイル、ヘッドセットなど）で優れたエクスペリエンスを提供するようにしてください。プログレッシブ エンハンスメントをサポートするということは、AR 非対応デバイス向けのデザインも意味します（AR 以外のデバイスで 3D モデルビューアを表示する）。
独自のウェブベースの AR エクスペリエンスの開発に関心をお持ちの場合は、こちらに、ウェブで AR の構築を開始する方法についての関連記事をご覧ください。（Chacmool のデモでもソースをご覧いただけます）。WebXR Device API は現在開発中です。あらゆる種類のアプリケーションとユースケースに対応できるよう、フィードバックをお待ちしています。GitHub にアクセスして、会話にご参加ください。