atali Blog

Loading

SparkAR – Butterfly Shampooフィルターを作ってみた♡

こんにちは。ディレクターのソニアと申します
3年間、日本の文化に触れた後、やっと日本で夢のような仕事に就くことができました。最初にSpark ARプロジェクトを学び、制作したことが報われたからです。
今、東京でそれをやっている外国人の女の子は、たぶん……少ないと思います。

これまでの私の経験を活かして、西洋の女性としての視点を取り入れたSparkARのアイデアを紹介します。

SparkARの広告フィルターを考えていると、すぐに美容系のものが頭に浮かんできました。楽しくて、可愛くて、リラックスできて、今までになかったものを作りたい。
顔のマスクや口紅のフィルターは既にたくさん出ていますね。でも、シャンプーは?今まで聞いたことがありません。

多くの女性が美しく変身する事を夢見たことでしょう。映画『プリンセスダイアリー』で、スタイリスト達がアン・ハサウェイの眉毛を整え、本当の王族のように彼女の髪をまっすぐにする、あのワンシーンのように。
それがこのフィルターのアイデアの原点となりました。

最初は、ボトルからシャンプーを出すと泡が髪を覆い、泡が消えるとともにキラキラになるというもっとシンプルな計画でした。

しかし、atali.incはもっとエッジの効いた表現を目指しました!
そして、世界的アーティスト・Björkのエッジィなステージ衣装に着目し、ここからインスピレーションを得ることにしました。

また、シャンプーは私たちの頭髪を綺麗に洗ってくれるとともに、解放感を与えてくれるものです。多くの文化では、身体を洗うことと魂を浄化することは密接に結びついています。今回はそこにも着目し、蛹から変態する蝶のイメージとシャンプーをリンクさせることをベースのコンセプトにしました。そこに先述したビョークのコンサート衣装のヘッドピースの要素をいくつか混ぜ、フィルターを作成していきました。

最終的には、頭にシャンプーをかけると繭のような泡に頭を覆われ、美しい蝶に変身する…という、一種のスピリチュアルな変身を遂げるフィルターとなりました。

CGの制作

CG周り担当したショーンです。
SparkARでデザインをCGに起こすまでの制作プロセスについて解説します。

SparkARを使うのは初めてだったのですが、以前から気になっていたものでしたので良い機会でした。流れとしてはシャンプーが液体の状態でボトルからたれてきてユーザーの頭の上にかかり、繭になり、その繭が蝶のような形になる…という、ステップの多いものでした。これをSparkARにどう展開するのかが課題でした。

通常だと液体系の物は3Dソフトでシミュレーションをかけて、オブジェクトの連番ファイルで出します。しかし、SparkARでは4MBの容量制限がある為、その方法は使えません。結果的にはシミュレーションをかけたものを何段階かに分け、ブレンドシェープとして適用し疑似的にSparkARでアニメーションを再生する、という遠回りな作りになりました。
試したところ、Mayaからエクスポートしたモデルは骨のアニメーションのキーフレームまでは問題なく持っていけたのですが、ブレンドシェープは項目のみしかインポートされませんでした。そのため、SparkAR内のdelayパッチを使い、時間でブレンドシェープが再生する様に設定しました。
パッチやスクリプトでもっと深くまで探ってみれば解決できるものかもしれませんが、表面ではいじれるものが少ない印象でした。

一先ず液体はどうにか再現できましたが、次の問題は、そこから「蝶」になる繋ぎの部分でした。
形状の違いがかなりあったため、繭になりかける瞬間画面が全体的に光るエフェクトを入れて、つなぎ目が自然に見えるようにしました。羽のモデルはMayaで作成しました。

マテリアル設定はSparkARの方で直接付けています。
なるべくリアル、プリーレンダーでイメージした質感に近づけるためにSparkAR内のenvironment lightや、マテリアルのphysicalマテリアルを適用しました。それでもマテリアル設定が少ないため、イメージしていた質感に近づける事は難しかったです。

アニメーションは骨にベークし、「登場(開くアニメーション)」「待機用(そのあとに続くループアニメーション)」2パターンをMayaから.fbxとして書き出してSparkARにインポートしました。
パッチの理解がまだ足りないのか、アニメーションの再生周りは難しくて大変時間がかかり、完成まで結局1週間くらいかかりました。

ただ、全体的に使った後の感想としては、とても使いやすい且つ機能が充実していて楽しいツールでした。作りながら浮かんだアイディアも多く、今後もSparkARでもっと面白いものを作っていきたいと思っています。

もしこの作業プロセスについて興味がありましたらタイムラプスを準備しましたので参考までにご覧ください:

【実装での調整】

この案件について寺島がやったことは、Patchの整理です。
プログラムは一行も記述していません。

SparkARのPatchは各機能の入出力(I/O)をグラフィカルにつないで機能を構成する仕組みです。
モデリングツールのマテリアル設定と似ているためスクリプトに親しみのないグラフィック系の方々でもなじみやすいものである反面、表示方式の融通が利かないため全体を把握するのには膨大なディスプレイ解像度が必要になります。

これを解決するにはGroup機能を利用して機能を適切にカプセル化し、それを部品としてExportすることが必要になりますが、GroupのI/O整理には各機能のI/Oに使える「型」についてある程度ノウハウが必要です。

実務としてはできる限り演出と機能を分けて制作したいのですが、あまり分業での制作を意図していないツールだと感じたので、今後に期待したいところです。

【まとめ】 

SparkARのフィルターは海外でも流行していますが、最近では日本でも人気が高まっています。より多くのクライアントやブランドが、特別なイベントや新商品のためにオリジナルのインタラクティブフィルターを作成し、若いヒップなオーディエンスを惹きつけることに興味を持っています。デジタル広告の新しい波を切り開いているのです。

私はSparkARのクリエイターとして、あなたが見たものを気に入ってくれることを願っています。

ご興味、ご質問があれば 、

contact@atali.jp

まで、お問い合わせください。お待ちしております。

Related article