【WebAR】AR Quick LookでBlenderで作った博多とんこつラーメンを表示してみた（AR Quick Look）


環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Blender v2.79.6
⭐️Xcode10.2
⭐️Mac Book

↓↓↓動かした動画です
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">✨WebAR✨<br>🚩AR Quick Look🚩でこの間Blenderで作った<br>🍜博多とんこつラーメン🍜を表示させてみたよぉ。<br>「xcrun usdz_converter」コマンドでobjをusdzフォーマットへ変換しテクスチャもちゃんとついた😘<br>(=￣▽￣=)めっちゃ簡単で💕楽しい💕<a href="https://twitter.com/hashtag/b3d?src=hash&amp;ref_src=twsrc%5Etfw">#b3d</a> <a href="https://twitter.com/hashtag/Blender?src=hash&amp;ref_src=twsrc%5Etfw">#Blender</a> <a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://t.co/sgeVkZWpPV">pic.twitter.com/sgeVkZWpPV</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1138419747781992449?ref_src=twsrc%5Etfw">June 11, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

AR Quick LookでBlenderで作った博多とんこつラーメンを表示してみた。
IOS12以上のsafariでWebARが動きます。


1.まず、Blenderで作った、博多とんこつラーメンのモデルを「obj」形式にエクスポートする
(デフォルトの設定でOKでした。)
<img width="230" alt="スクリーンショット 2019-06-08 1.01.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/cbe9e098-6c8a-911a-95bd-806b2adb3a51.png">


<img width="492" alt="001.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/81b89978-e089-d450-3a5a-9a68b7a10d3f.png">
<img width="225" alt="002.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/00e96c07-2b6e-9698-b16d-5435571fb69f.png">
<img width="233" alt="003.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9110f9cf-24ec-bbc3-709a-5330dd04b38a.png">

2.Xcodeを開き「Preferences」を開く
<img width="308" alt="004.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/57ff6e0b-d613-51b4-c513-34c417434f30.png">

3.Locationsタブを選択し、
Command Line ToolsがXcode１０以上になっていることを確認する
<img width="797" alt="005.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0cd89384-3647-bfe5-a8f3-c914944bc98a.png">

4.博多とんこつラーメンのテクスチャ「png」の背景色透過をやめて
背景色白にする
↑これをしていないと、どんぶりのテクスチャがすけました。TOT
<img width="536" alt="006.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9392d174-ac87-6838-247b-1cc0f2d8ae43.png">

5.obj形式から、usdz形式に変換する。
その際、テクスチャも、つける。

```
xcrun usdz_converter ramen.obj ramen.usdz  -color_map ramen_image.png
```

<img width="735" alt="007.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/7b346ad9-e9a9-6ae2-6496-b18daeefb74b.png">


5.usdzが出力される
<img width="227" alt="008.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0d4028bb-edb0-d287-ee92-e00802b33ed7.png">

6.用意する内容
<img width="452" alt="009.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/99e02fcb-5e02-1dc3-061a-997efe098cce.png">

7.index.htmlの内容
<img width="777" alt="010.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c68d12ba-e6f0-0eec-8713-acb5f7d8cd07.png">


```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hakata Tonkotsu Ramen</title>
  </head>
  <body>
    <a href="ramen.usdz" rel="ar" >
    <img src="imageramen.png">
</a>
  </body>
</html>

```

完成！！