トマシープが学ぶ

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

8thWallでVRMモデルを表示してみる

マーカーなしWebARが作れるサイト。

AndroidでもiPhoneでも動くらしい。 

以前ほかの人が作ったコンテンツはやってみました。

bibinbaleo.hatenablog.com

モデルを出すだけなら簡単らしいので今回作ってみます。

参考

sirohood.exp.jp

speakerdeck.com

ARcamera

アカウント作って、Workspace

f:id:bibinbaleo:20190218112448p:plain

ARcamera

f:id:bibinbaleo:20190218112452p:plain

new camera

f:id:bibinbaleo:20190218112456p:plain

glbモデルをアップロードすると表示される。

f:id:bibinbaleo:20190218103803p:plain

publishでQRコードとurlが出るのでそれをスマートフォンで表示したら完成!

f:id:bibinbaleo:20190218105259p:plain

ちなみにこのQRコード、AndoridのデンソーQRコードリーダーだと読み取れなかった。LINEやiPadのカメラだと読めた。

位置移動はできるけど、大きさとか回転は変更できないのかな?

f:id:bibinbaleo:20190218111241p:plain

VRMとglb

VRMはglbファイルだから拡張子を直接変えたら良いってあった。

VroidモデルはWindowsの3Dビューワーで見たら一部のテクスチャが表示されなかったり、(多分)一度Unityで調整したものは開けなかったりした。

f:id:bibinbaleo:20190218105306p:plain

f:id:bibinbaleo:20190218105310p:plain

でも3Dビューワーで開けなくても8ThWallにアップしたら大体見れた。

f:id:bibinbaleo:20190218110744p:plain

ただしこの子は目のテクスチャが消えてた。

f:id:bibinbaleo:20190218111255p:plain

Vroidで作ったスタンドはちゃんと見れた!

f:id:bibinbaleo:20190218112014p:plain

Vroid製じゃないVRMはきちんと見れた。それにしてもみんな後ろ向く

f:id:bibinbaleo:20190218110254p:plain

f:id:bibinbaleo:20190218110251p:plain

モデルサイズは15360kb以下じゃないとだめらしい。微妙なライン

f:id:bibinbaleo:20190218105303p:plain

アニメーション

unityやblenderでアニメーションを出せるらしいです。

qiita.com

qiita.com

よくやり方が分からなかった。

Mixamo

とりあえず動けばいいというのなら、fbxモデルをMixamoにアップしてアニメーションを付けて、blenderとかUnityに読み込んで、glbに変換するのがよいのかな?

www.mixamo.com

VRMモデルをfbxに変換するのはUnityに二つアセットを入れたらできるらしい。

notargs.hateblo.jp]

こちらの記事通りにやった。

簡単にfbxを書き出せたけど、mixamoに入れたらテクスチャが表示されなかった。

f:id:bibinbaleo:20190218162137p:plain

まあいいや

Unity

書き出したfbxをUnityに戻したら目が黒くなってたのでTransportで透明にした

f:id:bibinbaleo:20190218162646p:plain

上のVRM>UniGLTFからglfで書き出し。

8thwallに上げたらポーズは取ってるけどアニメーションはしないし

f:id:bibinbaleo:20190218163126p:plain

Animator controllerを付けたらエラーが出て出力できなかった。

KeyNotFoundException: The given key was not present in the dictionary.

f:id:bibinbaleo:20190218163726p:plain

Animatorは付けちゃダメなのかな

まあポーズできたからいいか。

f:id:bibinbaleo:20190218170252p:plain

blender

mixamoでモーションを付けたfbxモデルをblenderで読み込んでglfに出す。

glb変換のためのアドオンを入れる。

github.com

glTF™ (GL Transmission Format)を Blenderで使う | UBUNIFU INCORPORATED

入れた。

アニメーションがついているはずのfbxを読み込む。

f:id:bibinbaleo:20190218165853p:plain

なんか出てる

f:id:bibinbaleo:20190218165856p:plain

glb出力したけど、アニメーションもついてないしテクスチャもない

f:id:bibinbaleo:20190218165857p:plain

最後に

AndroidからでもiPhoneからでもマーカーなしで見れるのはすごい!