More than 5 years have passed since last update.

UnityARKitPluginを使ったAR顔変形

Last updated at 2019-02-09Posted at 2018-08-16

はじめに

こんにちわ。北千住デザインの渡邊です。

21_21 DESIGN SIGHTで行われている「AUDIO ARCHITECTURE展」のためにJIDO-RHYTHMという自撮りするとMusicVideoができるアプリを制作しました。Unity-ARKit-Pluginを使って制作しています。ここではその中で使われている、顔の変形のやり方について解説します。

スマートじゃない部分もあると思いますが、サンプルコードはこちらにあげました
https://github.com/kitasenjudesign/UnityARFaceDeformation

つくったアプリ

コーネリアスの曲に合わせて、４5種類ほどのエフェクトが切り替わっていきます。音に合わせて、顔を歪めるエフェクトを多用しています。iPhoneX用のアプリです。

Selfie Music Video App “JIDO-RHYTHM”
をリリースしました!! ぜひ録画してシェアしてください!!https://t.co/8W8XdT3Y29 #AudioArchitecture #Cornelius #iPhoneX #arkit #madewithunity pic.twitter.com/IbT7oiQzHq
— KitasenjuDesign (@kitasenjudesign) 2018年6月30日

使用している技術

UnityからARkitを扱うことができるUnity-ARKit-Pluginを使っています。その中にFaceTrackingの機能もあります。TrueDepthカメラを使っているため、現状使えるのはiPhoneXだけですが、顔を3D的にトラッキングすることが可能になっています。

顔変形について

FaceTrackingというと、トラッキングされたデータを元にして、別のもの（Animojiとか）を動かすということが多いかもしれません。しかし、このアプリでは自分の顔をそのまま変形させる、ということをやってました。

やりかた

カメラからの画像に対し、顔部分にトラッキングされたMeshを配置する、というサンプル（FaceMeshScene）が既に用意されているので、これを元に作ります。

このMeshに、カメラからの画像をそのままテクスチャとして貼り付け、Meshの頂点を動かすことで、あたかも自分の顔が歪んでいるように見せます。

01 YCbCrをRGBに

カメラからの入力がYCbCrなので、簡単化のためRGBにし、一度レンダーテクスチャに保存します。シェーダーはサンプルに入ってたものを少し改造。

02 Meshの目と口をふさぐ

FaceTrackingのサンプルを見るとわかりますが、顔がトラッキングされるたびに、Meshの情報がやってきます。ただ、そのメッシュは上記のキャプチャのように目と口に穴が空いています。今回はそれが都合が悪かったので、この目と口の穴を塞ぐために、頂点インデックスを追加しました。新たに作った頂点インデックスはこちら。

やり方としては一度、顔のMeshをobjデータで書き出して、Cinema4Dで読み込んだのち、目と口を塞ぎ、塞いで増えた分の頂点インデックスを取得する、というような手順でやりました

注: ネイティブだと口をふさぐパラメータがあるらしい。。。

03 シェーダー

カメラ画像をそのままテクスチャにし、メッシュの頂点座標をスクリーン座標に変換しそれをUVとして使えば良いと考えました。ただ、このメッシュを正しい顔の位置に限らず移動や回転などもしたかったので、UVの計算にModelMatrixをそのまま使うとテクスチャの位置もずれてしまいます。なので、引数でModelMatrixを渡しています。こんな感じになりました。