はじめに
こんにちわ。北千住デザインの渡邊です。
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”
— KitasenjuDesign (@kitasenjudesign) 2018年6月30日
をリリースしました!! ぜひ録画してシェアしてください!!https://t.co/8W8XdT3Y29 #AudioArchitecture #Cornelius #iPhoneX #arkit #madewithunity pic.twitter.com/IbT7oiQzHq
使用している技術
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を渡しています。こんな感じになりました。
変形サンプル
変形サンプルをいくつか作りました。頂点シェーダーを使って変形させています。立体的な変形が可能です。
01 小さい顔
頭の辺に縮小して顔を置いているだけ。
02 ノイズで歪む
Z方向に押し出しつつ、ノイズで歪めている。
顔のつなぎ目が破綻しないようにDisplacementMap的な画像で変形範囲を制限している。
03 諭吉
同じくDisplacementMap的な画像で目と口を動かしている。
04 トゲトゲ
同じくDisplacementMap的な画像を作ってとんがらせた。
球面座標にして頂点を放射状に伸びるようにしている。
困ってるところ
FaceTrackingを使っていると、たまにフリーズしてしまう現象があります。
解決方法がわかったらどなたか教えてください。。
おわりに
以上、AR顔変形についてでした。このFaceTrackingは、まだ色々使えそうです。
あと、会社をやめ、フリーランスになったので、お仕事募集中です