はじめに
今回は、 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>
をロードしています。
- IE11などの古いブラウザ用の
<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 が役立つと思います。