WebXRによる料理AR プレビュー：アプリ不要のブラウザ3D

ロンドンSohoのインド高級レストランDishoomは、WebXR料理ARプレビューをQRメニューに統合した後、2024年に客単価22%向上を報告しました。秘訣はアプリ不要であること。

model-viewer.dev：1つのHTMLタグで3プラットフォーム

Googleのオープンソース・ウェブコンポーネント<model-viewer>が.usdzをiOS Quick Lookへ、.glbをAndroid Scene Viewerへルーティングします。1行で両エコシステムをカバー。

客が「あなたの空間で表示」をタップし、スマホをテーブルに向けると、料理が実寸で現れます。iOS 18 Quick Lookはアニメーション、音、物理効果に対応——ビリヤニの湯気付き。

ファイルサイズ：200KBの壁

各3Dアセットは200KB以下に保つ必要があります。4Gで1MBは3–4秒かかり、ユーザーは離脱します。

• Blender Decimate：ポリゴンを5K–10Kに削減。
• gltf-pipeline：Draco圧縮 + KTX2テクスチャ。通常75%削減。
• RealityConverter：.glbから.usdzへ、iOS AR Quick Look用。

Cloudflare R2ホスティング

200品 × 200KB = 40MB。R2はエグレス料金ゼロ、ストレージ$0.015/GB-月——約$0.0006/月。thMenu Pro+はmenu-images/3d-models/下に自動ホスト。

Cache-Control: public, max-age=31536000, immutable。URLにハッシュを埋め込み、新アセットは新URLでキャッシュ無効化不要。

FAQ

3Dアーティストは必要？不要。PolycamやRealityScanが30–40枚の写真から3–5分で料理モデルを生成。

古いスマホは対応？Quick LookはiOS 12以降、Scene ViewerはAndroid 7+。カバレッジ92%超。

model-viewerは無料？Apache 2.0ライセンス。Shopify、IKEA、Pinterestが本番稼働中。

お役に立ちましたか?シェアしてください。