Help us understand the problem. What is going on with this article?

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

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

(※iOS12以降でマーカーレス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。

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

iOSでマーカーレスWebAR

※2019年12月追記しました

iOS12と、2019年12月現在最新バージョンであるiOS13でマーカーレスWebARをやろうと思うと色々ややこしいので注意が必要です。

一言で言うと、デバイスの角度センサーが自動で取得できないため
スマホを持って見回す動作をしても、以前のように画面も連動して360度見回すことができなくなってしまいました。

iOS13ではそれを回避する方法もあります。
それについてはこちらの記事が参考になりますのでこちらをご覧ください…!
https://bagelee.com/programming/ios13-webar-webvr/

参考

▼8thwallは6DoFできるっぽいのでお金に余裕のある方は8thwallの開発を検討しましょう。
https://youtu.be/0ACjClmWwPM

Damien
AR/VRが特にすきです
eishis-inc
代々木にあるWebアプリケーション、モバイルアプリケーションを開発する会社
https://palan.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away