じゅころぐAR

ARのブログ

<model-viewer>を使って3DモデルをScene ViewerでAR表示する

Google I/O 2019で発表になったScene Viewerを試してみました。

はじめに

用語・名称について

Google I/Oで発表されたARCoreの新機能Scene Viewerですが、Githubのリポジトリ<model-viewer>となっています。

上記の名称がなぜ違うのか、正しく理解する上でARCoreのサイトに以下の一文があります。

Using <model-viewer> to launch Scene Viewer

日本語訳すると、"<model-viewer>を使用して、Scene Viewerを起動する"となります。

つまり、HTMLに3Dモデルのビューを埋め込むためのWebComponentの名称が<model-viewer>、ARCore対応デバイスで<model-viewer>の表示を行う際に起動するARビューアがScene Viewerになります。
また、<model-viewer>はARCoreのScene Viewer以外にARKitのAR Quick Look等にも対応しており、OSを問わず利用できるWebコンポーネントになっています。

<model-viewer>をAR表示する機能として、

Android iOS
Scene Viewer AR Quick Look

があるということです。

名称が似ていて混乱を招きやすいので、正しい用法を心がけたいところ。

Scene Viewerの概要

Webブラウザ<model-viewer>を使用したHTMLを表示すると、3Dモデルが<canvas>で表示されます。
ARCore対応のデバイスでは<canvas>の右下にアイコンが表示されており、クリックするとScene Viewerが起動します。

f:id:jyuko49:20190522170509p:plain
Web View

Scene ViewerはARCoreの機能のため、Webページの遷移ではなくアプリ起動のような挙動になります。
ただし、(現時点では手動アップロードが必要なものの)ARCoreはAndroidにプリインストールされているので、ユーザにアプリのインストールを強いる必要はありません。

f:id:jyuko49:20190522135422p:plain
launch to Scene Viewer

Scene Viewerが起動した直後はARモードになっておらず、3Dモデルのビューアになります。
ARモードにするには、"周囲のスペースに表示する"をクリックします。

f:id:jyuko49:20190522140006p:plain
First View on Scene Viewer

ARモードに切り替わると、平面を検知するようガイドが表示されます。

f:id:jyuko49:20190522140639p:plain
Find Plane

平面の検出に成功すると、3Dモデルが表示されます。
タッチ操作で移動、サイズ変更、回転が行えます。

f:id:jyuko49:20190522141546p:plain
AR View

使い方

バイスの準備

ARCoreを1.9にアップデートする

Scene ViewerはARCoreを1.9にアップデートすると使えるようになります。
本記事執筆時点では手動アップデートが必要なため、方法は以前の記事を参照ください。

コンテンツの準備

3Dモデルを用意する

<model-viewer>srcに指定できるフォーマットは、glTF/GLBです。
iOSと両対応させる場合にはUSDZファイルも用意して、ios-srcで指定します。

VRアバター等で利用されているVRMGLBをベースにしたフォーマットのため、拡張子を.vrmから.glbに変更することで表示できるケースがあります。リンク先に記載の通り、VRM独自の追加情報は機能しなくなります。
拡張子の変更だけで問題なく動くかはモデルによって異なり、UniVRMで作られたプロ生ちゃんVRMモデルは表示できましたが、ニコニ立体ちゃんはScene Viewerの起動時にエラーになってしまいました。

f:id:jyuko49:20190522131946p:plain

他者が作成・公開したモデルを利用する場合には、著作表示(クレジット)の要否、再配布の可否は確認しておきましょう。

HTMLを用意する

ミニマムのコードをベタにHTMLで書いてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>model-viewer demo</title>
  </head>
  <body>
    <script type="module" src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js"></script>
    <model-viewer src="path/modelName.glb" ar></model-viewer>
  </body>
</html>

はい、これだけです。

<body>の1行目でmodel-viewer.jsをCDNから取得しています。
2行目が<model-viewer>タグで、srcが表示する3Dモデルのパス、arがScene Viewerの起動を有効にするattributeになります。iOS対応する場合は、ios-srcでUSDZファイルのパスを追記します。

ただ、上記のままだと<canvas>が小さいので、サイズを指定した方がよいです。
方法はいくつかありますが、styleのwidthheightが効くのでタグに直接書いても動作します。

例:タグで直接style指定

<model-viewer src="path/modelName.glb" ar style="width:500px;height:600px;"></model-viewer>

f:id:jyuko49:20190522170025p:plain
style指定なし
f:id:jyuko49:20190522170050p:plain
style指定あり

その他、<model-viewer>で利用可能なattributeはこちらのサイトにまとまっています。
altテキストの指定、モデルの自動回転、影の強さ、照明の強さ、preloadなど、割と色々できます。
https://googlewebcomponents.github.io/model-viewer/

著作表示を求められている3Dモデルを使用する場合は、HTMLのどこかにクレジットを記載しておきましょう。

サーバにアップする

作成したコンテンツをブラウザで閲覧するには、Webサーバで公開する必要があります。ここで注意すべきは、<model-viewer>を埋め込んだHTMLをHTTPSで取得していないと、Scene Viewerが起動しないという点です。

自己証明書を作成してローカルサーバでHTTPSで通信する方法もググれば出てきますし、Webサーバを構築して証明書を入れてもいいのですが、Amazon S3にHTMLと3Dモデルをアップするのが簡単です。
S3にアップしたHTMLファイルには自動で払い出されるオブジェクト URLでアクセスでき、オブジェクトURLはHTTPS前提になっているので、ファイルをS3に置いて公開設定にするだけで利用できます。

サーバ利用の前提として、利用ライセンスが再配布NGの3Dモデルはアップしないように注意しましょう。第三者がダウンロードできる状態でのサーバ公開は、再配布とみなされ規約に違反する可能性があります。

まとめ

指定フォーマットの3Dモデルさえ用意できれば、HTMLに<mode-viewer>を埋め込むのは超簡単なので、問題は3Dモデルの用意とフォーマット変換です。
glTFはBlenderとかもサポートしているのでなんとかなりそうですが、USDZはOBJ形式を経由する感じでしょうか。

.objから.usdzを作成 | rkLab.net

Tipsとしては、

また、VRMモデルを表示して気になった点として、

クレジット

本記事内のコンテンツでは、暮井 慧(プロ生ちゃん)仮VRM版利用ガイドラインに従って利用しています。