ブラウザで3DモデルをAR表示する機能を検証
動作環境は限られるが設定が簡単
検証は以下2つ
デモ
上から順に、Scene Viewer（iOS非対応）、Scene Viewer（iOS対応）、AR Quick Look
Androidで利用可能なビューア
Android以外は、ARは利用できないがモデルのビューアは利用できる
iOSの場合はAR Quick Lookを利用することができる
- Android 7.0以降（端末によっては8.0以降）
- ARCore 1.9以降（Playストアでアップデート） など詳細はこちら
そん他のブラウザ
Chrome, Firefox, Safari, Edgeの最新から2つ前のバージョンまで
IE11も可能（ただしポリフィルの設定が必要）
Browser Support
対応フォーマットはglTF 2.0/glb
推奨モデルサイズ
- 頂点数: 30,000
- マテリアル: 10
- テクスチャ: 2048x2048
など詳細はこちらを参照
scriptを読み込み、Web Componentsにモデルのリンクを設定
<body>
<model-viewer ar src="model.gltf"></model-viewer>
<script type="module" src="https://unpkg.com/@google/model-viewer@v0.5.0/dist/model-viewer.js"></script>
</body>iOSで利用可能なビューア
iOS以外のブラウザでは動作せず、モデルのファイルがダウンロードされる
そのため不要な場合、ブラウザ判定で非表示にするなどの対応が必要
サーバで3DモデルファイルのMIME type を設定する必要があるため（.htaccessなど）、設定できない場合は利用できないかもしれない（未検証）
リファレンスはこちらの動画、もしくはページ内のPresentation Slides (PDF)を参照
iOS 12以降
対応フォーマットはusdzのみ
推奨モデルサイズ
- ポリゴン: 100,000
- テクスチャ: 2048x2048PBR
- アニメーション: 10秒
- マテリアルとテクスチャは1セットがいい
など詳細はリファレンスのPDF参照
usdzはXcode10に組み込まれているコマンドラインツールで変換
変換可能なフォーマットはOBJ Alembic USD
モデルのリンクを設定
<a rel="ar" href="model.usdz">
<img src="model-preview.jpg">
</a>サーバで設定するMIME type
AddType model/vnd.pixar.usd .usdz
AddType model/usd usdz