環境メモ
⭐️macOS Monterey
⭐️Blender3.1.0
⭐️iPhone(IOS15)
⭐️Android12
以下の記事は、2022/04/24時点の作業メモです。
下記のmodel-viewerについての記事の続きになります。
【3D Viewer】３DモデルのオムライスをWebブラウザに表示してみたよぉ
https://qiita.com/nonkapibara/items/a7b9e5c98af17a373888
↓↓完成内容
iPhone(IOS15)でAR表示してみた
↓↓
Android12でAR表示してみた
↓↓
まず床認識
オブジェクトを配置（3Dオムライスを表示）
↓↓こちらから実際に触る事ができます。
https://nonomelet.netlify.app
↓↓スマホでも動きます。
ARは、iOS 12以降のAR Kitが動く端末、AndroidはAR Coreが動く端末で動作できます。
試した事
1.Blenderで3Dモデルのサイズを小さめにしました。
2.Blenderで3Dモデルを全トランスフォームで適用する（位置、回転、スケールの初期化）
3.Blenderからgltfにエクスポートする
4.gltfをReality Converterアプリでusdzに変換する
なお、ARにするとテクスチャが少し暗めになるので、明るめに色をつけました。
以下、簡単なメモ書きですが調べたことを記載してます。
model-viewerプロパティ
Android
model-viewerのAndroidではScene Viewerを使います。
glTF / glb モデルがサポートされています。
AR Quick Look
model-viewerのiOSではAR Quick Lookを使用します。
AR Quick Lookで表示するには、usdzと呼ばれる3Dモデルフォーマットで、
AR Quick Lookで見られるようにするにはusdzのモデルを用意する必要があります。
AR Quick Look usdzを使った3Dモデルの例が載っています
https://developer.apple.com/jp/augmented-reality/quick-look/
Reality Converter（リアリティコンバータ）
AR Quick Lookで表示するusdz形式の3Dモデルを作るには、
MacでApple製のReality Converter（リアリティコンバータ）アプリを使って一般的な3Dファイル形式（.obj、.gltf、.usd)をドラッグ＆ドロップするとusdz形式に変換します。
Mac版）Reality Converter ダウンロード
https://developer.apple.com/augmented-reality/tools/
3Dモデルのプレビュー表示
gltfやglb形式の3Dモデルを下記のサイトでDrag&Dropするとプレビュー表示します。
glTF Viewer
https://gltf-viewer.donmccurdy.com/
model-viewer
WebおよびARでインタラクティブな3Dモデルを簡単に表示します
camera-controls（カメラコントロール）
ブラウザで３Dモデルをマウスやタッチによるコントロールを有効にする
camera-orbit（カメラ軌道）
３Dモデルからの距離を制御できます。
ar-modes
有効にするARエクスペリエンスのタイプの優先リスト。
「webxr」ブラウザでARエクスペリエンスを起動。
「scene-viewer」シーンビューア アプリを起動。
「quick-look」iOS Quick Lookアプリを起動。
src
3DモデルへのURLでglTF / glb モデルのみがサポートされています。
glTF / glbはWebブラウザ上で3Dモデルを扱う際に用いられるフォーマットです。
ios-src
iOSのAR Quick Lookで表示する3DモデルのURLでusdz モデルのみがサポートされています。
poster（ポスター）
ロード時に3Dモデルの代わりに画像を表示します。ロードが終わったら3Dモデルを表示します。
alt
画面読み上げソフト、スクリーンリーダーを使用する視聴者にモデルを説明するために使用します。
shadow-intensity（シャドウ強度）
影の不透明度を制御します。シャドウを完全にオフにするには、0に設定します。
ar
サポートされているデバイスでARエクスペリエンスを起動する機能を有効にします。
quick-look-browsers
chrome、safariはiOS ChromeやsafariからAR Quick Lookを起動します。
auto-rotate（自動回転）
モデルの自動回転を有効にします。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>non omelet model-viewerデモ</title>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</head>
<body>
<style>
model-viewer {
width: 960px;
height: 540px;
background-color: #CC99CC;}
</style>
<model-viewer
camera-controls camera-orbit="-30deg 50deg 10m"
ar-modes="scene-viewer webxr quick-look"
src="assets/models/omelet.gltf"
ios-src="assets/models/omelet.usdz"
poster="assets/loding.gif"
alt="non omelet"
shadow-intensity="1"
ar
quick-look-browsers="safari chrome"
auto-rotate>
</model-viewer>
</body>
</html>
🌟Blender🌟
— non (@nonnonkapibara) April 18, 2022
Blenderで💕オムライス💕作ってみたよぉ😍
このオムライスでいろいろ遊んでみるよぉ🤩
↓↓作り方⭐️ざっくり解説🐹https://t.co/Pia5NBmcPx#blender #blender3d #3DCG #b3d #オムライス pic.twitter.com/R2n9uyRYDp
🖥️3Dモデル Web📲
— non (@nonnonkapibara) April 23, 2022
Blenderで作った🌟3Dモデル🌟オムライス💕をWebブラウザに表示してみたよぉ😊
オムライスを🐹マウス🖱️or指👆で🔎拡大したり🖥️📲スマホでも、ぐりぐり回せるのは💖とっても楽しいなぁ😍
↓↓作業メモhttps://t.co/pDMsdJUw2a#blender #3DCG #b3d pic.twitter.com/Vp0zqBhRiZ