|Anazawa
ブログXR技術
どうも穴澤です。
WebARで「Image Tracking」を試している記事をSNSで見つけて試してみたくなり、やってみました。
過去にトライしたWebAR
過去に制作したWebARは「年賀状WebAR」や「踊るWebAR」や「歴史的偉人WebAR案件」がありました。
こうしてみると、Marker Based ARは試してみたけど、マーカーではなく画像がトリガーのARを試したことがない！！と思いました。
「Image Tracking」って何？
そもそもマーカー以外の「Image Tracking」って何なのか？
Marker Based ARと比較してみましょう。
Marker Based AR
Marker Based ARは黒枠のついた画像をマーカーとして認識し、ARコンテンツを表示します。
Image Tracking AR
Image Tracking ARは任意の画像をマーカーの代わりに認識させて、ARコンテンツを表示します。
早速作ってみよう
「AR.js」を使用します。
作り方は至って簡単です。
参考のサイト「https://github.com/AR-js-org/AR.js」のサンプルをコピペするだけです。
※Webサーバーと適当なHTMLファイルは事前に用意してください。
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
Loading, please wait...
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true; precision: medium;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
<a-nft
type="nft"
url="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-entity
gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
scale="5 5 5"
position="150 300 -100"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
少し変更
39行目と46行目の「your-server/」を削除する。
url="https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
gltf-model="https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
試してみよう
サンプルでは恐竜の画像を認識すると、恐竜の３Dオブジェクトが出現するはずです。
結果
恐竜が出てきたので成功です。
39行目を変更すれば、好きな画像をトリガーにすることが出来そうです。
46行目を変更すれば、好きな３Ｄオブジェクト等を表示することが出来そうです。
今後、機会があれば自作してみようと思います。
