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

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

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

完成動画↓↓↓

🚩WebAR🚩
Blenderで出力した３Dモデルは🐱pngに比べて表示がちょっと重いみたい🐷#WebAR #ARマーカー #XRMTG #XRMTG pic.twitter.com/Bs76WIWu1X
— non (@nonnonkapibara) 2019年3月25日

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

1.ツールは、Atomを使ってみた。
（特に、ツールは使わなくてもテキストでもOK）
https://atom.io/

「CotEditor」でも、使いやすい
https://coteditor.com/

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


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

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


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

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


<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

https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders#animation
プロパティの説明が載っています

WebAR　キャラクターglTF (GL Transmission Format)が、すごく暗い

なので、WebARキャラクターが暗いので、ガンマ補正をかける
renderer="gammaOutput: true;"
を入れてみた。

それでも、まだ、暗い

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

https://aframe.io/docs/0.5.0/primitives/a-light.html

https://aframe.io/docs/0.5.0/components/light.html#hemisphere

ソースの簡易説明

index.htmlの内容


<!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