はじめに

今回は、 ARCore1.9で追加された SceneViewer を触ってみました。

SceneViewer とは、スマホのブラウザ上で AR を動かすことができる機能です。

ブラウザと ARCore 以外のアプリケーションを必要としないので、より多くの人が手軽に AR に触れられるものとなっています。

対応機種

今回は、 iPhone と Android で動かしてみました。

サンプルプロジェクト

SceneViewer のサンプルプロジェクトでどのように実装されているのかを見ていきましょう。

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
  • index.htmlの60行目で CDN 上から<model-viewer>をロードしています。
<script nomodule src = " https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js " ></script>
  • index.htmlの61行目です。
    • IE11などの古いブラウザ用の<model-viewer>をロードしています。
<model-viewer src="assets/Astronaut.glb" ar camera-controls alt="A 3D model of an astronaut" background-color="#222" ios-src="assets/Astronaut.usdz" magic-leap unstable-webxr></model-viewer>
  • examples/augmented-reality.htmlの59行目です。
    • ar
      • この属性を追加することで AR 機能が有効になる。
    • src="assets/Astronaut.glb"
      • Android 向けに表示するモデルのパスを指定
    • ios-src="assets/Astronaut.usdz"
      • iOS 向けに表示するモデルのパスを指定
    • widthheightでサイズ指定、displaypositionなどで位置の指定が可能

詳細はこちらのページをご覧ください。

動かしてみた

公式にサンプルページのリンクがあったのでこちらから試してみました。

  • 動画撮影時は出ませんでしたが、 ARCore のサンプルと同様に、平面検出のためにカメラを動かすよう指示が出ることがあります。

  • 机からはみ出してしまった場合は、床の平面が検出できるまでは、机の平面の延長に表示され、床が検出できると、床に合わせて表示されるようです。

  • 0.25〜6m の範囲で拡大縮小が可能。

iOS

iPhoneXS の Safari 上で動作している動画です。

iPhoneXS の Safari 、 Chrome 両方で動作が確認できました。

Android

Pixel3の Chrome 上で動作している動画です。

Pixel3の FireFox では動作が確認できませんでした。

Android では、インストールされている ARCore のアプリが起動するようになっています。

さいごに

高度な AR アプリ開発には向きませんが、インテリアを配置するアプリなど実際のサイズを確かめたい時には、この SceneViewer が役立つと思います。



ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある!一緒に働いてみたい!という方は下記よりご応募お待ちしております。
採用情報をみる