本記事は、NTTドコモ R&D Advent Calendar 2023 の22日目の記事です🤶
- はじめに
- ①「TikTok Effect House」について
- ② 「TikTok Effect House」でサンタになれるARエフェクトを作る
- ③ 「TikTok Effect House」で3DモデルをAR表示する
- 制作できたもの
- まとめ
はじめに
自己紹介
こんにちは。NTTコノキューの「さえもん」こと、木村です！
NTTコノキューは、昨年10月にNTTドコモから生まれた、
XR（VR/AR/MR技術の総称）技術を専門に事業を行う新会社です。
普段の業務ではバーチャルPFの開発をしたり、
今年12月にNTTコノキューのテックブログ「QOMPASS LOGS」を立ち上げたりしました。
本記事の目的
突然ですが、ARと聞いた時、皆さんはどのような活用事例を思い浮かべますか？
おそらく「Pokémon GO」のようなARを使ったゲームや、「HADO」のようなARスポーツ、
あとはGoogle MapのARナビゲーション機能のようなものが思いつくかと思います。
ただ、私が3年半くらい前からXRに携わってから、
ひしひしと感じているのは、そのコンテンツ制作のハードルの高さです。
私自身も、学生時代はWeb開発がメインだったのもあり、
最初は「Unityとか3DCGとか難しそうだな〜」と思っていました。
コンテンツ制作において、イラストを描いたり動画を制作することは 一般的にも大きく普及し、
pixivのようなイラスト投稿PFや、YouTubeのような動画投稿PFは、大きく伸びています。
NTTコノキューの1社員としては、ARを含むXR業界を盛り上げていくためには、
コンテンツ制作の手軽さが鍵になるのではないかと考えています。
XRコンテンツはUnityなどを使い専門のエンジニアが開発するイメージがあるかもしれませんが、
コードを書かずに手軽に作れる環境もあることを発信したいと思い、今回記事を書くに至りました。
本記事の内容
前置きが長くなってしまいましたが、本記事では、以下の内容を解説します。
手軽にARエフェクトを制作できる「TikTok Effect House」について
「TikTok Effect House」でサンタになれるARエフェクトを作る
「TikTok Effect House」で3DモデルをAR表示する
なぜTikTokを選んだのかというところは大きな理由はありませんが、
（おそらくTikTok利用ユーザ大半の）Z世代がARコンテンツ制作に関心を持ってくれると
嬉しいなと個人的に思ったからです。
①「TikTok Effect House」について
TikTokとは、短い動画を作成し投稿できる、短尺動画プラットフォームです。
アプリから提供される特殊効果を活用して、ユニークな動画を誰でも作ることができ、
エンターテインメントだけでなく、企業のビジネスでの活用もされています。
TikTokで動画を作成する際にはエフェクト機能を使うことができ、
リアルタイムにARでメイクアップ効果を加えたり、顔を変形したりすることができます。
このエフェクト機能をユーザが制作・公開できるツールとして、
2022年に「TikTok Effect House」（以下、Effect House）がリリースされました。
② 「TikTok Effect House」でサンタになれるARエフェクトを作る
それでは早速、こちらの公式ドキュメントを参考にしながら、
Effect HouseでARエフェクトを作ってみましょう！
Effect Houseのダウンロード
Effect Houseは、以下のページからダウンロードすることが可能です。 https://effecthouse.tiktok.com/download
すでにバージョン3.6.0もリリースされているようなのですが、
うまくDLリンクが見つけられず、バージョン3.5.1のM2 Mac用のツールを利用しました。
※バージョン3.5.0から、日本語UIの利用が可能です。
なお、利用にはTikTokのアカウントが必要になります。
プロジェクトの作成
ログイン後、ホーム画面が表示されますので、
左のメニューから「プロジェクトを作成」をします。
作成をすると、こんな感じの画面になり、ここで制作をしていきます。
制作したフィルターはツール上でプレビューをすることができ、
モデルさんが、様々なポージングや表情をしてくれます。
今回は、金髪のお姉さんを選びます。
オブジェクトの追加
エフェクトを作成するために、オブジェクトを追加していきます。
画面左のヒエラルキー（階層）から「オブジェクトを追加」を選択すると、
各カテゴリから利用したいオブジェクトを追加することができます。
フェイスマスクの設定
まずはTikTokでもお馴染みとも言える、映えるメイクアップ加工をしていきましょう。
「フェイスエフェクト」から、例えば「唇のエフェクト」を選択して追加します。
色や透明度はカスタムでき、プレビューで再生すると、モデルさんの唇が色づきます。
すごく簡単です。
そのほか、「目の色」や「まつげのエフェクト」も加えることができ、
簡単に映えるメイクをすることができました。
フェイスシェイプの設定
メイクだけでなく顔そのものを変形することができるのが、TikTokの強みです。
オブジェクトの追加画面で「フェイスシェイプ」から「フェイスストレッチ」を選択して
追加することで、顔の変形を設定することができます。
「フェイスストレッチ」では、顔の複数頂点を編集することで、パーツの比率を変更することが可能です。
今回はとにかく映えたいので、目を大きめにしていきます。
この編集作業は、なんだかBlenderでメッシュをいじっているときのような気持ちになりました。
お姉さんも少し童顔になりました。
セグメンテーションの設定
次に、セグメンテーションにより、顔以外の特定のパーツへの加工をします。
セグメンテーションとは、画像に写り込んでいる被写体を識別し、
ピクセル単位でどのクラスに分割されるかを識別することです。
この技術はARにも使われており、例えば識別した特定のパーツ（手、足など）上に
3Dモデルを重畳する処理をすることで、バーチャル試着のようなことが可能となります。
「セグメンテーションエフェクト」のオブジェクトを追加し、
「ヘアセグメンテーション」では髪の毛を識別して少し茶髪にして、
「衣服セグメンテーション」では服を識別してサンタらしい赤い服にしました。
そのほかエフェクトの設定
詳しい説明は割愛しますが、「後処理エフェクト」と、
テキストの3D表示で、よりクリスマスっぽい演出をしていきます。
③ 「TikTok Effect House」で3DモデルをAR表示する
さて、ここからがいよいよARらしくなってきます。
ヘッドトラッカーの設定
せっかくなのでサンタ帽子を被せたいと思います。
頭を検出して3Dモデルを重畳することは、ヘッドトラッカーで可能です。
Effect Houseではアセットライブラリが提供されており、
Skatchfabなどから3Dモデルをインポートし、 TikTokのエフェクトで利用できます。
Sketchfabは様々な3Dデータを共有できるウェブサイトで、
自分で作成した3Dデータをアップロードして公開（有償販売も可能）することや、
他のユーザの3Dデータをダウンロードして自身のプロジェクトに利用することもできます。
今回はこちらの3Dモデルを使わせていただきました。
* SantaClausHat💮📷" (https://skfb.ly/oqI9s) by ayumi ikeda is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
インポートした3Dモデルをヘッドトラッカーの下に配置することで、
シーンで配置をすることができます。
このとき、予め配置されている「頭」オブジェクトによって、
ヘッドオクルーダーを設定することが可能です。
ヘッドオクルーダーを設定すると、頭部モデルを使用して、
シーン内の他の3Dオブジェクトをオクルードできます。
サンタ帽のモデルが頭を包み込む場合、サンタ帽の後ろをオクルードして、
画面上の頭と干渉していないように見せることができます。
オクルージョンは、AR分野にも欠かせない技術です。
ARマーカの設定
この勢いで、もう一つ3Dモデルを出しましょう。
Effect Houseでは、ARマーカを設定し、その上に3Dモデルを表示することも可能です。
ARマーカの条件は、下記の通りです。
Choose a clear, identifiable texture that your camera can recognize and contains the following characteristics:
High-resolution
High-contrast
Directional
No repeating patterns
Sharp details
Distinct breaks between shapes
たまたま目につくところに条件にあっていそうなNTTコノキューのロゴがあったので、
一部をトリミングし、ARマーカとします。
表示する3Dモデルは、アセットライブラリより、こちらの雪だるまを使わせていただきます。
*"2023 Lowpoly Snowman" (https://skfb.ly/oB76u) by alina_dreiman is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
シーンでは、マーカに対して3Dモデルを表示する角度や位置、大きさを調整することができました。
また、ここにきてようやくプログラムを書きまして、ビジュアルスクリプティングで
ターゲットが検出されたときにイベントをトリガーする制御を行います。
エフェクトとAR要素を盛り盛りにしましたので、これでプレビューをしてみましょう！
制作できたもの
Effect Houseでの表示
Effect Houseのプレビュー画面では、このようになりました。
帽子の位置は若干のズレはあるものの、オクルージョンもされており、自然に見えます。 ただしARマーカの表示はプレビューできないため、今度は自らがTikTokerになり検証します。
TikTokでの表示
Effect Houseに表示されるQRコードを読み取ると、
すぐにTikTokアプリで検証をすることも可能です。
設定したARマーカに、正しく3Dモデルが表示されました。
少し境界線が曖昧ですが服の色も赤くなったり、帽子もちゃんと頭に追従してきました。
まとめ
今回はEffect HouseでARエフェクトを自作してみました。
私自身もXR開発スキルはまだまだで、Unityと仲良くなろうと頑張っているところですが、
このようにUnityなどの専門知識がなくてもARコンテンツを制作できるツールがあることで、
XRコンテンツ制作者を増やすことが出来るのではないかと改めて感じました。
また、TikTokでフィルターを身に纏って動画を撮ることはなかなか楽しいなとも思いました。
みなさんぜひ、ARフィルターを作ってみてください！
