Edited at

AframeとAR.jsでマーカーレスwebAR

こんにちは!

この記事ではタイトルの通り、aframeとAR.jsでマーカーレスwebARをつくります!

(※2019年9月現在、iphoneの標準ブラウザsafariではジャイロセンサーがデフォルトで無効になっているためマーカーレスARの開発にはこの設定を変更する必要があります。

無効になったままシーンを見てみても画面に張り付いたままで動かないのでご注意ください…)


前提

webXRを実現できるライブラリには主にこれらが挙げられます。



  • AR.js : 簡単にマーカーベースwebARが作れるとして有名!


  • aframe : mozillaの開発したwebXRライブラリ。いろんなプラグインも充実していてリッチなコンテンツも作れる。愛してる。


  • 8thwall(8thwallWeb) : 2018年くらいに彗星の如く現れたwebARライブラリ。無料版と有料版がある

8thwallWebは特に平面検知の精度などで抜きん出ていて、リッチなコンテンツを作るのに優れている印象です。

しかし如何せん、無料版だと公開制限があるため多くの人に見てもらいたいコンテンツを作るとなると課金が必要です。

著者は貧困層で課金できないため、今回はaframeAR.jsマーカーレスwebARをねばって作りたいと思います!


つくってみた


index.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
<title>untitled</title>
</head>
<body>
<a-scene>
<a-box position="5 0 -7" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
</a-scene>
</body>
</html>

headerでaframe, AR.jsを呼んでるだけで特別なことはしていません。

aframe

https://aframe.io/

AR.js

https://github.com/jeromeetienne/AR.js/blob/master/README.md

できたものはこちら!

gif.gif


まとめ

AR.jsってマーカーベースwebARしかできないのかなと思ったのですが、案外aframeでwebVRつくる時と同じようにpositionなど指定すればオブジェクトをARで表示することができました。

しかし見てわかる通り平面検知などなく貼り付いてるだけって印象が強いんですよね。

完全3DoF。

なので平面配置するより、空中に浮いてるという表現をするなど、表現に気を使う必要がありそうです。


参考

▼aframe × AR.jsのwebARで非常にいい表現をしているウェブサイトがあり、参考にさせていただきました!

https://webvr-lab.eishis.com/namecard/aquarium/index.html

▼8thwallは6DoFできるっぽいのでお金に余裕のある方は8thwallの開発を検討しましょう。

https://youtu.be/0ACjClmWwPM