はじめに

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

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

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

対応機種

• ARCore 対応の Android

• ARKit 対応の iPhone ※リンク先の最下部

• Magic Leap

• WebXR に対応したブラウザ

今回は、 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 向けに表示するモデルのパスを指定
  • width、heightでサイズ指定、display、positionなどで位置の指定が可能

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

動かしてみた

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

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

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

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

iOS

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

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

Android

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

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

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

さいごに

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

Tweet