先週の土曜日に福岡工業大学で開催されたXR制作会 in 八耐に参加してきたのでその記録。

作ろうとしたもの

ARCoreのAugmented Faces紹介記事によく出てきてる、顔がミスティークみたいなアニメーションで金色になるのと、Developersサイトに載ってる、顔の上にメッシュが透過で描画されるものを作ろうとした。

できなかったこと

イチからのARCoreアプリ作成

新規のシーンからAugmented Facesのアプリを作れなかった。UnityのARCore SDKから、Examples – Augmented Faces – Scenes – AugmentedFacesだとうまく顔認識されるのに、新しいシーンを作って、そこにAR Core Deviceを追加する方法ではうまく動かなかった。

公式サイトの手順通りに新規作成したつもりで、Exampleのシーンと、一から作ったシーンで、オブジェクトのInspectorの内容を一つずつ見比べたりしてみたけど、違いを見つけられず。
https://developers.google.com/ar/develop/unity/augmented-faces/developer-guide
新規シーンを一から作れるようになりたかったので３時間ぐらい、いろいろと試したけどどうにもならなかったのでいったんあきらめた。

透過のワイヤーフレーム表示

透過のワイヤーフレーム表示ができなかった。

「Unity ワイヤーフレーム表示」で検索して出てきたページを参考に、meshにsetIndiciesでMeshTopology.LineとかLineStripとかを設定してみた。
https://qiita.com/2dgames_jp/items/231a18454348cfebd49d

最初、ARCoreAugmentedFaceMeshFilter.csのAwake()でSetIndiciesしてたけどまったく反映されず、_UpdateMesh()のとこで都度都度更新されているようだったので、UpdateMesh()に、

m_Mesh.SetIndices(m_Mesh.GetIndices(0),MeshTopology.LineStrip, 0);

というのを追加してみたら、ひどいことになった。

点をつなぐ順番がめちゃくちゃになってしまってるぽい。何が悪いのかよくわからず。 前回記事に書いた方法でFaceTextureを描画させると、透過はしてないけど、いい感じのMeshに見えるのに。

できたこと

顔が金色になるのモドキ

顔を覆う白色マスクがブラインドチックなアニメーションで動くもの。(ワールド座標基準なので顔を傾けたりしてもブラインドは傾かない・・・)

作り方は次回に続く・・・

テーマ変えたせいか、タイトルのところアルファベット大文字しか入らない。なんでか。

ARCore 1.7がでた

ARCoreがアップデートされて1.7になったそうです。紹介記事で女の人の顔が認識されて金色になる動画がめっちゃかっこいい。しかもすごくきれいに顔の形がとれてるようにみえる。

ぜひ試してみたいということで、ひさびさUnityを起動してAugmented Facesのサンプルアプリを動かしてみました。

ARCore 1.7 adds Augmented Faces API for AR selfies, new ‘Elements’ app covering design basics

手順は完全に公式サイト通り。

UnityにARCoreのSDKを導入

Augmented Facesのサンプルシーンを開く

スクリーンショット取り忘れたので貼りませんが、スマホアプリのSNOWみたいな狐の耳と鼻がオーバーレイ表示されるというサンプルでした。

金色の顔メッシュはどうやれば・・・

Unityど素人なのでまったくどうすればいいのかわからないまま、サンプルシーンのCSファイルを読んでみたり、シーンに配置されているオブジェクトのInspectorのところを見て回った結果、なんとなくARCoreAugmentedFaceMeshFilter.csというところでAugmentedFaceのVerticesとかから顔のMeshを作り上げてるような気がした。

「Unity MeshFilter」とかでググってみたところ、MeshFilterというのがMesh情報の生まれてくるところで、MeshRendererでそれをどうやって描画するか決めるっぽい。あとシェーダーはよくわからん。

よくわからないままサンプルシーンのオブジェクトをいじりまわした結果、FaceTextureというのだけいじればよさそうなので。狐耳鼻のオブジェクトは削除。

サンプルアプリの状態だとFaceTextureに隈取みたいな絵が入ってるようなので試しに黄色一色に置き換えてみたのがこちら。

あと一歩！

FaceTextureのMaterialのShaderというところ、TransparentになってるのをVR/SpatialMapping/Wireframeに変えてみたらそれっぽくなった！(何が起きてるのか理解していない)

最後に

Unity素人すぎてなんか変なことやってる気もするけど、試してみたかったことはできたので満足。次はこのメッシュを保存してBlenderとかで表示してみたい。

あと、MeshFilterとMeshRendererのこともすこしだけ学べてよかった。AR関係なしでシンプルなプリミティブ図形を生成するようなアプリも試してみよう。

スクリーンショットをTwitterに投稿してたやつ、全部Augmentedの綴りを間違っとった。恥ずかしい。