トマシープが学ぶ

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

トップ > AR > 【WebAR】model-viewerでwebARやってみる！【SceneViewer＆AR Quick Look】

【WebAR】model-viewerでwebARやってみる！【SceneViewer＆AR Quick Look】

AR ARkit ツール・サービス紹介

 WebARの種類について、この記事で調べたときに、新しくGoogleが主にAndroidでやっているmodel-viewerというWebARの技術を知りました。

bibinbaleo.hatenablog.com

試してみます！

model-viewer

model-viewerについてはjyukoさんの記事が詳しいです。

www.jyuko49.com

github

github.com

細かい説明ドキュメント。タグとか

modelviewer.dev

model-viewerとSceneViwerという言葉が混在していますが

Using <model-viewer> to launch Scene Viewer

Using Scene Viewer to display interactive 3D models in AR from an Android app or browser

だそうです。

Google：Apple

Android：ios

ARcore：ARkit

Scene Viwer：AR Quick Look

こんな感じの対応かな？

Scene Viwer、AR Quick LookはARを見るなにか

AR Quick Lookはここで使った。

bibinbaleo.hatenablog.com

デモ

公式のデモページがこちら

model-viewer.glitch.me

このページにARcoreもしくはARkit対応している端末でアクセスして、見下の四角いマークを押すとARできます。

 

Androidだとこんな感じ

右下のキューブボタンを押す

周囲のスペースに表示するを押す

すると平面検知の指示が走る。

できた！

ios

iPadだとこんな感じ

作る

モデル用意

Android(SceneViwer）で見るときはglb or glft形式の３Dモデル、

iosで見れるようにするにはusdz形式のモデルが必要だそうです。

 

今回はWebARの利点を生かしてどちらにも対応したいので、どちらも用意します。

glb・gltf

 glbはobjをblenderで変換しました

f:id:bibinbaleo:20191130224114p:plain

f:id:bibinbaleo:20191130224117p:plain

usdz

usdzは昔objをコマンドラインで変換したけど、テクスチャがついてなかった。

こちらの記事を参考にテクスチャもコマンドラインで付ける

lovewcycle.com

xcrun usdz_converter leo.obj leo.usdz -color_map leo.png

こんな感じでテクスチャがつくはず。

ただ私はXcodeの許可がアーダーコーダとか言われた

xcrun: error: sh -c '/Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk -find usdz_converter 2> /dev/null' failed with exit code 17664: (null) (errno=No such file or directory)

xcrun: error: unable to find utility "usdz_converter", not a developer tool or in PATH

 

結局こちらのサイトで変換した。obj,mtl,pngを入れたフォルダのzipをアップしたらできた

usdz.viewar.com

f:id:bibinbaleo:20191130233145p:plain

f:id:bibinbaleo:20191130233207p:plain

html書く

jyukoさんのコードと公式のデモページ、ARcoreのページ、githubなどを参考にhtmlを書きました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ModerlViewerを使ったWebARページ</title>
  </head>
  <body>
  <script type="module"
      src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
    
  </script>
    
    <model-viewer  
    ar
    alt="Leoモデル"
    src="leo.glb" 
    ios-src="leo.usdz" 
    style="width:800px;height:1000px;"                  
                  
                  background-color="#70BCD1"
                  shadow-intensity="0.7"
                  camera-controls
                  interaction-prompt="auto"
                  auto-rotate ar magic-leap>
                  
    
    </model-viewer>
  </body>
</html>

https://github.com/bibinba/WebARWithModelViewer/blob/master/index.html

model-viwer.jsの読み込み

https://unpkg.com/@google/model-viewer/dist/model-viewer.js

この部分は

https://unpkg.com/@google/model-viewer@v0.7.2/dist/model-viewer.js

みたいにバージョンを書いてもいい。でもアップデートされていくみたい

https://unpkg.com/@google/model-viewer/dist/model-viewer.js

にしたら勝手に最新になるっぽい？

modelの場所

srcにモデルの場所を書く。

今回はhtmlと同じ階層にいたので名前だけでいいはず

どこかのサイトにアップしてあるものなら、urlを貼ってもいい

src="https://github.com/bibinba/Haihu/releases/download/Leo/leo.glb"

githubに置いたurlでできた！

 

下の記事には絶対パスじゃないとダメって書いてた。

ブラウザでAR、Google検索で動物が出てくるアレを自前3Dモデルで出来る - Qiita

 

iosで見れるようにするにはios-src

src="leo.glb" ios-src="leo.usdz"

canvasサイズ

canvasで画面サイズを変える

難しい

こんな感じになった。くるくる回る。canvasを大きくしても右下のマークが大きくならない

サーバーにアップ

公式のデモページはglitchで作っていますね。

自分のサーバーを持っていないと、WebARのページをどこに置くか毎回迷うのですが、今回は公式と同じようにglitchにしようかな？

glitchは昔使いました。

bibinbaleo.hatenablog.com

と思ったけど、githubに作ったほうがポートフォリオ的に後々よさそうだからgithubにしよ～

jyukoさんはS3使ってる。

httpsになれば何でもいいと思う

私が今回作ったリポジトリはこちら

github.com

github pageの機能を使って作ったページがこちら

bibinba.github.io

コードでも書いたけど、htmlとモデルデータは同じ階層に置いた

f:id:bibinbaleo:20191130231017p:plain

完成！

Androidで見るとこんな感じ

iPadでも見れる

最後に

モデルデータ用意するのがめんどくさいけど、それ以外はいい感じなのでは？

webの人間じゃないから、webでの使いやすさが分からないけど。

ほかの方の記事

qiita.com