ブラウザでARを使ってみた
Contents
はじめに
ふと、名刺に AR マーカーが記載されていて、
川島教授の顔みたいな（脳トレ）のが出てきたら、とてもおもしろいなと思いついて触ってみました。
（余談ですが、脳トレのSwitch 版がでるみたいです）
AR の実現方法
軽く検索したところ、Unity で実現する方法と Web 技術で実現する方法が見つかりました。 ネイティブで実現する方法もあると思いますが、今回はこの 2 つを見ていきます。
Unity
どうやら、Vuforiaという外部ツールと連携して使うのが主流みたいです。
iOS だとARkit、Android だとARCoreという SDK を使って作成できるみたいですが、Vuforiaはこれらをラップしてくれているみたい。
>参考
- VUFORIA とは何か？AR アプリ開発に便利なライブラリの特徴
- ARCore
- 【Unity】Unity インストールから AR アプリ作成まで(iOS, Android)【Vuforia】
- 【３０分でできる】Unity で簡単に AR アプリを作る
Web
こちらは、AR.jsとA-Frame.jsを活用したものが主流みたいです。
A-Frame.jsでオブジェクトをレンダリングして、それをAR.jsで AR 化しているっぽいです。
また、今回は使用していませんがThree.js（Web ブラウザ上で 3D レンダリングできるようにするライブラリ）を組み合わせ
参考
- A-Frame と AR.js で超簡単 AR（PC・スマホ・マルチマーカー対応）
- 【AR.js 入門】簡単に WebAR で遊んでみた【A-Frame 使うよ】
- 🐶AR.js を使って WebAR 年賀状を作る 🐶
どっちにするか
Unity にするなら、アセットなどのデータを使えると思うので資産的にはすごく大きいと思いますが、Unity ということは、アプリにする必要があると考えとります(Unity の WebGL ビルドがどうとかは未調査です)。
今回は簡単に実行できてほかったのと、自分が Web 技術を中心に触っていることから、Web 技術で作る方針にしました。
実際に動かしてみる
とりあえず、「A-Frame と AR.js で超簡単 AR（PC・スマホ・マルチマーカー対応）」を参考に作ります。 上記リンクを参考に作ったソースはこちらです(ほぼコピペ 🤔)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23<!DOCTYPE html> <html> <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> <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="debugUIEnabled:false;trackingMethod:best;" vr-mode-ui="enabled: false" > <a-marker preset="hiro"> <a-text value="Name: Urato Amatsuki\nTwitter: @AmatsukiUrato\nGithub: AmatsukiUrato" position="0 0.5 0" align="center" ></a-text> </a-marker> <a-entity camera></a-entity> </a-scene> </body> </html>a-text の部分以外は、参考先の html を使用しております。
スマホから繋げない問題
上記を参考に、index.htmlを作成します。とりあえずのテストなので、nginxの Docker コンテナを使って立てました。
下記 Docker コマンドを叩くカレントディレクトリにindex.htmlをおいておけばlocalhost:8080または、同一ネットワークから[dockerを起動しているPCのip]:8080で接続が可能になります。
docker run --name nignx -v $PWD:/usr/share/nginx/html -d -p 8080:80 -h 0.0.0.0 nginx
自分のスマホでアクセスしてみます。
…
表示されない…だと!?
やっぱり https 通信じゃないのが原因なんですかね？
https 通信が行えていないことが原因でうまく行ってませんでした。
同一ネットワーク内からなら行けるんじゃねという謎の考えのせい 😭
スマホ側から動作させる
🐶AR.js を使って WebAR 年賀状を作る 🐶
を参考にして、ruby のワンライナーで https サーバを立てたところ、うまくいきました(圧倒的感謝…!!)。
下記ワンライナーはカレントディレクトリのデータを外部に公開してくれるものみたいです。
| |
実際に接続してみた画像がこちらです。 今回はとりあえず、自分の Info をテキストで表示するところまで行いました。
PC のカメラで動作させる
MacBookPro のカメラで無理やり確認したやつも載せておきます。
さいごに
とりあえず、AR マーカーを使って文字を表示できるところまでは実装できました(ほぼほぼ自分が書いたところがない 🙈)。
結局、解説ページの後をなぞって終わりになってしまったので、次やるときは、もう少し違うものを表示させてみたいです。Three.jsを触って見るものも面白いかもしれないです。
