見出し画像

model-viewerを使ってAR年賀状をつくってみた話

Takumi HASEGAWA (unshift Inc.)

2020年最初の投稿です。あけましておめでとうございます。
相変わらずnoteを活用しきれていないです。

・・・

フリーランスとして独立してからなんだかんだで毎年、年賀コンテンツをつくっておりまして、今年で4回目となりました。

構想段階から今年はWebAR的なものをやりたいなと思っていました。というわけでできたのがコレ。

タイトルの通り、model-viewerという3Dモデルを表示するためのフレームワークを使用しています。

model-viewerとは

model-viewer
https://modelviewer.dev/

model-viewerはGoogle製のフレームワークで、
Androidでは「Scene Viewer」
iOSでは「Quick Look AR」という機能をそれぞれ使って
定められたフォーマットの3DモデルデータをARで表示しれくれます。
また、ページアクセス時はWebGLを使用してモデルデータをプレーンな背景上に表示してくれます。

「Scene Viewer」も「Quick Look AR」も言ってしまえば3Dモデルを表示するだけの機能のみで、JavaScriptを使用してどうこうできる類のものではありません。

ブラウザから立ち上がるものの、ARボタンをクリックすると、ブラウザからAR専用カメラが立ち上がり、3Dモデルが表示されるだけなので、WebARかと言われるとちょっと微妙かもしれません。

ただ、特定のフォーマットの3Dモデルを用意すれば、難しいことを考えることなく、かつアプリではなくブラウザから立ち上がるAR体験ができるコンテンツが手軽に作れる、というものです。

Scene Viewer

前述のとおり、Scene ViewerはAndroidでブラウザからARで3Dモデルを表示できる機能で、glTF (.glb)形式で保存した3Dモデルを表示できます。

Quick Look AR

WWDC 2018の資料

Quick Look ARはiOS版Scene Viewerという感じの機能です。usdzという独自の形式の3Dモデルを表示できます。

Scene ViewerとQuick Look ARが
勝手にやってくれること

どちらの場合でも、3Dモデルを作る際にPBRのマテリアルを設定するのが必須なのですが、それだけであとは色々やってくれます。

まずは影。3Dモデル側では何もしなくても、勝手に地面に影を落としてくれます。Scene Viewerではセルフシャドウも落としてくれるようです。

今回の3Dモデルでは、金属光沢のあるマテリアルを使用していますが、そのマテリアルの環境マップのテクスチャも勝手に設定してくれます。

簡単なアニメーションも設定可能です。

アニメーションについて

今回で一番困ったのがアニメーションです。今回の体験としては

・ページアクセス時(WebGL)ははがきのみ表示されている状態
・ARでオブジェクトを配置した瞬間にアニメーション開始
・アニメーションの再生が終わったらその状態でキープ

というのが理想でしたが、叶いませんでした。
(以下の検証結果ですが、Androidではあまり検証時間が取れなかったのでもしかしたら間違っているかもしれません。)

できなかったこと

※Quick Look ARは「QL」Scene Viewer は「SV」とします。

1. アニメーションを再生終了後に止める (QL/SV)
2. 複数のオブジェクトに設定したアニメーションを同時再生 (SV)
3. 空間にオブジェクトが配置された瞬間に再生開始 (QL)
4. WebGLとARの3Dモデルデータを分ける (SV)

順に詳しく説明します。

1. アニメーションを再生終了後に止める (QL/SV)

本当はアニメーションを再生後、最後のキーフレームの状態を保持したかったのですが、SVではそもそもアニメーションがループのみ、SVでは一度再生して停止できるけど、最初のフレームの状態で停止、となってしまいました。

2. 複数のオブジェクトに設定したアニメーションを同時再生 (SV)

QLでは複数のオブジェクトにそれぞれ設定したアニメーションを同時に再生していますが、SVでは、データ上の一番最初のアニメーションしか再生してくれないようです。

3. 空間にオブジェクトが配置された瞬間に再生開始 (QL)

これは細かいことですが、QLでカメラが起動してモデルを表示する平面を認識している最中、3Dモデルデータがうっすらと表示され、かつアニメーションも再生されています。

配位された瞬間、アニメーションもそのまま再生された状態になっているので「配置された瞬間にアニメーションを開始」というのができませんでした。

4. WebGLとARの3Dモデルデータを分ける (SV)

model-viewerの仕様として、ページアクセス時はWebGLで3Dオブジェクトを表示してくれるのですが、WebGLではusdz形式のモデルを表示できないので、iOSの場合はsrc属性にglTF、iosSrc属性にusdz形式のモデルをそれぞれ指定することにより、WebGLとQLでそれぞれのオブジェクトを表示しています。

ですが、AndroidではWebGLもSVもsrc属性に指定された同じglTFを使用するのでWebGLの状態ではがきのみ表示して、ARでアニメーション付きで表示する、ということができませんでした。

よって、Androidではすべてのオブジェクトが表示された状態でくるくる回っているモデルデータを使用した簡易版となっています。

結果、今回やったこと

・blenderで3Dモデリング
・以下のパターンでglTF (.glb)形式でエクスポート
　A. はがきだけの状態で回っているver. (iOS WebGL表示用)
　B. フルのアニメーションがついたver. (iOS QL表示用)
　C. オブジェクトがすべて表示された状態で回っているver. (Android WebGL/SV表示用)
・上記AのモデルをglTF形式からusdzへコンバート (※)
・UAを見て、iOSとAndroidで出し分け
　上記に対応していないデバイス (PCなど)は
　QRコードを表示してモバイルへ誘導

※glTFからusdzへのコンバートですが、僕が作ったときはコンバータ用のpythonプログラムが提供されていただけなんですが、今見たら下のページの一番下に「Reality Converter」というのが提供されていますね (未検証)。

という感じになりました。

・・・

大したことは書いてませんが、最後にソースコードも共有しておきます。



サポートいただければ、レッドブルを飲んでより頑張れると思います。翼を授けてください。