WebAR技術選定から活用事例まで - KakumonARの場合
WebARを企画〜実装してみた記録記事。
まずは本WebARの制作に協力いただいた京都・木屋町にあるcafe la siestaならびにマスター航太さん、デバッグや撮影協力いただいたシエスタBBSのみなさんに深く感謝いたします。
企画
2021年6月某日、店内で流せるような動画を撮ってみたい、という話題に。
シエスタにはマスター考案のオリジナルカクテルがあり、12種類それぞれにドット絵のキャラクター・カクテルモンスターが存在する。
街中のいろんな場所で撮った映像にこのモンスターが出てくるような演出を加えられると楽しそうだよね、ということで、はじめはVFXを検討した。
VFX化
VFXとは、Visual Effectsの略で、CG合成したり映像編集したりして、現実に起こり得ないような視覚効果を与える技術のこと。ここではとくに実写合成のことを指す。
↓できた映像 (試しに作ってみた程度なのでけっこう雑ですみません…)
もともとは鳥居にズームインしていく撮って出しの動画に、3D化したモンスターのオブジェクトを合成している。
合成には動画内の特徴点（周りと比べて色調などが異なり特徴となるポイント）を選択し、その動きに追従するように3Dオブジェクトの位置や向き、拡大率を変えている。
参考
VFX Breakdown - Dynamo Dream Teaser
はじめよう！踏み出そう！VFX！:第1回：Blenderで踏み出す実写合成！【ステイホームVFX連動企画】
試しに作ってみたところで以下のように考えた。
- 動画内の環境光に馴染ませたり、複雑な凹凸があるマテリアルを持つオブジェクトを扱う場合などはVFXのほうが向いているかも
- きれいにオクルージョン（オブジェクトの手前に人物や障害物などがある場合にオブジェクトの一部が隠れるような表現）させるには今のところVFXのほうが精度高いかも？
- 確かに色々な動きやカット編集できるが、オブジェクトを表示させて平面に配置する、というシンプルな合成であればARのほうが向いている
- WebAR化できれば、みんなで撮った動画を持ち寄ったりできていいかも
ということで、AR化することに。
AR化
ドット絵(png)を3D化
Blenderを使って、siestaからいただいたカクテルモンスター（12体）のpng画像を3D化した。
Making
ゼペットじいさんの気分。たのしい。
参考
Blender Tutorial: 8-bit Characters
アニメーションをつける
こちらもBlenderのアニメーション機能を使ってアニメーション生成。
人型に近いモンスターはボーン(骨)を入れてリギングしてダンスさせたり、
人型じゃないモンスターは浮いてたり飛んでたり。
あまりに動きの範囲が広範囲だとAR表示した場合に見失ってしまうことがあるため注意。
最後に書き出し。
モデル形式に要注意。
Android(Scene Viewer): gltf形式
iOS(AR QuickLook): usdz形式
usdz形式への変換は、Macユーザーの場合Reality Converterが利用可能。
ここからデプロイ→実機で動きの確認→アニメーション修正→デプロイ…を納得いくまで反復。
コーディング
実際のプログラム内容については後述の記事など、各所で紹介されているためここでは省略する。
<model-viewer
ar
...
↑この"ar" を忘れないようにする！
AndroidのAR表示機能"Scene Viewer"ではこれがないと表示されない。
参考
- 【WebAR】model-viewerとは？iOS / Android開発方法
- 【WebAR】model-viewerでwebARやってみる！【SceneViewer＆AR Quick Look】 - html書く
iPhoneで検証
当たり前だがモデルが軽いとロードも早い。
カメラ起動まではすこし待たされる。
これにはデバイスやサーバー環境による通信状況の影響で差がありそう。（詳しい方教えてください）
Androidでも検証
メルカリで検証機(Google Pixel 3a、画面割れあり)を購入。
ARCore対応機種がリスト化されている(たまに対応してると思ったら表示できない！的な嘘があるらしいとの情報もあり)
参考
ARCore supported devices | Google Developers
公開(予定)
実際のページはこちら（スマホのみ）
WebARの公開にはhttps化済みのサーバー環境が必須。もしお持ちでない場合は、Githubでリポジトリをアップしていれば、Github pagesやNetlifyを使えばサクッと公開可能。
参考
問題
1. マテリアルが一部透明になってしまっている/チラつく(iPhone/Android)
2. AR表示への遷移ページのデザインがあまり融通が効かない
3. アニメーションが反映されない(Android)
1. マテリアルが一部透明になってしまっている/チラつく(iPhone/Android)
AR表示させた時に、オブジェクトの一部が透明に欠けてしまっていたり、アニメーションする時にチラつきが発生する場合がある。
わたしの場合、マテリアルのオモテ/ウラが逆になってしまっていることが原因で発生していた。
Blenderでは編集モードで右上のビューポートオーバーレイ > 面の向きにチェックを入れることで、表面が青、裏面が赤で表示されるようになる。
さらに複雑に面が重なっている箇所などは発見しづらいため、Alt+Zで透過表示にするとすぐに表裏逆の箇所が発見できる。
発見した面を選択し、Mesh > Normals > Flipで反転させることで、問題なくマテリアルが適用される。
2. AR表示への遷移ページのデザインがあまり融通が効かない
このページ
<model-viewer>の既述内で、ロード前に表示させる待機画像的なものをposter=""で指定することができる。
このposter画像上にオーバーレイして表示されるボタン位置やその背景色の指定など、ライブラリ側で既に組み込まれている部分があり、変更するにはDOMに直接書き込むか、!importantなどで上書きする必要があるようだった。
Kakumon-ARではposter画像を既存組み込みのレイアウトに合わせるようにして、画像のデザインを調整している。
3. アニメーションが反映されない(Android)
Android端末でだけ、なぜかモンスター2体だけ、静止したまま表示されてしまう。
Scene Viewer用model-viewer表示確認用の便利ツールがあるらしく、
Model Editorでエラーを見てみる
↑ちなみにここに出てくるコードを使えば自分で書かなくてもある程度自動生成してくれている。ありがたい。
gltf-ValidatorでファイルをJSON配列で見てみる
Warning
ANIMATION_CHANNEL_TARGET_NODE_SKIN
NODE_SKINNED_MESH_NON_ROOT
どうやらアニメーションがうまく設定できてなくてメッシュがうまくついてきてなさそう?
gltfはベースがJSONで構成されているファイル形式で、アニメーションは設定順に上から読み込んでいくそう。
💭そういえば「複数オブジェクトに複数アニメーション設定できたりしないかな〜」と思っていくつか設定して試してたような…？過去の愚かな自分を思い出す…。
複数のアニメーションが設定されてしまっている悪い例
アニメーションを一旦すべて消して、設定し直すことで無事解決！
総括
今回はモンスターがきれいにカメラ映像にオーバーレイされることを目標に技術選定し、
model-viewer方式でAndroid/iOS対応、モデリング+アニメーション12本ノックという、自分にとって新たな挑戦だった。WebARで平面検知をきれいに行うには今のところmodel-viewerが最適かと思うが、もっとカスタムがきかせられるようにA-frameも勉強中。
ARはその名の通り現実をさらに拡張できる魔法のような技術だと思う。来年はもっとARが世の中に浸透する一年になりますように！
Discussion