Snap の Lens Studio ではじめる Image Based Garment Transfer による超お手軽バーチャル試着体験
Image Based Garment Transfer は端的に言うと、画像 A の衣服を画像 A' に差し替える技術です。
SwapNet: Image Based Garment Transfer, (Amit, 2018) より引用
いわゆる Fashion Tech 領域としては非常に興味深い論文なので、興味を持たれた方は参照してみてください。
Abstract. Wepresent Swapnet, a framework to transfer garments across images of people with arbitrary body pose, shape, and clothing. Garment transfer is a challenging task that requires (i) disentangling the features of the clothing from the body pose and shape and (ii) realistic synthesis of the garment texture on the new body. We present a neural network architecture that tackles these sub-problems with two task-specific sub-networks. Since acquiring pairs of images showing the same clothing on different bodies is difficult, we propose a novel weaklysupervised approach that generates training pairs from a single image via data augmentation. We present the first fully automatic method for garment transfer in unconstrained images without solving the difficult 3D reconstruction problem. We demonstrate a variety of transfer results and highlight our advantages over traditional image-to-image and analogy pipelines. (Amit, 2018)
この Garment Transfer を Lens Studio を使って “上半身の洋服を変更できる” AR フィルターとして “ノンコーディング” で作成します。
Lens Studio
Lens Studio は Snapchat (最近では Zenly の移行先としても案内されていますね!) の Snap 社が提供している Snapchat のフィルターを制作するためのアプリケーションです。Windows 向けと macOS 向けが用意されています。
競合として Instagram の AR フィルターである Spark AR を制作するための Spark AR Studio が挙げられます。
どちらも GUI ベースで AR フィルターを制作できますが、Spark AR は AR フィルター公開のための「審査」があるため、制作した後の「公開」にややハードルがあります。
対して Snapchat は「審査」のハードルが低く、非常に取っ付きやすいです。日本国内においての知名度は Snapchat より Instagram の方が高いかもしれませんが、この取っ付きやすさに加え、Lens Studio には豊富なテンプレートが用意されているので、個人的には推しています。
Garment Transfer Custom Component を使った Garment Transfer フィルターの制作
公式チュートリアル通りに進めていきます。Lens Studio は豊富なテンプレートに加え、こうしたチュートリアルもしっかり整備されています。
Garment Transfer のチュートリアルページ
下準備
まずは公式サイトのダウンロードページから Lens Studio をダウンロードしてインストールします。
公式サイトにアクセスして Download Now から Lens Studio をダウンロードする
2022-12-04 現在の最新バージョンは 2022-11-16 にリリースされた Version 4.34 です。今回取り扱う Garment Transfer はこの Version 4.34 で追加されたものになります。
インストール後、作成途中の AR フィルターを実機で確認できるよう、Pairing to Snapchat の指示に従ってスマートフォンにインストールされている Snapchat とペアリングしておきます。もしも Snapchat をインストールしていない方はアカウントを作成してインストールを済ませておきましょう。
Garment Transfer テンプレートの起動
Lens Studio を起動後、左側にある Templates をクリックし、検索窓に Garment Transfer と入力するとサジェストされるので、クリックしてテンプレートを読み込みましょう。
Garment Transfer テンプレートを読み込む
テンプレートを読み込むとあらかじめ 3 種類の画像が設定された状態になっています。
テンプレートを読み込んだ直後の画面
Lens Studio は実際の挙動をプレビューとして試せるので、この状態で白色や青系統のフーディーの画像をクリックすると、着ている洋服が変わります。
Person 1 と表示されているをクリックすると、Person 1 ~ 6 の間でバストアップのモデルを選択できます。モデルは男女 3 名ずつ用意されています。また、Object Tracking の項目から全身の立ち姿 (Body) なども選択できます。
モデルのパターンを変更できる
画面右上の Sending to Snapchat からスマートフォンを連携することで、ご自身のスマートフォン実機で試せます。この Garment Transfer フィルターはインカメラを使用するものですが、Snapchat の標準はアウトカメラになっているので、インカメラに切り替えてから試しましょう。
Lens Studio でカスタマイズする → 実機で試すという一連の流れを繰り返しながら AR フィルターを完成させることになります。
カスタマイズ
チュートリアルに記載されている 2 つのカスタマイズを加えます。
1. パターン数を変更する
テンプレートにはあらかじめ 3 着分のパターンが設定されています。増やしたい場合は Objectts の UI Camera > Garment Carousel > Carousel [ EDIT_GARMENTS_HERE ] を選択し、Inspector > Icons の Add Value をクリックした後に追加された Value 3 に Resources から対象の画像を追加します。
Lens Studio で提供されているテンプレートは、編集するファイルには [ EDIT_GARMENTS_HERE ] の文字列が含まれているので、改変も分かりやすくなっています。
赤枠で囲った Add Value をクリックすることで Value 3 (4つ目のイメージ) が追加される
追加する画像をドラッグアンドドロップで直接 Inspector に追加することはできないので、まずは一度 Resources に追加してください。
たったこれだけでパターンを変更できます。削除する場合は各 Value 右側の ☓ をクリックしてください。
2. 変更後のイメージを変更する
Garment Transfer に適した着衣画像は「Choosing a good garment image」で説明されています。
Supported Garment Images として示されている、Garment Transfer 向けの着衣画像は、単一の背景で、全員または上半身が映っているものです。
対して Unsupported Garment Images としては次の内容が示されています。
- Image should have a person wearing a shirt,only a shirt will not work.
- Hands cover the shirt.
- Garment type is not supported,loose fit onbody, Hair covers the garment.
- Body not facing the camera, hands cover the garment, upper garment is not fully visible, bottom is trimmed.
- Person not facing the camera, hands cover the garment.
もっとも確実な方法は PSD ファイルとして提供されている Photoshop template を使用することです。PSD ファイルなので Photoshop は必要ですが、「背景色の変更」と「胸元に表示させる画像」を簡単に変更できるようになっています。デフォルトで設定されている Shirt 1, 2, 3 と同じ形状になっています。
今回はこのテンプレートを使ってオリジナルの着衣画像を 3 種類作成しました。作り終えたら Send to Snapchat から実機で確認をして公開処理を進めましょう。
まるで GREENBACK TEE のような見た目の緑のフーディー
ZOZOTOWNの公式キャラクターでエンジニア向けの LINE スタンプもある「箱猫マックス」とその仲間たちがプリントされたフーディー
10年目を迎えた日本最大級のファッションコーディネートアプリ WEAR の看板娘で箱猫マックスのお友達の【チーコ】がプリントされた白色のフーディー
Lens を公開する
完成した Lens を公開します。ここまでずっと AR フィルターという表現を用いてきましたが、Snapchat においては Lens という呼び名になります。
まずは Lens Studio の左上にある Publish Lens をクリックします。アップロード処理が進み、ブラウザで Submit a Lens のページが開けば OK です。未ログインの場合はログイン処理が挟まります。Lens Studio 側には Upload Succesful! のモーダルが表示されるので、Done をクリックして閉じてください。
Submit a Lens のページでは Business Lens か Community Lens を選択します。今回は Community Lens を選択し、新規なので Submit New Lens をクリックします。
Lens Details のページでは文字通りこの Lens の詳細を設定します。必須項目は Primary Category のみです。Submit をクリックして申請します。
You’re all set! のページが表示されれば申請は完了です。審査を待ちましょう。
ページ下部の Manage My Lens をクリックすると自分の Lens が表示されます。審査中は In Review ステータスになっています。
審査が完了し、公開状態になると Public ステータスになります。今回は申請から 30 分程度で公開されました。
今回作成した Lens は下記の Snapcode から実際に試せます。Snapchat を起動して Snapcode を読み取ることで Lens が起動します！完成です！
今回作成した Lens を試せる Snapcode
実際に試している様子
Fashion Tech としての Lens Studio
Lens Studio には他にも靴のバーチャル試着 (Footwear Try-On) や服のバーチャル試着 (Cloth Simulation Try-On) などの Try-on 系テンプレートが複数用意されているので、Fashion Tech 特にバーチャル Try-on という観点では要注目です。
一例としてラグジュアリーブランドの Dior 社はかねてから Snapchat の AR フィルターを活用したマーケティング・プロモーションを展開しています。
Snapchat の AR フィルターは SDK として提供されている Camera Kit を導入することで、その体験の場を Snapchat アプリではなく自身のアプリに組み込めるので、多くの可能性を秘めていると考えています。
願わくば日本国内でもっと流行ってほしいですね……!!
現場からは以上です！
Discussion
2022-12-06 追記: 本文中の「今回作成した Lens を試せる Snapcode」がめちゃくちゃ間違えていたので正しい Snapcode に差し替えました!