WebXRについて
フレームワーク
A-FRAMEというjsのフレームワークを使う。
画像マーカーの作り方
画像をマークにして、ARを表示することができる。
画像は、ツールを使って特徴点のファイルに変換することもできる。
node.jsでツールがあるのでローカルでも作ることはできる。
手順
コマンドプロンプトでnodeとnpmがインストールされていることを確認。
それぞれ「node -v」「npm -v」で確認できる。
確認できたら、https://github.com/Carnaux/NFT-Marker-Creator ここからファイルをゲット。
nodeでインストールして、how to useに書いてある通りにしたらできる。
(NFT-Marker-Createrのフォルダに移動して、npm instarll。画像配置ようのフォルダを作成「img」。画像をimgフォルダに入れて、node app.js -i img/ファイル名 で処理が走る。
※ファイルはできたけど、試してみたらマークとして認識されなかった。ウェブのツールの方が良いのかもしれない。
マーク画像の質は、コマンドプロンプトに表示される「confidence level」というところに最大5までの数値で評価される。
どのような画像が良いか。→ここ
AR.js
AR.jsは、イメージトラッキング、ロケーショントラッキング、マーカートラッキングができる。
AR.jsには、A-FRAME版とTREE.js版がある。それぞれ別物。
イメージトラッキングができるものと、できないものもあるみたい。
イメージトラッキングはCPUのパワーが必要。スマホの電池も消費が激しい。
マルチカメラのスマホでAR.jsを使う場合、Chromeを使用した時にうまく動かない場合がある。Firefoxを使ってくださいという話です。そういう問題もある。
接続にはhttpsが必要。
AR.jsを使って、イメージトラッキングを行う。
https://ar-js-org.github.io/AR.js-Docs/image-tracking/
ロケーショントラッキング
緯度と経度を指定すると、わりと正確にその場所に表示される。
マーカートラッキング
パターンとバーコードのいずれかでトラッキングできる。
良い感じのマークの作り方はこちら。パターンのジェネレーターはこちら。バーコードのジェネレーターはこちら。
良い感じのパターン…「非対称であること。規則性がないこと。」「40cmの距離で認識させるのなら3cmぐらいの大きさでもいける」「スクリーンよりは印刷した方が確実」「黒の枠の外に白の枠があった方が認識しやすい」
iOSのChromeで、カメラの許可まわりにバグ?がある。Safariの方がより安全。
パターンジェネレータでpattファイルを作って、Pattern Ratioで外枠の太さを設定する。
中身の画像を1として、それに対する比率で表現する。画像の半分の太さ0.5をデフォルトにしている。
Ratioが変わってもpattファイルの中身は変わらない。画像を、おそらく16*16に分割して、RGBなどを単純化して持っているみたい。たぶん、枠を探して、中身を判別する。