【AR】Blenderで作った3DモデルオムライスをiPhoneとAndroidでAR表示してみたよぉ。

環境メモ
⭐️macOS Monterey
⭐️Blender3.1.0
⭐️iPhone(IOS15)
⭐️Android12


以下の記事は、2022/04/24時点の作業メモです。

下記のmodel-viewerについての記事の続きになります。
【3D Viewer】３DモデルのオムライスをWebブラウザに表示してみたよぉ
https://qiita.com/nonkapibara/items/a7b9e5c98af17a373888

# ↓↓完成内容
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0c8aaee4-2e39-8701-6eec-70720716b249.png" width=60%>

iPhone(IOS15)でAR表示してみた
↓↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/03c62552-68db-cd46-c48a-4d22c54eb748.png" width=60%>

Android12でAR表示してみた
↓↓
まず床認識
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/6393eb0a-902f-629b-4fc5-f823ffea66b4.png" width=60%>


オブジェクトを配置（3Dオムライスを表示）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9679de25-c0f3-872d-9c58-0fb3d4f48a11.png" width=60%>


↓↓こちらから実際に触る事ができます。
https://nonomelet.netlify.app


↓↓スマホでも動きます。
ARは、iOS 12以降のAR Kitが動く端末、AndroidはAR Coreが動く端末で動作できます。
![QR_nonomelet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/2e2b8c7a-d367-6473-9530-ae0abca9af41.png)


# 試した事
1.Blenderで3Dモデルのサイズを小さめにしました。
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/6a9b357b-622c-3416-8872-a78f7c0d1a37.png)

2.Blenderで3Dモデルを全トランスフォームで適用する（位置、回転、スケールの初期化）
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/bff98267-fd3b-71e3-0065-7bb105c82ce2.png)

3.Blenderからgltfにエクスポートする
![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/d3378080-7a8d-4790-99b5-2ef83d5383e6.png)

![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5db4e05b-5d9e-2768-6283-ac3bff722943.png)

4.gltfをReality Converterアプリでusdzに変換する
![008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0e6d83d7-2fc1-188c-e2d8-1795ceccb279.png)

![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9cfa9b6a-cfa2-46d7-f96e-ea7906781179.png)

なお、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/
![010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/15de3730-7ab1-2bfc-3d1d-3bbf6c98ce32.png)

## 3Dモデルのプレビュー表示
gltfやglb形式の3Dモデルを下記のサイトでDrag&Dropするとプレビュー表示します。
glTF Viewer
https://gltf-viewer.donmccurdy.com/
![011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/4c7cd604-9072-f548-d249-39eccacce8fe.png)

## 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（自動回転）
モデルの自動回転を有効にします。


```html:index.html
<!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>
```


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🌟Blender🌟<br>Blenderで💕オムライス💕作ってみたよぉ😍<br>このオムライスでいろいろ遊んでみるよぉ🤩<br><br>↓↓作り方⭐️ざっくり解説🐹<a href="https://t.co/Pia5NBmcPx">https://t.co/Pia5NBmcPx</a><a href="https://twitter.com/hashtag/blender?src=hash&amp;ref_src=twsrc%5Etfw">#blender</a> <a href="https://twitter.com/hashtag/blender3d?src=hash&amp;ref_src=twsrc%5Etfw">#blender3d</a> <a href="https://twitter.com/hashtag/3DCG?src=hash&amp;ref_src=twsrc%5Etfw">#3DCG</a> <a href="https://twitter.com/hashtag/b3d?src=hash&amp;ref_src=twsrc%5Etfw">#b3d</a> <a href="https://twitter.com/hashtag/%E3%82%AA%E3%83%A0%E3%83%A9%E3%82%A4%E3%82%B9?src=hash&amp;ref_src=twsrc%5Etfw">#オムライス</a> <a href="https://t.co/R2n9uyRYDp">pic.twitter.com/R2n9uyRYDp</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1516144538095550470?ref_src=twsrc%5Etfw">April 18, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🖥️3Dモデル Web📲<br>Blenderで作った🌟3Dモデル🌟オムライス💕をWebブラウザに表示してみたよぉ😊<br>オムライスを🐹マウス🖱️or指👆で🔎拡大したり🖥️📲スマホでも、ぐりぐり回せるのは💖とっても楽しいなぁ😍<br><br>↓↓作業メモ<a href="https://t.co/pDMsdJUw2a">https://t.co/pDMsdJUw2a</a><a href="https://twitter.com/hashtag/blender?src=hash&amp;ref_src=twsrc%5Etfw">#blender</a> <a href="https://twitter.com/hashtag/3DCG?src=hash&amp;ref_src=twsrc%5Etfw">#3DCG</a> <a href="https://twitter.com/hashtag/b3d?src=hash&amp;ref_src=twsrc%5Etfw">#b3d</a> <a href="https://t.co/Vp0zqBhRiZ">pic.twitter.com/Vp0zqBhRiZ</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1517956476811108352?ref_src=twsrc%5Etfw">April 23, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>