Baku Hashimoto

橋本 麦

TAG
aftereffects

After Effectsに求めること (妄想)

新しいコンポジションの種類

子コンポジション

普通のコンポジションから, 再利用性を一切抜いたもの. 特定のコンポの中に, 一度のみ使われる.
TCも親コンポに同期していて, プロジェクトパネル上でも親コンポの子要素として表示される. フォルダ機能にも近く, 親コンポのレイヤーパネルの中で, Finderのツリー表示よろしく展開することもできる.

クラスコンポジション

普通のコンポジションは再利用性がある一方, 再利用先のコンポ内でそれぞれに別の見え方になるような設定を個別にできなかった. クラスコンポジションは, よりコンポジションを抽象化することで, そういった問題を解決する. コンポジション自体に, カスタムプロパティを設定できる. 「コントロールエフェクト」をコンポジションに追加できるイメージ. そのプロパティはエクスプレッションを用いてコンポ内のレイヤーのプロパティとひも付けることができる. 再利用先の親コンポから, クラスコンポジションのカスタムプロパティを設定することで, クラスプロパティ内のレイヤーを再利用先から間接的に制御できるようになり, ある種のカプセル化が可能になる.

スリットスキャンをヌルっとさせる小技

スリットスキャンをAEの時間置き換えでやるとこうなりがちなんだけど, もう少し滑らかにするメモ. 質問があったので.

  1. 無理してHSで撮らずとも, Twixtorでfpsを強制的に上げればOK.
  2. AEのbit深度を16, 32にする. 大体の場合16bitで十分.
  3. AEのコンポジション設定のfps上限が99である事に気をつける. (pre-composeしてるとトラブルの原因に)

(3)は, HS素材をフッテージの変換から解釈するfpsを変換しやればOK. 半分とか. その分再生時にスローなるので注意ですが.

ビット深度は, マットレイヤーに変なマッハバンドが出ていない限り実はそんな関係なくて, Twixtorでfps上げるのが一番効果的. PhotoBoothで撮った30fpsの動画でも, 上記の設定しゃんとするとこんな感じになる.

(30fps→90fps, 16bit)

ベクター素材中心のコンポを後で高解像度化する

図形中心のモーショングラフィックスって, 素材がそもそもベクターで解像度も可変なんだから, 720pとかの小さめのコンポで動かし作業して, 書き出す時だけ高解像度でレンダリングすれば良いじゃんって話.

2Dレイヤーだけのとき

  1. 解像度低めの作業コンポをそのまま同解像度の出力用コンポにネスト
  2. 出力用コンポ内の作業コンポレイヤーのコラップストランスフォームをOn
  3. 出力用コンポをScale Composition.jsxで, 出力したい解像度にスケール

Scale Composition.jsxはAEにデフォで入ってます.

3Dレイヤー使ってるとき

  1. 解像度低めの作業コンポをそのまま同解像度の出力用コンポにネスト
  2. 重要: 作業コンポ内のカメラをまるっと出力用コンポにコピー
  3. 出力用コンポ内の作業コンポレイヤーのコラップストランスフォーム, 3DレイヤーをOn
  4. 出力用コンポをScale Composition.jsxで, 出力したい解像度にスケール

結構最近こういうやりかた多い. “すべてがFになる” ED映像も, ドット打ちした素材を1万倍とかにスケールした時にピクセルがちゃんと出るように, 補完をニアレストネイバーに. その際出た斜めのエッジのジャギーを消すために, 一旦倍解像度にスケール, OLM Smootherを掛けた後, 更にネストして, 1080pに縮小して書き出してる.

カメラのスケールが要注意で, 仮にコンポを倍解像度にしたいとして, “位置”, “目標点”の他に, “ズーム”もそれぞれ値を倍にしてやらないと画角がおかしくなる. 3Dヌルをカメラの親にして, そいつを200%にしても駄目. そのあたりScale Composition.jsxはちゃんとやってくれるので便利. 頻繁にアップデートするときは, エクスプレッションで出力用コンポから作業コンポのカメラのパラメーターとひも付けてやればいい.

Making of “group_inou – EYE”

group_inou “EYE”のMV、かなり独特なフローで制作したので、技術まわりの諸々をメモ。丁寧に書いていくと相当な物量になりそうなので、要所だけ抑える感じで…。

どうやって作る

見れば分かる通り、Street Viewを使ってます。そこにコマ撮りしたアーティストを雑コラ的に合成。

大まかなフローは以下の通りです。

  1. ロケハン (スプレッドシートによさ気な場所をピックアップ)
  2. プロキシ版StreetViewの取得 & プレビズ作成
  3. 撮影
  4. 高解像度置き換え & 合成

いくつもインハウス・ツール的なものを作りました。超汚いコードで多分動かなそうだけど、一応まるっとコードアップしときます。

baku89/group_inou-EYE – GitHub

Hyperlapse.js

StreetViewの画像の取得には、teehan+lax社がオープンソースで公開しているHyperlapse.jsを参考にしました。Vimeo界隈だとこのムービーは有名かも。

ただ、実のところHyperlapse.js自体は殆ど使ってなくて、Hyperlapse.jsが依存しているGSVPano.jsってライブラリを主に使いました。本家リポジトリがGoogleから怒られたらしく消されていたので、Hyperlapse.jsに入ってるバージョンを。teehan+laxのどっかに載ってたメイキング記事によれば、GSVPano.js内部で直でパノラマのタイル画像を引き抜いてる所がアウトだったから、API的に呼び出すよう書き換えた、とのことでしたので。

パノラマの取得

Hyperlapse.jsはGoogle Map APIで2点間の経路を検索し、その経路のパスを分割して点群にバラし、各点毎に近傍のStreetViewを検索かけています。つまり、経路検索の出来ない僻地や建物内は行けない上に、僻地や高架などではうまく動かないので、経路検索ではなく、隣接するパノラマのIDの配列を吐き出すツールを作りました。

Pano ID Extractor

ここで吐き出したパノラマIDをGSVPano.jsに読み込んで、パノラマデータを書き出します。

公開した後になって、この方のツイートでtakramさんの記事を知ったのだけど、やってる事はかなり近いです。ただ、canvasをbase64変換したやつをAjax的にゴニョゴニョしてサーバーから保存かけてやるのはコードが分散して億劫だったので、Node.jsの fs.saveFile() 使ったというワケ。で、ブラウザ内からNode.jsのモジュールが使えるようにするために、NW.jsなるものを使いました。要するにNode.jsでネイティブアプリっぽいものが作れるよーっていうやつで、使い方も割と簡単。多分APIとか絡めてジェネ的に映像素材を作るためのフレームワークとして今後もかなり使えそうです。何よりHTML+CSSでUIが組めるのがデカイ。

データの埋め込み

Hyperlapse.jsを使って保存した連番をPremiereで編集したものがこれ。

下の方にある赤と緑のQRコードみたいなのは、保存をかけたパノラマの各種情報が埋め込まれてて。

{
    "id": "WysqsRo6h5YGNmkkXVa9ZA",
    "rotation": 35.11,
    "pitch": 1.09,
    "latLng": {
        "A": 51.59035,
        "F": 3.677251999999953
    },
    "date": "2009-09",
    "heading": 0
}

こういうJSONを、バイト配列にバラし、各ビットを書き込んでるから仕組みは単純です。(該当箇所のコード) 何がしたいのかというと、後で高解像度版に置き換えられるようにするため。フルHDでスカイマップとして使うには横13,000px位は必要なのだけど、そんなバカバカ画像取得しまくったら何となく怒られそうだったのと、編集段階ではなるたけデータを軽くしたかったので、一旦横1600px程度でサクサクよさ気な場所を取得し、Premiereで実尺に編集したのを一気に高解像度版に置き換え。これも専用のツールを作りました。

プレビズ作成

撮影が大変そうだったので、プリプロ段階でかなり細かい所までプレビズを作りこみました。
編集したパノラマをC4Dに持って行ってカメラワークとか付けて。ちょど前のgroup_inouのPR vol.10のティザー映像で、お二人のローポリモデルを作っていたので、それを再利用して人物の動きも決めていきます。

撮影

コマ撮りなので、5Dmk2で写真撮影しました。基本的に雑コラ感を意図的に出し、あまり馴染ませない方向にはしようと思っていたのだけど、それでも最低限パースとライティングは合わせておこうと。そうなると汎用性の高いポーズを素材撮りして随所で使いまわすという方法が難しかった上に、やっぱりそこは苦労してタイムラインに沿って撮った方が画に凄みが出るように思えたので、3000F近く撮ることに。こうなると、時短のためにも徹底的にオートメーション化してやろうということで、またもやNW.jsで撮影用アプリを組みました。NW.js最高。

DMXで照明の制御

ライブハウスとかの照明の制御に使われるプロトコル、DMXを使って、ライトの制御をしました。DMXの送信にはENTTEC DMX USB PROを使いました。Marvericks以降のドライバのインストールはかなり厄介で、サポート記事参考にしています。

DMXは要するにXLRで照明の明度を送んよーってプロトコルで、ライブ照明とかは本体にXLRの入力端子が付いていたりするのだけど、撮影用照明はそうはいかないので、ELATION DP-415を使って照明への入力電圧を直接変えることにました。今後も色々つかえそうです。

事務所の適当な電球で試したやつです。

カメラ位置、メンバーの向く角度の算出

プレビズ作成に使ったC4DのプロジェクトをXpressoを使い、カメラ位置などを算出します。人物の向く方向は「○時の方向」で。スタジオ床にメンバーからの距離をバミって、三脚の伸縮部分にも目盛りを付け, カメラ位置を正確に移動させられるようにしました。スタジオの周囲には「○時」のプレートを貼り付けて、上のガイド映像を見つつ、指定の方向を向いてもらいます。

Arduinoでレリーズと電動フォローフォーカスの自作

三脚位置が高いので、PCからシャッターやズームリング制御出来ると良いなと思って、Arduinoでチキチキ工作しています。レリーズ自作は超簡単。この記事を参考に。

カメラのタイマーレリーズを自作してみた – FALCON’s Diary

あと、諸々終わって気づいたのだけど、EOSのSDKも出てるし、oF用のアドオンもある。国内ではダウンロード出来ないのだけど、色々ゴニョゴニョやったら入手出来ました。(かもしれません, と念のため言っておきます)

フォローフォーカスはステッピングモーターを使って回します。ズームリングが回りきったのを検出してくれないから危なっかしいんだけど、時間が無かったのでとりあえず動けば良いという方針で。東急ハンズで諸々買い出し。近所のFabCafeでアクリル切って、組み立てた。相当不格好だしMAKERS界隈の人には笑われそうですが…。

とはいえ、実際これ撮影段階で邪魔になり後半使わず…。このまま陽の目を見ないのは可哀想だし、電動フォローフォーカスはコマ撮り系でかなり使えるはずなので、借りたい人は気軽に言ってください。

C4D Library

C4Dも外部のPythonライブラリ普通に使える。つまりはOSCも使えるということなので、pyhton-oscをつかって、Node.jsの撮影アプリとC4D間でフレームやカメラ情報の同期をしたり、C4DからDMXの制御をしたりしています。pySimpleDMXを用いてDMXも同様に。

参考: OSC with C4D – gist

VDMXの有効活用

VDMXを使って、ガイドやカメラからの映像出力を合わせて、プロジェクターで現場に大きく投影しました。現場全体で撮影しているシーンや展開を共有できたので良かったです。

撮影本番

こういうシステム構成にんばりました。ピンクの矢印はOSC。

このシステムを使うことで、結局2日で3500フレーム超撮影することが出ました。とはいえ、相当お二人に負担をかけてしまったのが反省点です。

僕とノガミでテスト撮影。DIY感あります。

ポストプロダクション

撮影後は、地道にAfterEffectsを使って編集。背景は先のReplace Proxyを用いて高画質版に変換し、AEでワープスタビライザーかけています。ただ、あまりに動きが早すぎて、スタビライズが全く上手く効いてくれなかったので、半分くらいは人力で…。(辛かった)

人物の配置は全編にわたって1フレームずつキーフレーム打ってる感じ。2コマ打ちでも良かったのかもしれませんが、地面のプルプルに追従する感じや、動きのジワジワ感を醸し出すためには、2コマ打ちではなく、ここは地道に1コマずつ編集していかないと。。。

また、グリッチ空間のシーンはノガミがベースとなるポリゴンを作っているのですが
, これもPhotoscanというソフトを謎活用して無茶苦茶なことやってるらしいです。

そのほか

Slack最高。
ただ、タスクやチェック動画は、タイムラインだと埋もれてしまうので
スプレッドシートと併用が良いかもしれない。–>

Term of Servicesはかなり読み込みました。ウォーターマークを消さない状態で、ブラウザ上での見え方から”著しく”変わらなければ商用利用も可、許可申請も要らない。雲などの自然物の除去や合成は可。あとは多分ToS的にはアウトですが、2年以上公開停止になっていないStreetViewを使った他作品(これとかこれ)を参考にしつつ、どこまで画を弄っていいかを判断しました。

リファレンスは色々あります。ノガミと共有してるものだと

あと個人的には。


本家Hyperlapse.jsもオープンソースプロジェクトだし、個人的にもっと映像以外にも色々出来るんですよって自慢したかったような気もするので色々書き尽くしました。あと、多分これ普通のアーティストだといろんな意味で絶対やらせてもらえなかったと思います。アーティストやレーベルの方々も、面白いものが出来れば良し、とのスタンスで許して頂けましたし、小回りの効く座組だったからこそ、これだけ変わったワークフローでもどうにか完成させられたと今振り返って思います。

多分今後同じ手法を用いて作品作ることはありませんし, 似た案件が来たとしても断るつもりでいますので、何か作り方に関して質問等があれば気軽に@_baku89に連絡ください。webには書きづらい制作過程とか結構ありますので。


追記 Feb 4, 2016

ofxAEKeyframe

最近やった撮影で効率化のためにoFで自動撮影するシステム組んだんですが、なんかaddonに出来そうな雰囲気を醸してたのでまとめてみました。初addon。

ofxAEKeyframe / baku89

oF側からAfterEffectsにキーフレームをコピペ出来るやつです。

比嘉さんのofxAfterEffectsKeyframeParserが、AEのキーフレームのデータをoF側でパースするaddonだったんで、丁度その逆です。

映像制作にも楽器を弾くかのような即興性があれば良いのになって前々から思ってたけど、Adobeは謎ニッチな機能ばかりAEに追加するし、自分で作るしか無いなぁと最近は諦めてます。

このaddon使えば、LeapMotionで取った手の動きとかをAEに読み込めたりするんで、かなり俺得な作業環境作れそう。

プロジェクションマッピング制作支援ツールつくった

スクリーンの形状が複雑なプロジェクションマッピングの制作は、その展開図の上に映像をのせていくわけですが、立体スクリーンに投影された所をリアルタイムで確認しながらコンポジットできたら便利だなーと思い、ツールをつくりました。久々のoFです。

VirtualMapper ( source )

ネーミングセンス無くてすみません。(良い案あったら教えてください)

要するに、UV付きのモデルデータを読み込んで、Syphon(ソフト間で映像をやりとりするためのオープン規格)経由で送信された映像をテクスチャとしてリアルタイム表示するというツールです。

C4Dでモデルデータの書き出し、Syphonの出力をAfter Effectsから行った時の画面キャプチャです。

たいていのVJソフトやビジュアルプログラミング環境はSyphonに対応しています。AEは、AESyphonというプラグインをインストールすれば出力可能です。(シェアウェアですが、解像度制限のかかった試用版もあります)

投影時のキャリブレーションツールはたくさん出回っていますが、制作時に便利なツールはほとんど無くて。結構今でも展開図から組み上がった所を脳内補完しながら、力技で作っているケースが多い気がします。現場テストになって初めて、少し別角度から観ると全然飛び出て見えない、って分かってしんどい思いを何度かしているので、もし次制作する機会があったら大分楽になるかなぁと思ってます。

バグや不具合、アイディアなどあったらissueかTwitterにリプライください。僕自身が必要なひと通りの機能は実装し終えたとはいえ、このまま放置するのも勿体無いので、もし一緒に開発してくださる方がいたらとても嬉しいです。

今後は制作時につくった汎用性の高いリソースやツールはバシバシ共有していきたいです。今年の目標です。

Making of “Koji Namaura – B.O.Y.”

ナカコーのMV「B.O.Y.」、モーションデザインとコンポジット担当させて頂きました。

監督はKOTOBUKISUN所属の畳谷哲也さん、CDはファンタジスタ歌磨呂さんです。

モチーフに込めた意味、コンセプト云々はエディターとして関わらせて頂いた自分があまり語ることでは無いのですが、編集していく中で今後使えそうだなーって思ったTipsをメモっときます。

(more…)

ディザ (パターン)

PhotoshopのGIF書き出しで選べる「パターン」というディザ補完が好きだったので素材にしてみました.1fpsの256秒なので,AEエクスプレッションで扱いやすいと思います.

dither_gradient.mov
[license type=”cc0″]

使い道無いな…