前回マーカーありwebARをA-frameでやりました。
今回はマーカーなし系をやります。
WebAR on ARkit
このgithubから、WebARonARkitまるまるダウンロードして、Xcodeでビルドします。
BundleIDをオリジナルにしないとエラーが出るので適当に名前を付け加えました。
そうしてiPadにアプリを入れた状態で、こちらの記事のリンクを開くとサンプルが遊べます。
Getting Started with AR on the Web | ARCore | Google Developers
A-frameでTango with glitch
マーカーありをしたときよりも簡単にできました。
あらかじめTangoのwebarのapkを端末に入れておきます。
ここにapkダウンロードできるところがあるので、このページを実機で開いてインストールしました。
そしてコード書いてどっかのサーバーに上げて、WebSRonTangoアプリを開いて、urlを入れるだけで実行できました。
最初オブジェクトが画面に張り付いて、ARできなかったのですが、やり直したらできました。
前回はglitchでhttpsができるかわからなかったのでBItBalloonを使いましたが、glitchで余裕でできました＞＜
objなどを入れるには左側のasstsを押してドラッグして、クリックしたらurlが発行されます。
それをこんな感じで組み込んだら表示されるはず
と思いきやpng（テクスチャ）が見つかりませんと言われたので、
こちらを参考にmtlをエディタで開いてurlをglitchのpngのurlに書き換えてみました。
できました。
urlをアーダーコーダするのがめんどくさいなら、bitballoonでフォルダごとアップロードする方が楽だと思います。
組み込みwebAR
本当にやりたかったのは記事に組み込めるwebARであるWebAR-Articleです。
ここに書いてある通りにMacにコンソールでダウンロードして
git clone git@github.com:google-ar/webar-article.git article && cd article && npm installnpmを実行します
npm run devうまく行ったら
にアクセスしたら記事を見れます。
そしてスマホで見るにはArkitやArcore、Tangoのwebarのapkも入れた状態で、同じネットワーク上（無線LAN)でさっきの記事のurlのlocalhostをmacのlocalIPにして見たらARできる埋め込みが実行できる
出来ました！！！！
すごい！！
モデルを置き換える
モデルを置き換えて、コードの中のファイル名を変えたらいいのですが、モデルがDracoというGoogleが出した圧縮ライブラリの形式でした。
こいつを理解するか、objで使えるようにloaderをインポートするか
私は後者にしました。
ここからobjloader.jsをコピーして
third_partyの下にobjフォルダー作って、その下にファイルを置きました。
あと自分で用意したobjモデルもフォルダごと置きます。
その後src>app>App.jsを開いてdracoとAstronautを全部objと任意の奴に置き換えます。
そして実行すると・・・う〜ん？ずっとぐるぐるしています。
objは26kbのめっちゃ軽い奴なので重いわけではないはず。
どっかが間違っているのかもしれないけど、わからないのでとりあえずおわり！
webの記事自体はindex.htmlを書き換えればいい。
draco変換
objがうまくいかなかったのでdracoの変換にします。
doracoの使い方はこちらを参考に。
Compress 3D model files with Draco | Yomotsu net
githubからフォルダごとダウンロードして
Cmakeというソフトもダウンロードして、
変換して、
Xcodeファイルを開いて実行して
Debugフォルダの中に生成されたdraco_encoderをターミナルで使うと変換できます。
ターミナルはイマイチ理解していませんが、cdを駆使してDebugフォルダまでいった状態で、そのフォルダの中に元のobjも置いておいて
./draco_encoder -i leo.obj -o leo.drc -cl
こんな感じで書いたら、無事出力されました。
あとはさっきやったようにファイル名のAstronautを自分のものに置き換えていきます。
一つ注意が必要なのはAstronaut_matという文章があるんですが、これはmtlファイルを開いて、一番最初に書いてある名前です。newmtlの後ろのやつ。
自分のはpaletteだったのでAstronaut_matをpaletteにします。
そうしないとちゃんとマテリアルがついてくれない。
兎にも角にも、できました！オリジナルモデル表示！！！！！
スマホでも見れます。
npmエラー
以下はnpm関係でめっちゃエラーがでたときの記録です。エラーが出た方は参考にしてください。
めっちゃエラー出ました。
（Error:EACCESが出たと思います。）
ググってこちらの記事に書いてあることを実行したのですが、治りませんでいた。
jyukoさんからコメントでアドバイスをいただきました。
> めっちゃエラー出ました。
エラーメッセージによりますけど、ありがちなのはnode-gypのビルドエラーですかね。
MacならXcodeコマンドラインツール、Windowsならwindows-build-toolsを入れると直るかもです。
それでもダメなら、Xcodeとnodeのバージョン上げてみるとか。
↓からダウンロードできます。
https://developer.apple.com/download/more/?name=for%20Xcode
その後やってみたところ、以前とは違うエラーが出ました（多分）
npm ERR! Darwin 16.7.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! Article@1.0.0 dev: `webpack-dev-server --hot --inline --port 8000`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the Article@1.0.0 dev script 'webpack-dev-server --hot --inline --port 8000'.
npm ERR! This is most likely a problem with the Article package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --hot --inline --port 8000
npm ERR! You can get their info via:
npm ERR! npm owner ls Article
npm ERR! There is likely additional logging output above.
npmでError:ENOENT, stat...と言うエラーが出た時 - unsweets.log
別のノートパソコンのほうでnpm installをしたら
-bash: npm: command not found
と出てきました。
最終的に違うパソコンでXcodeを最新の状態にして、node.jsもインストールして実行したらできました！！
結局なにが原因で、何が勝因かは分かりませんでした。
jyukoさん有難うございました！
