Google I/O の準備段階で、ウェブでの拡張現実（AR）の魅力的な可能性を強調したいと考えました。Chacmool は、ウェブベースの AR がユーザーが AR エクスペリエンスを利用できるようにするうえでどれほど簡単に役立つかを示すために作成された、教育的なウェブ エクスペリエンスのデモです。ウェブでは、AR をどこでも便利に利用できます。
このデモは、Android O 以降を搭載した ARCore 対応の Android デバイスの Chrome Canary で利用できるようになりました。また、ARCore をインストールする必要があります。この機能は新しい WebXR プロポーザル（WebXR Hit Test API）に依存しているため、フラグが設定されており、Immersive Web コミュニティ グループの他のメンバーと新しい API プロポーザルをテストして改良する間、Canary に留まる予定です。実際、デモにアクセスするには、chrome://flags: の #webxr と #webxr-hit-test の 2 つのフラグを有効にする必要があります。これらを両方とも有効にして Canary を再起動したら、Chacmool デモを確認できます。
Chacmool AR エクスペリエンスは教育を重視しており、AR の没入感とインタラクティブな性質を活用して、ユーザーが古代 Chacmool 彫刻について学習できるようにします。ユーザーは実寸大の彫像を現実に配置し、移動してさまざまな角度や距離から彫刻を見ることができます。AR の没入感により、ユーザーは現実世界のようにコンテンツを自由に探索、発見、操作できます。平面的な 2D 画面で見るのではなく、AR でオブジェクトを表示すると、非常に直感的なインタラクション モデル（オブジェクトの周りを歩き回ったり、物理的に近づいたり離れたりする）を使用して、さまざまな角度や距離からオブジェクトを表示できるため、表示されているものを深く理解できます。また、このエクスペリエンスでは、彫刻に直接アノテーションが配置されています。これにより、ユーザーはテキストで説明されている内容と、それらの特徴が彫刻のどこにあるかを直接関連付けることができます。
このデモは、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 でぜひご意見をお聞かせください。