--- author: mugi created: 2018-04-26T00:00:00.000Z wp_postid: 3363 title: "Making-of: KAMRA - Deja Vu" wp_post_type: page thumbnail: https://wp.baku89.com/wp-content/uploads/2015/11/deja-vu_03.jpg aliases: - making-of/deja-vu tags: - making-of permanent: true visibility: public description: インタラクティブMVでどう手付けアニメーションするか modified: 2026-01-08T14:50:36.362Z content_id: v3GPjB_2NW61MUY58RqWd --- ::hero ![](https://wp.baku89.com/wp-content/uploads/2015/12/04.jpg) :: [Deja Vu | KAMRA](https://kamra.invisi-dir.com/) の制作メモ書き。 ## なにを担当したか Web 制作のワークフローの中に、映像制作の視点で細かい演出を入れ込む係として、動きやルックなど薄く広くやらせていただけました。具体的には、Cinema4D(C4D)でモーションつくって JSON に固める作業と、本編中の動画・画像素材全般です。dot by dot inc.の谷口監督やデザイナーの太一さん、実装担当の Saqoosha さんと衣袋さんの間で翻訳?っぽいことをしてたような気がします。映像素材、モーションデータや設定値は全部 git で受け渡し、こまかいとこはコード中の定数と直接いじったりしました。 [license type='mit' href="https://github.com/dot-by-dot-inc/KAMRA-Deja-Vu"]dot-by-dot-inc/KAMRA-Deja-Vu | GitHub[/license] ## 動かし ![](https://wp.baku89.com/wp-content/uploads/2016/01/djv_vcon.gif) あとで JSON にしやすいように整理しつつも至って普通に C4D でうごかしてます。MIDI データを元に動きを自動生成するって話もあったんですが、顔たちが自発的に表情を変えていくように演出したかったのと、デジデジしく作る過程の中に泥臭く手数をかける工程を入れたかったので、あえて手打ちしました。というより、動きの気持ちよさをしゃんと詰めていくなら、イージングも bezier-curve 一発指定とかでは無しに複雑な形にしていく事になりますし、現状手打ちの方が単に手っ取り早いというだけの話。 ![](https://wp.baku89.com/wp-content/uploads/2016/01/djv_curve.jpg) 「口角を上げる」「右眉を上げる」みたいな表情を 30 種類近くつくってやって、それをブレンドする方法で動かしてます(いわゆるポーズモーフ)。そんな自慢気に言えることではないですが、キーフレーム数は 20,000 個以上ありました。 ## モーションや設定値を JSON に C4D は Python がふつうに動くので、API を参考に[モーションデータを書き出し](https://github.com/dot-by-dot-inc/KAMRA-Deja-Vu/blob/master/data/4%20-%20C4DPy/export_keyframes.py)。[スプレッドシート](https://docs.google.com/spreadsheets/d/16ZcVmRaakYmAnxd0Ybh0iEBa_Rj3QxiyuPX3TG-_m8c/edit?usp=sharing)で、渡したいデータのフォーマットを共有. C4D と Three.js の座標系は逆なので、[このへん](https://github.com/dot-by-dot-inc/KAMRA-Deja-Vu/blob/master/data/4%20-%20C4DPy/djv.py#L67-L135)で掌変換する必要があります。 - 顔の表情は頂点座標を x、y、z、x、y、z...と配列にまとめる - 変換行列は、位置 + スケール + クォータニオンで これを、フレーム毎のデータとして JSON に固めて圧縮。相当に強引ですが、圧縮後も 17MB 近くあったので、Saqoosha さんの方で[配列部分をバイナリデータにして頂きました](https://github.com/dot-by-dot-inc/KAMRA-Deja-Vu/blob/master/data/3%20-%20JSON/convert.js)。データ構造わかりやすいように[モーションデータ部分を空にしたやつ](https://github.com/dot-by-dot-inc/KAMRA-Deja-Vu/blob/master/data/3%20-%20JSON/keyframes.simple.js)も載っけてます。参考までに。 ## つくった素材 ### 背景ムービー ![](https://wp.baku89.com/wp-content/uploads/2016/01/bg_movie_prizm.gif) 塵や、もやがかったエフェクト、白い線とかをムービーにまとめて、比較(明)で合成。サランラップや、プリズムが光る映像とかの物撮り素材を使って、WebGL 感を無くすようにしました。スクリーンやオーバーレイと違い彩度が持ち上がらないので、ルック的に不気味さが増すのと、前後関係があやふやになるので、背景、前景的要素を一つのムービーにまとめられました。 ### LUT 青みがかった色調補正データは LUT(ルックアップテーブル)で指定しました。[こういうデータ](https://github.com/dot-by-dot-inc/KAMRA-Deja-Vu/blob/master/main/public/textures/lut.png)を渡して、[glsl-lut](https://github.com/mattdesl/glsl-lut)で補正。 ### UV パス ![](https://wp.baku89.com/wp-content/uploads/2016/01/uv.jpg) 顔がとろとろに溶けるシーンや顔のパーツが福笑いみたくあべこべになるラストシーンは、UV リマップの仕組みでデータを作っています。[こういうこと](https://vimeo.com/138778625)。ビット深度不足を補うのと、圧縮時のアーティファクトを消しこむために[シェーダ側でブラーかけて](https://github.com/dot-by-dot-inc/KAMRA-Deja-Vu/blob/master/main/src/pc/shaders/slit-scan-remap.frag)使ってもらってます。 - [顔がとろとろに溶けるシーン](https://github.com/dot-by-dot-inc/KAMRA-Deja-Vu/blob/master/main/public/textures/slitscan_uv_512.mp4) - [福笑い](https://github.com/dot-by-dot-inc/KAMRA-Deja-Vu/tree/master/data/6%20-%20Tex)