ARThree.jsUSDZGLBモバイルtech

Sausage Erectos X ブラウザだけでAR ── WebXRを使わずにARプレビューを実装した方法

Sausage Erectos 2026年4月3日

AR プレビューのブラウザ実装──画面の中から現実世界へ

Sausage Erectosのカスタマイザーでは、デザインしたフィギュアをAR（拡張現実）で実寸大プレビューできる。この機能の技術的実装、テスト結果、そして未来のWebXR対応計画を記録する。

実装アプローチ：ネイティブAR vs Web AR

AR実装には大きく2つのアプローチがある：

ネイティブAR:  ARKit(iOS) / ARCore(Android)
               → 高性能だがアプリインストールが必要
Web AR:        WebXR API / model-viewer / Quick Look
               → ブラウザで完結するがデバイス制約がある

Sausage Erectosでは、ユーザーにアプリをインストールさせたくないという理由でWeb ARを選択した。具体的には、iOSではAR Quick Look（USDZ形式）、Androidではmodel-viewer（Scene Viewer経由）を使用する。

model-viewerライブラリとの比較

Googleが開発したmodel-viewerは、3DモデルのWeb表示とAR機能を提供するWebコンポーネントだ。

<model-viewer
  src="model.glb"
  ios-src="model.usdz"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  auto-rotate>
</model-viewer>

当初model-viewerを採用したが、以下の理由でカスタム実装に切り替えた：

  1. カスタマイザーの3Dレンダリングと二重管理になる
  2. リアルタイムのパラメータ変更をmodel-viewerに反映するオーバーヘッド
  3. ARのトリガータイミングを細かく制御したい

結果として、Three.jsのシーンから直接glTF/USDZをエクスポートし、各プラットフォームのネイティブAR機能を呼び出す方式にした。

USDZのメタデータ設定

iOSのAR Quick LookはUSDZ形式のみを受け付ける。Three.jsのUSDZExporterでエクスポートする際、いくつかのメタデータ設定が品質に影響する。

import { USDZExporter } from 'three/addons/exporters/USDZExporter.js';

async function exportUSDZ(scene) {
  const exporter = new USDZExporter();
  const arraybuffer = await exporter.parse(scene);
  const blob = new Blob([arraybuffer], { type: 'model/vnd.usdz+zip' });
  return blob;
}

重要な設定：

  • scale: フィギュアの実寸大表示のため、メートル単位で正確に指定。80mmのフィギュアなら0.08
  • autoplay: アニメーション付きモデルの場合、AR表示時に自動再生するかどうか
  • マテリアル: PBRマテリアルのみサポート。Three.jsのMeshStandardMaterialは直接変換可能

Androidでの互換性テスト結果

テストしたデバイスと結果：

デバイス              OS Ver    Scene Viewer    WebXR
------------------------------------------------------
Pixel 7               14        OK              OK
Galaxy S23             14        OK              OK
Galaxy A54             13        OK              一部不安定
Pixel 4a               13        OK              非対応
OPPO Reno 7            12        OK              非対応
古めのXperia           11        表示遅延        非対応

Scene Viewerは比較的広いデバイスで動作するが、WebXR Device APIは最新デバイスでないと安定しない。現時点では、Scene Viewerをプライマリ、WebXRをフォールバックとしている。

パフォーマンス計測

AR表示のパフォーマンスを以下の指標で計測した：

指標                      iOS (iPhone 14)    Android (Pixel 7)
----------------------------------------------------------------
USDZエクスポート時間       800ms              N/A
glTFエクスポート時間       200ms              200ms
AR起動までの時間           2.1秒              1.8秒
メモリ使用量増加           +45MB              +60MB
フレームレート（AR中）     60fps              45-60fps

USDZのエクスポートがボトルネックだ。複雑なモデルではエクスポートに2秒以上かかることがある。ユーザーにはローディングインジケーターを表示して待たせる。

ユーザーテストからのフィードバック

10名のテスターにAR機能を試してもらった結果：

  • 92%が「サイズ感がわかって良い」 と回答
  • 65%が「操作が直感的」 と回答
  • 35%が「ARの起動方法がわかりにくい」 と指摘
  • 20%が「ARモードから戻る方法がわかりにくい」 と指摘

このフィードバックを受けて、ARボタンにツールチップを追加し、「戻る」ボタンを大きくする改修を行った。

今後のWebXR対応計画

現在の実装は各プラットフォームのネイティブAR機能に依存しているが、将来的にはWebXR Device APIへの完全移行を計画している。

WebXRの利点：

  • ブラウザ内で完結（外部アプリに遷移しない）
  • AR空間内でのインタラクション（タップ、ドラッグ）が可能
  • 複数フィギュアの同時配置
  • 光源推定によるリアルな影の描画

課題はブラウザサポートだ。2026年時点でも、iOSのSafariはWebXRを完全サポートしていない。Appleが対応するまでは、iOS向けにはAR Quick Lookを維持する必要がある。

ARは「画面の向こう」と「こちら」の境界を溶かす技術だ。フィギュアがテーブルの上に立つ瞬間、デジタルの存在が物理的なリアリティを獲得する。その変換の瞬間こそが、この機能の本当の価値だ。

← ブログ一覧に戻る