以前 Webブラウザ上で簡単に３D表現が実現できる A-Frame を利用した WebVR を紹介しました。
【A-Frameで簡単にWebVRを実現】
そして、今回からは同じ A-Frame と、WebAR用の JavaScriptライブラリ AR.js を組み合わせた WebAR を紹介 します。
まず今回は写真にあるように、一番簡単な黒い枠線のあるマーカーを利用した Marker Based WebAR を公式にあるサンプルを使って説明していきます。
【作業概要】
今回は AR.js公式ページにあるサンプルをそのまま試す方法となります。
HTMLファイルの作成
Netlifyの使用準備
Netlifyにアップロード
スマホでテスト
【HTMLファイルの作成】
AR.jsの公式ページ、以下の GitHubに Marker Based WebARのサンプルが載っているのでそれをそのまま試してみます。
https://github.com/AR-js-org/AR.js
ここの READMEにある Marker Based Exampleをメモ帳にコピーして「index.html」と言うファイル名で保存します。（次に Netlifyを使用するため。）
（また、ソース内の詳細説明は今回は省き、次回のサンプルの修正時に説明します。）
【A-Frameで簡単にWebVRを実現】
そして、今回からは同じ A-Frame と、WebAR用の JavaScriptライブラリ AR.js を組み合わせた WebAR を紹介 します。
まず今回は写真にあるように、一番簡単な黒い枠線のあるマーカーを利用した Marker Based WebAR を公式にあるサンプルを使って説明していきます。
【AR.jsとは】
AR.js は three.jsをベースとした WebAR用の JavaScriptライブラリです。現在 AR.jsは AR-js-orgに管理されており、公式ページは以下の GitHubにあり、各種ドキュメントも用意されています。
https://github.com/AR-js-org
ここにあるドキュメントによると、現在（2020年5月）AR.jsの機能は以下のようなものです。
・Marker Based WebAR：黒い枠線のあるマーカーにかざすとその位置に AR表示がされます。今回利用する「Hiro」や「Kanji」と言う決まったマーカーがあります。また、オリジナルのマーカーの作成機能も用意されています。
・Location Based WebAR：GPSの位置情報を基に AR表示がされます。
・Image Tracking WebAR：黒い枠線のあるマーカーでなく通常の絵や写真にかざすとその位置に AR表示がされます。絵や写真をマーカーとして登録する機能が用意されています。
AR.js は three.jsをベースとした WebAR用の JavaScriptライブラリです。現在 AR.jsは AR-js-orgに管理されており、公式ページは以下の GitHubにあり、各種ドキュメントも用意されています。
https://github.com/AR-js-org
ここにあるドキュメントによると、現在（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
ここの READMEにある Marker Based Exampleをメモ帳にコピーして「index.html」と言うファイル名で保存します。（次に Netlifyを使用するため。）
（また、ソース内の詳細説明は今回は省き、次回のサンプルの修正時に説明します。）
【Netlifyの使用準備】
モバイルデバイスで試すためにホスティングサービス等にアップする必要があります。
今回は簡単にテストするだけなので、24時間は無料で超簡単にアップできる Netlify を使用します。（もちろん他のサービスや自分の環境でも構いません。）
Netlifyにアップするためのフォルダを zipファイルにする必要があります。
先ほど作成した index.htmlのあるフォルダをそのまま zip形式で圧縮します。
モバイルデバイスで試すためにホスティングサービス等にアップする必要があります。
今回は簡単にテストするだけなので、24時間は無料で超簡単にアップできる Netlify を使用します。（もちろん他のサービスや自分の環境でも構いません。）
Netlifyにアップするためのフォルダを zipファイルにする必要があります。
先ほど作成した index.htmlのあるフォルダをそのまま zip形式で圧縮します。
【Netlifyにアップロード】
では、無料ホスティングサービスのNetlifyにアップします。以下のURLとなります。
https://app.netlify.com/drop
先ほど作成した zipファイルをサイト中央のボックスにドラッグアンドドロップします。
アップロード成功すると、以下の様に一時的なURLが発行されます。自分のスマホの Webブラウザで表示させてみましょう。
では、無料ホスティングサービスのNetlifyにアップします。以下のURLとなります。
https://app.netlify.com/drop
先ほど作成した zipファイルをサイト中央のボックスにドラッグアンドドロップします。
アップロード成功すると、以下の様に一時的なURLが発行されます。自分のスマホの Webブラウザで表示させてみましょう。
【スマホでテスト】
Netlifyで発行されたURLを表示すると、WebARとしてカメラの起動許可を求められます。もちろん許可をあたえます。
今回のサンプルは以下の「Hiro」と言うマーカーを使っています。印刷しても良いですが、ここで行っているようにディスプレイ上の表示でも試すことができます。
【Hiroマーカー】
以下の様に恐竜の３Dモデルが表示されました。簡単でした。
今回は AR.js公式のサンプルをそのまま使用して、簡単に WebARを試してみました。次回、このサンプルをもう少し修正すると同時に、プログラム自体の説明もしようかと思います。
【AR.jsとA-Frameで簡単にWebARを実現 Part.2】
Netlifyで発行されたURLを表示すると、WebARとしてカメラの起動許可を求められます。もちろん許可をあたえます。
今回のサンプルは以下の「Hiro」と言うマーカーを使っています。印刷しても良いですが、ここで行っているようにディスプレイ上の表示でも試すことができます。
【Hiroマーカー】
以下の様に恐竜の３Dモデルが表示されました。簡単でした。
今回は AR.js公式のサンプルをそのまま使用して、簡単に WebARを試してみました。次回、このサンプルをもう少し修正すると同時に、プログラム自体の説明もしようかと思います。
【AR.jsとA-Frameで簡単にWebARを実現 Part.2】
Sponsored Link
E-Mail: 