トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

WebAR on Tango & ARtoolkit & Article

 前回マーカーありwebARをA-frameでやりました。

bibinbaleo.hatenablog.com

今回はマーカーなし系をやります。

WebAR on ARkit

このgithubから、WebARonARkitまるまるダウンロードして、Xcodeでビルドします。

github.com

BundleIDをオリジナルにしないとエラーが出るので適当に名前を付け加えました。

そうしてiPadにアプリを入れた状態で、こちらの記事のリンクを開くとサンプルが遊べます。

Getting Started with AR on the Web  |  ARCore  |  Google Developers

 

A-frameでTango with glitch

tks-yoshinaga.hatenablog.com

マーカーありをしたときよりも簡単にできました。

あらかじめTangoのwebarのapkを端末に入れておきます。

github.com

ここにapkダウンロードできるところがあるので、このページを実機で開いてインストールしました。

そしてコード書いてどっかのサーバーに上げて、WebSRonTangoアプリを開いて、urlを入れるだけで実行できました。

f:id:bibinbaleo:20171210204556p:plainf:id:bibinbaleo:20171210204550p:plain

最初オブジェクトが画面に張り付いて、ARできなかったのですが、やり直したらできました。

前回はglitchでhttpsができるかわからなかったのでBItBalloonを使いましたが、glitchで余裕でできました><

f:id:bibinbaleo:20171210204740p:plain

objなどを入れるには左側のasstsを押してドラッグして、クリックしたらurlが発行されます。

f:id:bibinbaleo:20171210205044p:plain

f:id:bibinbaleo:20171210205047p:plain

それをこんな感じで組み込んだら表示されるはず

f:id:bibinbaleo:20171210211231p:plain

と思いきやpng(テクスチャ)が見つかりませんと言われたので、

f:id:bibinbaleo:20171210212858p:plain

こちらを参考にmtlをエディタで開いてurlをglitchのpngのurlに書き換えてみました。

vr-lab.voyagegroup.com

f:id:bibinbaleo:20171210212206p:plain

できました。

f:id:bibinbaleo:20171210212901p:plain

urlをアーダーコーダするのがめんどくさいなら、bitballoonでフォルダごとアップロードする方が楽だと思います。

組み込みwebAR

本当にやりたかったのは記事に組み込めるwebARであるWebAR-Articleです。

jyuko49.hatenablog.com

 

github.com

ここに書いてある通りにMacにコンソールでダウンロードして

git clone git@github.com:google-ar/webar-article.git article && cd article && npm install

npmを実行します

npm run dev

うまく行ったら

http://localhost:8000/public/

にアクセスしたら記事を見れます。

f:id:bibinbaleo:20171212184042p:plain

そしてスマホで見るにはArkitやArcore、Tangoのwebarのapkも入れた状態で、同じネットワーク上(無線LAN)でさっきの記事のurlのlocalhostmacのlocalIPにして見たらARできる埋め込みが実行できる

f:id:bibinbaleo:20171212184047p:plain

f:id:bibinbaleo:20171212184051p:plain

出来ました!!!!

すごい!!

モデルを置き換える

モデルを置き換えて、コードの中のファイル名を変えたらいいのですが、モデルがDracoというGoogleが出した圧縮ライブラリの形式でした。

mag.osdn.jp

f:id:bibinbaleo:20171212191831p:plain

こいつを理解するか、objで使えるようにloaderをインポートするか

私は後者にしました。

github.com

ここからobjloader.jsをコピーして

f:id:bibinbaleo:20171212191837p:plain

third_partyの下にobjフォルダー作って、その下にファイルを置きました。

f:id:bibinbaleo:20171212191842p:plain

あと自分で用意したobjモデルもフォルダごと置きます。

f:id:bibinbaleo:20171212192500p:plain

その後src>app>App.jsを開いてdracoとAstronautを全部objと任意の奴に置き換えます。

f:id:bibinbaleo:20171212191847p:plain

f:id:bibinbaleo:20171212191853p:plain

そして実行すると・・・う〜ん?ずっとぐるぐるしています。

f:id:bibinbaleo:20171212191859p:plain

objは26kbのめっちゃ軽い奴なので重いわけではないはず。

どっかが間違っているのかもしれないけど、わからないのでとりあえずおわり!

f:id:bibinbaleo:20171212200520p:plain

webの記事自体はindex.htmlを書き換えればいい。

draco変換

objがうまくいかなかったのでdracoの変換にします。

 doracoの使い方はこちらを参考に。

Compress 3D model files with Draco | Yomotsu net

githubからフォルダごとダウンロードして

 

github.com

Cmakeというソフトもダウンロードして、

Download | CMake

変換して、

Xcodeファイルを開いて実行して

Debugフォルダの中に生成されたdraco_encoderをターミナルで使うと変換できます。

ターミナルはイマイチ理解していませんが、cdを駆使してDebugフォルダまでいった状態で、そのフォルダの中に元のobjも置いておいて

./draco_encoder -i leo.obj -o leo.drc -cl

こんな感じで書いたら、無事出力されました。

f:id:bibinbaleo:20171213192153p:plain

あとはさっきやったようにファイル名のAstronautを自分のものに置き換えていきます。

一つ注意が必要なのはAstronaut_matという文章があるんですが、これはmtlファイルを開いて、一番最初に書いてある名前です。newmtlの後ろのやつ。

f:id:bibinbaleo:20171213200836p:plain

自分のはpaletteだったのでAstronaut_matをpaletteにします。

そうしないとちゃんとマテリアルがついてくれない。

f:id:bibinbaleo:20171213201006p:plain

兎にも角にも、できました!オリジナルモデル表示!!!!!

f:id:bibinbaleo:20171213201003p:plain

スマホでも見れます。

f:id:bibinbaleo:20171213201410p:plainf:id:bibinbaleo:20171213201417p:plain

npmエラー

以下はnpm関係でめっちゃエラーがでたときの記録です。エラーが出た方は参考にしてください。

めっちゃエラー出ました。

(Error:EACCESが出たと思います。)

f:id:bibinbaleo:20171207213537p:plain

ググってこちらの記事に書いてあることを実行したのですが、治りませんでいた。

qiita.com

jyukoさんからコメントでアドバイスをいただきました。

> めっちゃエラー出ました。
エラーメッセージによりますけど、ありがちなのはnode-gypのビルドエラーですかね。
MacならXcodeコマンドラインツール、Windowsならwindows-build-toolsを入れると直るかもです。
それでもダメなら、Xcodeとnodeのバージョン上げてみるとか。

Xcodeコマンドラインツールというものを入れてみました。

↓からダウンロードできます。

https://developer.apple.com/download/more/?name=for%20Xcode

stangler.blogspot.jp

その後やってみたところ、以前とは違うエラーが出ました(多分)

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

と出てきました。

qiita.com

 

最終的に違うパソコンでXcodeを最新の状態にして、node.jsもインストールして実行したらできました!!

qiita.com

結局なにが原因で、何が勝因かは分かりませんでした。

jyukoさん有難うございました!