Deja Vu | KAMRA の制作メモ書き。

なにを担当したか

Web制作のワークフローの中に、映像制作の視点で細かい演出を入れ込む係として、動きやルックなど薄く広くやらせていただけました。具体的には、Cinema4D(C4D)でモーションつくってJSONに固める作業と、本編中の動画・画像素材全般です。dot by dot inc.の谷口監督やデザイナーの太一さん、実装担当のSaqooshaさんと衣袋さんの間で翻訳?っぽいことをしてたような気がします。映像素材、モーションデータや設定値は全部gitで受け渡し、こまかいとこはコード中の定数と直接いじったりしました。

dot-by-dot-inc/KAMRA-Deja-Vu | GitHub

動かし

あとでJSONにしやすいように整理しつつも至って普通にC4Dでうごかしてます。MIDIデータを元に動きを自動生成するって話もあったんですが、顔たちが自発的に表情を変えていくように演出したかったのと、デジデジしく作る過程の中に泥臭く手数をかける工程を入れたかったので、あえて手打ちしました。というより、動きの気持ちよさをしゃんと詰めていくなら、イージングもbezier-curve一発指定とかでは無しに複雑な形にしていく事になりますし、現状手打ちの方が単に手っ取り早いというだけの話。

「口角を上げる」「右眉を上げる」みたいな表情を30種類近くつくってやって、それをブレンドする方法で動かしてます(いわゆるポーズモーフ)。そんな自慢気に言えることではないですが、キーフレーム数は20,000個以上ありました。

モーションや設定値をJSONに

C4DはPythonがふつうに動くので、APIを参考にモーションデータを書き出し。スプレッドシートで、渡したいデータのフォーマットを共有.
C4DとThree.jsの座標系は逆なので、このへんで掌変換する必要があります。

• 顔の表情は頂点座標をx、y、z、x、y、z…と配列にまとめる
• 変換行列は、位置 + スケール + クォータニオンで

これを、フレーム毎のデータとしてJSONに固めて圧縮。相当に強引ですが、圧縮後も17MB近くあったので、Saqooshaさんの方で配列部分をバイナリデータにして頂きました。データ構造わかりやすいようにモーションデータ部分を空にしたやつも載っけてます。参考までに。

つくった素材

背景ムービー

塵や、もやがかったエフェクト、白い線とかをムービーにまとめて、比較(明)で合成。サランラップや、プリズムが光る映像とかの物撮り素材を使って、WebGL感を無くすようにしました。スクリーンやオーバーレイと違い彩度が持ち上がらないので、ルック的に不気味さが増すのと、前後関係があやふやになるので、背景、前景的要素を一つのムービーにまとめられました。

LUT

青みがかった色調補正データはLUT(ルックアップテーブル)で指定しました。こういうデータを渡して、glsl-lutで補正。

UVパス

顔がとろとろに溶けるシーンや顔のパーツが福笑いみたくあべこべになるラストシーンは、UVリマップの仕組みでデータを作っています。こういうこと。ビット深度不足を補うのと、圧縮時のアーティファクトを消しこむためにシェーダ側でブラーかけて使ってもらってます。

• 顔がとろとろに溶けるシーン
• 福笑い