ARCoreが1.9になりました。代表的な機能として、WebブラウザでもARCoreの機能が使えるようになる「SceneViewer」が導入されました。
今回はScene Viewerを試すための環境構築手順をまとめました。
動作環境は以下の通りです。
Android 9.0
iOS 12.2
- 1. ARCore 1.9の新機能
- 2. Scene Viewerを使ってみる
- 3. Scene Viewerの環境構築をする
- 4. (未解決)AndroidでScene Viewerが動かないことの調査
- 5. おわりに
1. ARCore 1.9の新機能
githubのリリースページに書いてあります。主に、Augmented ImagesとScene Viewerです。
- ARCore can now track moving Augmented Images. Previously, images were assumed to not move, and their pose would only be updated infrequently.
ARCore can continue tracking images even though they are longer visible to the camera. Use AugmentedImage#getTrackingMethod() (Java) or ArAugmentedImage_getTrackingMethod() (NDK) to determine whether the image is currently being tracked by the camera (FULL_TRACKING), or is being tracked based on its last known pose (LAST_KNOWN_POSE).
- Adds the Scene Viewer feature, which can be used to view 3D models in AR from most Android browsers with theweb component.
引用元：Releases · google-ar/arcore-android-sdk · GitHub
Augmented imagesについては、こちらで詳しく書かれているので参照ください。記載の通り、相当に性能が上がっています。
ARCore v1.9で強化されたAugmented Imageについて - じゅころぐAR
Scene Viewerは後述します。
なお、ARCoreを使うにはAndroid スマートフォンにGoogle提供のARCore用のapkを入れておく必要があります。それはこのページで公開されています。
Using Scene Viewer to display interactive 3D models in AR from an Android app or browser
apkはadbコマンドでこのようにインストールします。
$ adb install <your path>/ARCore_1.9.0.apk
あるいは、apkファイルをスマートフォンにコピーし、スマートフォン側の「ファイル」アプリなどから直接インストールすればOKです。
SceneViewerはARCore対応のAndroidスマートデバイスだけでなく、iOSデバイス、MagicLeap、WebXR DeviceAPI対応ブラウザでも動きます。
(私が確認できたのはAndroid、iOSのみです)
2. Scene Viewerを使ってみる
まず、AndroidスマートフォンまたはiOSデバイスのブラウザアプリから、以下のサイトにアクセスします。それぞれ、モデル横の立方体のようなボタンをタッチします。
GitHub - google/model-viewer: Easily display interactive 3D models on the web and in AR!
Androidの場合
「周囲のスペースに表示する」をタッチすると、ARCoreのアプリが別途起動し、ARモードになります。
iOSの場合
「AR」をタッチすると、ブラウザに重なるような形でカメラのViewerが表示され、ARモードになります。
どちらの場合もARモードでできることは、カメラ越しにオブジェクトを配置する(オブジェクトをタッチして動かす)、拡大縮小する(画面をピンチ操作)ができます。
3. Scene Viewerの環境構築をする
私自身がまだnode.jsなどのフロントエンド系の開発に詳しくないのと、なぜかGoogleから提供される開発向け情報がいくつか散らばっていたので、ざっと手順をまとめました。なお、この記事執筆時点ではAndroidでの動作確認ができていません。
3.1 サンプルコードの入手
ここから取得します。
GitHub - google/model-viewer: Easily display interactive 3D models on the web and in AR!
ちなみに、Google ARCoreの公式HPは以下のURLですが、ここからScene ViewerのGithubリンクを見つけられませんでした。(どこかにあるのかもしれませんが)
3.2 必要なライブラリの取得、Typescriptのコンパイル
node.jsがインストールされていない場合、事前にインストールします。
ターミナルを起動し、以下のように入力します。
$ cd <source code path> $ npm install $ npm run build
npm installは、Scene Viewerの機能を実現するための必要なライブラリ(package.jsonに書かれています)を取得し、node_modulesフォルダに格納します。
Scene Viewerの機能を提供するサーバとしてのサンプルコードは、Typescriptで書かれており、src/に格納されています。Typescriptのままでは動かないので、javascriptにコンパイルします。 ここでのnpm run buildは、tsconfig.jsonに記載された指示に沿って、Typescriptのソースコード(srcフォルダに入っているのが通例)をjavascriptのソースコードにコンパイルするものです。
3.3 サーバを起動する
ターミナルから以下を入力します。
$ npm run serve > @google/model-viewer@0.3.1 serve /Users/username/Documents/ARcore/sceneviewer_sample/model-viewer-master > ws Serving at http://pcname.local:8000, http://127.0.0.1:8000, http://192.168.0.9:8000
同一ネットワーク内で表示されたURLにアクセスすれば、先ほどと同じ動作が確認できます。
後述のようにAndroidではうごかせなかったのですが、iOSではモデルを差し替えて、別のモデルで試すこともできました。
別のモデルに差し替える場合、examples/augmented-reality.htmlの59行目付近にあるコードで読み込むモデルのファイル名を変更します。たとえば、ios-srcにTVモデルのファイル名を書きました。 (元はAstronaut.usdz)
<model-viewer src="assets/Astronaut.glb" ar camera-controls alt="A 3D model of an astronaut" background-color="#222" ios-src="assets/retrotv.usdz" magic-leap unstable-webxr></model-viewer>
このファイルは以下のサイトから取得しました。
https://developer.apple.com/jp/arkit/gallery/
4. (未解決)AndroidでScene Viewerが動かないことの調査
Androidではこのような画面が表示され、ARCoreのアプリに切り替わりませんでした。
色々試したのですが、オレオレではない証明書を持ったhttpsのサイトを作る必要がありそうな感触です。参考までに、試したことを書いておきます。
4.1 local-web-serverの起動方法を変更し、httpsサイトとする
3.3の bash npm run serve というコマンドは、package.jsonに書いてある通り"ws"です。wsとはWeb Socketの略で、node_modules/local-web-serverフォルダに実体があります。
ここのReadme.mdにhttpsでの起動方法がありました。ただ、自分のターミナルにはwsを入れていないので、package.jsonの"scripts"の中に新しく追記します。
"scripts": { "途中は省略。serveは変更なし":"", "serve": "ws", "serve-https": "ws --https", "以後省略":"",
新たにserve-httpsを追加しました。名称は何でもよく、追加する場所も指定はありません。追加後、ターミナルから以下のように入力すると、今度はhttpsとしてサイトが開きます。
$ npm run serve-https > @google/model-viewer@0.3.1 serve-https /Users/username/Documents/ARcore/sceneviewer_sample/model-viewer-master > ws --https Serving at https://pcname.local:8000, https://127.0.0.1:8000, https://192.168.0.9:8000
ただし、これでも状況は変わらず、AndroidのScene ViewerでARモードは使用できませんでした。
4.2 Githubにプロジェクトをアップロードしてhttpsサイトとする
Githubには、リポジトリをサーバのように使う機能があります。例えば以下でわかりやすくまとめられています。
HTTPSが無料で使えるWebサーバーとしてGitHubを使う。 - 晴歩雨描
しかし、npm run buildしたあとの一部のファイルが100MBを超えたため、git pushに失敗しました。
remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com. remote: error: Trace: 6d2aa8335ab1fb3d37fd4728a4a64977 remote: error: See http://git.io/iEPt8g for more information. remote: error: File node_modules/puppeteer/.local-chromium/mac-609904/chrome-mac/Chromium.app/Contents/Versions/72.0.3617.0/Chromium Framework.framework/Versions/A/Chromium Framework is 130.40 MB; this exceeds GitHub's file size limit of 100.00 MB To https://github.com/flushpot1125/arcore_sceneviewer_sample.git
以下で解説されている方法で解決する可能性があります。試せたら追記します。
GitHub に100MB超のファイルを置く -- git push に失敗してからの対処方法 - Qiita
4.3 他のglTF形式のモデルと差し替える
オブジェクトが悪い、ともみえるので、MicrosoftのRemix3DでglTF形式で公開されている3Dデータをいくつか取得して、examples/augmented-reality.htmlの59行目付近を変更しましたが、結果は変わりませんでした。
5. おわりに
一通り試しましたが、肝心のAndroidでは自分の環境での動作確認ができていない状態です。確認できたらまた追記します。
