Category

未分類

インストール不要。ブラウザーで見れるWebARの作り方。

By | 未分類

WebブラウザーだけでARを実現する WebAR。以前からこの¥WebARを行うために提供されているAR.js。
今出ているバージョンでは、マーカの扱いや機能も安定してきているようで昔あったARプラットフォームのjunaioで提供されていた機能もブラウザーで再現できるようになってきたようです。簡単にARを楽しめるので使い方を紹介したいと思います。

まず実際に試してみるのはとても簡単。提供されているページに書いてあるコードをコピーして貼り付けた、HTMLファイルをサーバーにアップロードするだけです。

<!doctype HTML>
<html>
<!-- WebVRフレームワークA-Frameを読み込む-->
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<!-- WebARフレームワークAR.jsを読み込む—>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-box position='0 0.5 0' material='color: black;'></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>

サンプルコードで使用されてるマーカーこれになります。HRO.js

アップロードしたHTMLファイルをスマホやパソコンのカメラで開くと、カメラの利用の許可を聞いてくるので許可します。
すると、カメラに映った映像がブラウザーに表示されるので、カメラでマーカを映します。

問題なければ、黒い四角が表示されると思います。

簡単に説明すると「a-marker」タグで囲まれているコンテンツがマーカーを認識すると表示されます。「preset」がマーカーの指定でサンプルでは「hiro」が指定されていてこれはデフォルトで入っているマーカーになります。

a-marker タグで囲まれている「a-box 」がマーカを認識されると表示されるコンテンツになり、「a-sphere」で球。「a-cylinder」で円柱。「a-plane」で平面のオブジェクトが生成されます。これらの記述方法は「A-Frame」になるので、a-frameのサイトを見るとよくわかると思います。

一点注意することは、カメラを使用するためhttps(SSL)の環境が必要になります。通常のhttpのアクセスではカメラ利用できないと警告が表示されます。

Apple、Google共にARライブラリが提供され、再度話題に上がることの多くなったARですが、従来のマーカーを認識させ何かを見せるだけであればブラウザーだけで十分でアプリケーションの場合は、表現の一部として利用されるよようになってきているように思います。