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などを単純化して持っているみたい。たぶん、枠を探して、中身を判別する。

次の記事

npmについて