​​絵作りのエンジニアリング
​​こんちわ！ dot by dot inc. でテクニカルディレクターやプログラマーやってます、Saqoosha です。きょうは「絵作りのエンジニアリング」というテーマで、昨年の 11 月に公開したインタラクティブミュージックビデオ Deja vu のメイキングをとおして、プログラマーであるわたしがクリエイティブディレクター・デザイナー・フィルムディレクターといったメンバーとどのように協業していったかをお話します。まずは Deja vu がどういったものなのかをご覧ください。
​​
​​
​​これは福岡在住のアーティスト KAMRA のニューアルバム「Artificial Emotions」のプロモーションとして制作しました。近年ではめずらしい PC オンリー、Webcam 必須のコンテンツとなっています。Webcam でとりこまれた閲覧者自身の顔に人工的な表情・感情（Artificial Emotions）をつけくわえることで、Deja vu を体験するといった内容です。
​​
​​ご覧頂いたようにこれは 1 本の映像ではなく、見る人によってさまざまに変化するインタラクティブ性のある映像になっています。これを実現するためにはプログラミングによる映像生成が必須であり、その最終アウトプットはプログラマーの手によってつくりだされます。しかしプログラマーは映像表現のプロではないことがほとんどなので、アウトプットのクオリティを最大限高めるためにはクリエイティブディレクター・デザイナー・フィルムディレクターたちとの綿密なやりとりが必要になります。
​​
​​次にお見せするのはフィルムディレクターとして参加してくれた橋本麦くんが作ってくれたビデオコンテです。Cinema 4D と After Effects で作られた 1 本のムービーです。
​​
​​見ていただいてわかるように、微妙にボツになった演出とかはあるもののだいたい Web サイトと同じものになってます。というか逆にこのムービーに極力近づけるように Web サイトがプログラミングされてるんですけど。もちろんこれは麦くんが自由きままにつくったわけではなく、企画当初からプログラマーである私を含めチーム全体で技術的なできるできないを話し合ったうえで作られています。
​​

​
​エンジニアが口出すポイント

​​ざっくりおおまかな制作フローは次のようなかんじ。
​​
  1. ​​企画たてる
  1. ​​絵コンテ描く
  1. ​​イメージボード描く
  1. ​​ビデオコンテつくる
  1. ​​実装する
​​
​​ほぼすべてのポイントでエンジニア/プログラマーはミーティングに参加し、おもに技術的観点で実現可能かどうかの精査や、実際にデモを作って演出が効果的かどうかの判断を助けたりします。
​​

​
​企画をたてるとき

​​これは企画会議にもちよられたアイデアシートの一部です。アイデアひとつひとつに対して、実現可能か？実現するにはどういった技術をつかえばいいのか？を考えます。
​​
​​

​
​絵コンテを描くとき

​​決定した企画案にもとづいて、曲をベースにどのタイミングでどういった演出をするのかを表したのがこの絵コンテ。企画案には含まれていない細かな演出がはいっているので、個々についてフィージビリティを確認していく。していくんだけどやってみないとわからないものも結構あって、でもやってみるにもそれなりに時間が必要、、、なので、このへんは割りとこれまでの経験と勘でいけるいけないを判断している。（なので、実装中に無理ーってなって最終的に演出を変えちゃうこともある。）
​​

​
​イメージボードを描くとき

​​このパートも絵コンテでやることとだいたい同じ。デザイナーがつくってきた絵に対してできるできないを判断していく。
​​
  • ​​たいち（デザイナー）「こんなんできます？」
  • ​​Saqoosha「うん、それはいけそう」
  • ​​
  • ​​たいち「これはどうすかね？」
  • ​​Saqoosha「んんー、さすがにそれは無理やわ、、」
  • ​​たいち「じゃあ、こういうんだったらどうすか？」
  • ​​Saqoosha「あー、それならいけるかも、ちょっとやってみる」
​​
  • ​​Saqoosha「こんなんできたけど。」
  • ​​たいち「なるほど、そんなんもできるんすね。じゃあちょっとそれいれてみます」
​​
​​みたいな。
​​

​
​ビデオコンテをつくるとき

​​このパートも前ふたつとそんなに違わない。全体の流れをつくるまえに個々の演出について実際に映像としてつくってもらって、よりイメージを具体化するとともにフィージビリティを確認する。
​​
​​いくつかの演出ポイントについて実際につくってみた映像。これはまだ映像、実装したものではない。
​​

​
​実装時のやりとり

​​ビデオコンテがなんとなくできた段階から具体的な実装にはいっていきます。必要となる技術要件をあらいだして 1 パートずつ実装して、チームと演出内容をすり合わせていく。以下は実際に Deja vu 実現に必要な技術をリストアップしたもの。
​​
  • ​​顔認識
  • ​​3D モデル生成
  • ​​メッシュ変形
  • ​​顔めくれエフェクト
  • ​​モンタージュエフェクト
  • ​​スリットスキャン
  • ​​物理シミュレーション
  • ​​フォトモザイク
  • ​​キモ顔生成
  • ​​パーティクル制御
  • ​​カラーグレーディング
  • ​​色収差エフェクト
  • ​​Cinema 4D 連携
​​
​​

​
​アニメーション

​​顔のメッシュアニメーション、カメラの動きなど、基本的なアニメーションはすべて Cinema 4D によって作成されてます。Cinema 4D 上でのキーフレームこんなの。
  • ​​MIDIデータを元に動きを自動生成するって話もあったんですが, 顔たちが自発的に表情を変えていくように演出したかったのと, デジデジしく作る過程の中に泥臭く手数をかける工程を入れたかったので, あえて手打ちしました. というより, 動きの気持ちよさをしゃんと詰めていくなら, イージングもbezier-curve一発指定とかでは無しに複雑な形にしていく事になりますし, 現状手打ちの方が単に手っ取り早いというだけの話.
  • ​​
  • ​​Making of “KAMRA – Deja Vu” | 麦(Baku)
​​
​​このように緻密につくられたアニメーションをいかにブラウザ上で再現するかですが、最終的には麦くん自らが JavaScript で扱いやすいデータとして全フレームを書きだすプラグインを作ってくれました。
​​書きだされたデータとこの指示書をもとに Saqoosha が実装。1 発で完全再現はまず無理なので実装してはチェックの繰り返し。実装中はリファレンスムービーを同時に再生する仕組みを導入したりして再現性を常に確認。
​​

​
​モンタージュエフェクト

​​顔がスライスされて別の人のといれかわるモンタージュエフェクト。
​​とりあえず JavaScript で任意の位置でオブジェクトをスライスするエフェクトをつくってみる。
​​
  • ​​Saqoosha「断面のテクスチャ、Z 方向にのばしてみたけど。」
  • ​​麦「単色がいいっす」
​​
​​
  • ​​Saqoosha「WebGL で V コンみたいなのむずい、、、ちょっと変だけど、どう？」
  • ​​麦「たぶんそんなに見えないんでいまの実装でもだいじょぶっす。断面の色変えたいっす。」
  • ​​Saqoosha「指定してちょ」
  • ​​麦「234fe3 で」
​​
​​みたいな。
​​

​
​スリットスキャン

​​中盤で顔がグニグニ溶けてくエフェクト。もともとはスリットスキャンな絵コンテだったのが V コンになってさらにパワーアップ。After Effects 上で UV remap をつかってつくられてたやつを JavaScript で再現。
​​
  • ​​麦「UV remap でやってるんですけどいけます？」
  • ​​Saqoosha「いけるんちゃう？ やってみるからデータちょーだい」
  • ​​麦「書き出したらめっちゃデータ重くなっちゃいました・・・」
  • ​​Saqoosha「ふむ、、、ブラーかけたら小ちゃくてもだいじょぶっぽい？」
  • ​​麦「すげぇっす！！」
​​
​​みたいな。
​​

​
​顔めくれエフェクト

​​イントロの顔がめくれてはがれるエフェクトは、麦くんが Cinema 4D のエフェクトをつかって作った仕組みを詳細に解説してもらったうえで、JavaScript で同じ結果になるように実装してる。
​​

​
​コンポジット

  • ​​Saqoosha「全体のエフェクト、いちおうがっちゃんこしてみたけど」
  • ​​麦「こういう感じがいいと思いまっす」
  • ​​Saqoosha「りょーかい」
  • ​​麦「たいちさん、色調整おねがいします」
  • ​​たいち「こんなんでどーでしょ」
  • ​​麦「了解っす。LUT つくりまっす。」
  • ​​Saqoosha「実装したよー」
  • ​​たいち「あれ？なんか色違うくないです？」
  • ​​Saqoosha「あれが、これで、あーだから、こうなんだな、、」
  • ​​たいち「あー、じゃあ、この色すね」
​​
​​みたいな。
​​
​​

​
​まとめ

​​こういうコンテンツをクオリティ高く仕上げるためには、結局のところ最終ゴールをちゃんと共有して、いかにそれにたいして手を抜かずにやろうとするマインドがあるか？というとこに尽きるのかなーと思います。（まー、もちろん技術も必要なんだけど）
​​
​​デザイナーが 1px 単位で調整したデザイン、アニメーターが 1 フレーム単位で調整したアニメーションは、プログラマーがちょい実装めんどくさい、、、といって簡単に省略していいものではないです。上流工程でつくりだされたアイデアやデザインを精度高く実現するのはプログラマーであり、その人の意識次第でかんたんにクオリティがかわります。
​​
​​これはたぶんインタラクティブほにゃらら的な、プログラミングが絡むものにだいたい当てはまる話なんじゃないかと思うので、そういうものを作ることになった時にはこの話を思い出していただければ何かの足しになるのではないかと思います。
​​
​​んじゃ！
​​