WebAR(AR.js)を実装してみた


環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️iPhone7(IOS 12.1)
⭐️Blender v2.79.6
⭐️Mac Book
⭐️ブラウザ　safari


WebAR(AR.js)を実装してみた

完成動画↓↓↓
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">🚩WebAR🚩<br>Blenderで出力した３Dモデルは🐱pngに比べて表示がちょっと重いみたい🐷<a href="https://twitter.com/hashtag/WebAR?src=hash&amp;ref_src=twsrc%5Etfw">#WebAR</a> <a href="https://twitter.com/hashtag/AR%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#ARマーカー</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://t.co/Bs76WIWu1X">pic.twitter.com/Bs76WIWu1X</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1110183471064866832?ref_src=twsrc%5Etfw">2019年3月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


事前にQRコードとARマーカーを作成する
詳細は、以下を参照
WebAR(AR.js)で使用するQRコード とARマーカー作成方法
https://qiita.com/nonkapibara/items/23d8ed52eb90b4abc455


1.ツールは、Atomを使ってみた。
（特に、ツールは使わなくてもテキストでもOK）
https://atom.io/
<img width="1056" alt="スクリーンショット 2019-03-27 21.47.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/9bce318b-4115-e683-0da2-cde127bb33b5.png">

「CotEditor」でも、使いやすい
https://coteditor.com/
<img width="726" alt="スクリーンショット 2019-03-27 22.22.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/ca2ed9eb-543a-9a61-6c9e-6fa23ddefa98.png">


2.A-Frameのライブラリを入れる

```Js

<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>

```

3.AR.jsのライブラリを入れる

```Js

<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

```
4.glTFに含まれたアニメーションを再生する為のライブラリを入れる

```Js

<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js"></script>

```


５.Brenderから出力したキャラクターglTF (GL Transmission Format) を組み込む

https://aframe.io/docs/0.5.0/components/gltf-model.html
<img width="942" alt="スクリーンショット 2019-03-27 22.02.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/c9ccfb68-d135-2934-63f1-18d44fd69d13.png">



https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders#animation
プロパティの説明が載っています
<img width="908" alt="スクリーンショット 2019-03-27 22.07.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/5b6363ef-2992-6f38-fdbd-a6e30dffae02.png">



WebAR　キャラクターglTF (GL Transmission Format)が、すごく暗い
<img width="552" alt="スクリーンショット 2019-03-27 22.13.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/f2f52908-e3d9-a7de-9f34-bdab3ad9a1a1.png">
なので、WebARキャラクターが暗いので、ガンマ補正をかける
renderer="gammaOutput: true;"
を入れてみた。



それでも、まだ、暗い
<img width="756" alt="スクリーンショット 2019-03-27 22.17.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/c9f3beef-7bd1-4001-6eca-72f2855edcbb.png">


なのでA-FRAME の「a-light」を追加した

https://aframe.io/docs/0.5.0/primitives/a-light.html
<img width="1106" alt="スクリーンショット 2019-03-27 22.06.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/2d50f771-4182-aacb-1f91-846d28940bb2.png">

https://aframe.io/docs/0.5.0/components/light.html#hemisphere
<img width="1125" alt="スクリーンショット 2019-03-27 22.09.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/65a81d08-fe07-a489-ad70-1208c9b7bfce.png">


<img width="649" alt="スクリーンショット 2019-03-27 22.19.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/47439f87-a60e-85a0-ea55-add01d78edf6.png">


ソースの簡易説明
<img width="1243" alt="スクリーンショット 2019-03-27 22.33.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/41a4202a-6c43-5fc3-e5da-ab84f3388c95.png">


index.htmlの内容

```Js

<!doctype HTML>
<html>
<!-- A-Frame ライブラリの読み込み -->
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<!-- AR.js ライブラリの読み込み -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<!-- glTFに含まれたアニメーションを再生する為の読み込み -->
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs="debugUIEnabled:false;" renderer="gammaOutput: true;" vr-mode-ui="enabled: false">
      <a-assets>
          <a-asset-item id="brownGirl" src="non/piyokumaWebAR001.glb"></a-asset-item>
      </a-assets>
    <!-- a-markerのtypeにpatternを設定, 作ったpattファイルをurlにを指定 -->
    <a-marker preset="custom" type="pattern" url="non/pattern-marker.patt">
         <a-entity gltf-model="#brownGirl" scale="0.15 0.15 0.15" position="0 0 0"
         rotation="-50 0 0">
       </a-entity>
    </a-marker>
    <a-light type="ambient" color="#ffffff"></a-light>
　　<a-light type="point" intensity="2" position="0 0 0"></a-light>
   <a-entity camera></a-entity>
</a-scene>
</body>
</html>


```
フォルダごと、Netlifyに、アップロードする。


ホスティングサービスについては、以下を参照
WebAR(AR.js)で使用するホスティングサービスNetlifyを使う
https://qiita.com/nonkapibara/items/fd70842c59059f0dfd97


こちらもあります。
WebAR(AR.js)特定のページへジャンプする方法
https://qiita.com/nonkapibara/items/64ac76eab6610b0a5ee2