以前 Webブラウザ上で簡単に3D表現が実現できる A-Frame を利用した WebVR を紹介しました。

【A-Frameで簡単にWebVRを実現】

そして、今回からは同じ A-Frame と、WebAR用の JavaScriptライブラリ AR.js を組み合わせた WebAR を紹介 します。
AR Image_035

まず今回は写真にあるように、一番簡単な黒い枠線のあるマーカーを利用した Marker Based WebAR を公式にあるサンプルを使って説明していきます。

【AR.jsとは】

AR.js は three.jsをベースとした WebAR用の JavaScriptライブラリです。現在 AR.jsは AR-js-orgに管理されており、公式ページは以下の GitHubにあり、各種ドキュメントも用意されています。

https://github.com/AR-js-org

AR Image_036

ここにあるドキュメントによると、現在(2020年5月)AR.jsの機能は以下のようなものです。

・Marker Based WebAR:黒い枠線のあるマーカーにかざすとその位置に AR表示がされます。今回利用する「Hiro」や「Kanji」と言う決まったマーカーがあります。また、オリジナルのマーカーの作成機能も用意されています。

・Location Based WebAR:GPSの位置情報を基に AR表示がされます。

・Image Tracking WebAR:黒い枠線のあるマーカーでなく通常の絵や写真にかざすとその位置に AR表示がされます。絵や写真をマーカーとして登録する機能が用意されています。


【作業概要】

今回は AR.js公式ページにあるサンプルをそのまま試す方法となります。

 HTMLファイルの作成
 Netlifyの使用準備
 Netlifyにアップロード
 スマホでテスト


【HTMLファイルの作成】

AR.jsの公式ページ、以下の GitHubに Marker Based WebARのサンプルが載っているのでそれをそのまま試してみます。

https://github.com/AR-js-org/AR.js

AR Image_037

ここの READMEにある Marker Based Exampleをメモ帳にコピーして「index.html」と言うファイル名で保存します。(次に Netlifyを使用するため。)
(また、ソース内の詳細説明は今回は省き、次回のサンプルの修正時に説明します。
AR Image_038

AR Image_039


【Netlifyの使用準備】

モバイルデバイスで試すためにホスティングサービス等にアップする必要があります。
今回は簡単にテストするだけなので、24時間は無料で超簡単にアップできる Netlify を使用します。(もちろん他のサービスや自分の環境でも構いません。)

Netlifyにアップするためのフォルダを zipファイルにする必要があります
AR Image_040

先ほど作成した index.htmlのあるフォルダをそのまま zip形式で圧縮します。
AR Image_041


【Netlifyにアップロード】

では、無料ホスティングサービスのNetlifyにアップします。以下のURLとなります。

https://app.netlify.com/drop

AR Image_042

先ほど作成した zipファイルをサイト中央のボックスにドラッグアンドドロップします。
AR Image_043

アップロード成功すると、以下の様に一時的なURLが発行されます。自分のスマホの Webブラウザで表示させてみましょう。
AR Image_044


【スマホでテスト】

Netlifyで発行されたURLを表示すると、WebARとしてカメラの起動許可を求められます。もちろん許可をあたえます。
AR Image_045

今回のサンプルは以下の「Hiro」と言うマーカーを使っています。印刷しても良いですが、ここで行っているようにディスプレイ上の表示でも試すことができます

【Hiroマーカー】

AR Image_046

以下の様に恐竜の3Dモデルが表示されました。簡単でした。
AR Image_047

今回は AR.js公式のサンプルをそのまま使用して、簡単に WebARを試してみました。次回、このサンプルをもう少し修正すると同時に、プログラム自体の説明もしようかと思います。

【AR.jsとA-Frameで簡単にWebARを実現 Part.2】


Sponsored Link