奥会津只見 イラスト美術館 A-Frameの途中ですが、UnityとAR.jsで検索していたら、Unity tool for AR.jsというのが出てきたので、試しにやってみることに。
結論としては、前回までのA-Frameと同じ要領でホスティングサービスにフォルダを入れてみたけど、表示がされず、その方法がいけないのかの区別がつかないので、残念ですが、未解決のまま一旦保留にします。
A-Frameをやっている間に、AR.js周りの分からない単語が沢山増えてきたので、まずその辺をクリアにして、この方の違うビデオなども見てから、またトライしてみようと思います。
この動画のチュートリアルを見ながら作業開始。
AR.js with Unity: Project Setup Tutorial（2020/05/22）
Unityのインストール。この動画の時点でstableのバージョンは2019.3.14f1らしいけど、現時点でのおすすめっぽい2020.3.14f1バージョンでやってみる。追加でWebGL ビルドサポートも。iOSやMac、Windowsは今はいいかな。
Unity Hubからはこうやって管理するのか、なるほど。
Project>NEWから新規プロジェクトの作成
Clone or Download？どっちがいいのかな。とりあえずDownloadして解凍。
Assets下にドラッグ＆ドロップ。
フォルダの名前が重要なので、フォルダの名前を、ARjs_Unity-masterからARjs_Unityへ変更。
おお！ AR.js が出来てる！
出来る前/時の状態を確認してなかったので、今度他のプロジェクトでやるときがあったら注意して見てみよう。
ところで、Compile Filesは、シーンにimage targetを配置すれば有効になるらしいですが、シーンに何か配置する前に、AR.jsを入れてしまう方がいいかと思います。
何故またGit Hubに行ってダウンロードするのかと思ったら、そうか、さっきのはUnityでAR.jsを使うためのツールだった事を思い出す。色々必要なソフトがそれぞれ何を担っているかの理解がなかなか追いつかない。。
今まで見ていたいくつかのサイトで載せてくれているAR.jsの実装のコードに、cdn.rawgit.com/jeromeetienne/AR.jsと、raw.githack.com/AR-js-orgがあって、どっちにするのがいいかと思っていたら、2020年2月から管理先が変わったようなので、AR-js-orgの方でやればいいのかな。
このツールのサイト（taylordigital13/ARjs_Unity）のset upにある、AR.js project from GitHub へのリンクは、旧管理人のjeromeetienneさんのページのようなので、新しいAR-js-org/AR.jsのサイトからダウンロードする事にしてみます。（バージョン違うけど大丈夫かはちょっと心配）
参考：AR-js-org/AR.js
AR.js – Augmented Reality on the Web
〜先の作業でimage targetを配置していない人は飛ばす部分〜
チュートリアルビデオでは、このAR.js-masterをUnityに入れた後に、不要なもう一つのAR.js-masterファイルを削除しているけど、もし同じようにImage target配置して不要なフォルダができている場合は、先にそれを削除してからAR.js-masterをインポートした方が、紛らわしくないような気がする。
このビデオの場合、先のImage Targetを作成した段階で、自動的にAR.js-masterというサンプルシーンが作られちゃってる。これがいらないのでまず削除。
その後、新しくダウンロードしたAR.js-master（同じ名前だけど中身がいっぱい詰まってる）をAssets下にインポート。
Unityのいつからかのバージョンで、何かの操作の際に不用なシーンが自動的に作られる現象が出るようになったと、他のビデオの解説で見たことあるけど、これもその現象なのかな？
因みに、ビデオでは、AR.jsインストール後、Compile Filesがまたグレーアウトしていて再度Image Targetを配置していましたが、自分でやったときは有効のままでした
先ほどのCompile Filesをするだけで、htmlファイルやその他、ちょっとした周辺ファイルも作ってくれるらしい。なるほど、コンパイルとはそういう意味か。
index.htmlファイルは、AR.js-master>aframe>フォルダ下に、シーンの名前でフォルダができて、その中に入るらしい。
折角なので、デフォルトのSampleSceneから、シーンの名前を変えてみる。
（Scenesフォルダ下のSampleSceneをmyFirstSceneへ）
シーン上は、Image Targetを親として、AR.js からのシリンダー作成。色、形、向きなどを少し変えてみる。
コンパイル。
myFirstSceneの名でフォルダができて、その中にindexファイルが入っていました。カメラ画面をフルスクリーンする時のアイコン等、その他諸々のファイルも出現。
htmlファイルの中を確認すると、シリンダーの記述や、マーカー、AR用のカメラの記述がある。
ホスティングサービスにフォルダをドラッグ＆ドロップするみたいに、AR.js-masterのフォルダを自分のサイトに入れればいいらしい。はずなのだけど。。
特にFTP設定しているサイトがないので、A-Frameの勉強で使ったばかりのNetlifyにそのまま入れてみる。zipにしても同じ。フォルダを再度入れてみても同じでお手上げ。
取り敢えず、作業は止めて、ビデオを見進める。
hiro画像はAR.js Unity Plug in に含まれているので、ARjs_Unity>Iconsフォルダ下のアイコンを探して開く。バックが白い方がカメラがスキャンし易いようです。
スキャンしたかった。残念。。
こちらだと、色々試してみたもののCompile Filesがグレーアウトのままで、AR-js-orgよりも先に進まなかったため、次回やり直すときもAR-js-orgでやってみようと思います。また、ビデオとは順番が違うけど、自分的にしっくりくるAR.js→Unity tool for AR.jsの順でインストールし直してみようと思います。
＜3DのONIちゃんについてはこちら＞
ブログ：ONIちゃん登場@Ps/Dimension
＜シロちゃんについてはこちら＞
チャとシロの日常
