Google I/O 2019で発表になったScene Viewerを試してみました。
2020/7/24追記
新しい記事を書きました。
www.jyuko49.com
はじめに
用語・名称について
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が起動します。
Scene ViewerはARCoreの機能のため、Webページの遷移ではなくアプリ起動のような挙動になります。
ただし、(現時点では手動アップロードが必要なものの)ARCoreはAndroidにプリインストールされているので、ユーザにアプリのインストールを強いる必要はありません。
Scene Viewerが起動した直後はARモードになっておらず、3Dモデルのビューアになります。
ARモードにするには、"周囲のスペースに表示する"をクリックします。
ARモードに切り替わると、平面を検知するようガイドが表示されます。
平面の検出に成功すると、3Dモデルが表示されます。
タッチ操作で移動、サイズ変更、回転が行えます。
使い方
デバイスの準備
ARCoreを1.9にアップデートする
Scene ViewerはARCoreを1.9にアップデートすると使えるようになります。
本記事執筆時点では手動アップデートが必要なため、方法は以前の記事を参照ください。
コンテンツの準備
3Dモデルを用意する
<model-viewer>
のsrc
に指定できるフォーマットは、glTF/GLBです。
iOSと両対応させる場合にはUSDZファイルも用意して、ios-src
で指定します。
VRアバター等で利用されているVRMはGLBをベースにしたフォーマットのため、拡張子を.vrm
から.glb
に変更することで表示できるケースがあります。リンク先に記載の通り、VRM独自の追加情報は機能しなくなります。
拡張子の変更だけで問題なく動くかはモデルによって異なり、UniVRMで作られたプロ生ちゃんのVRMモデルは表示できましたが、ニコニ立体ちゃんはScene Viewerの起動時にエラーになってしまいました。
他者が作成・公開したモデルを利用する場合には、著作表示(クレジット)の要否、再配布の可否は確認しておきましょう。
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のwidth
、height
が効くのでタグに直接書いても動作します。
例:タグで直接style指定
<model-viewer src="path/modelName.glb" ar style="width:500px;height:600px;"></model-viewer>
その他、<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形式を経由する感じでしょうか。
Tipsとしては、
・拡張子.vrmだと動作しないので.glbにすると動く
— jyuko (@jyuko49) 2019年5月21日
・拡張子を.glbに変更してもエラーになるモデルがある
・model-viewerを埋め込んだページがhttpだとARにならない
また、VRMモデルを表示して気になった点として、
・なんか光沢がヤバい
— jyuko (@jyuko49) 2019年5月21日
クレジット
本記事内のコンテンツでは、暮井 慧(プロ生ちゃん)仮VRM版を利用ガイドラインに従って利用しています。