Atarabi-Tumblr @atarabi - Tumblr Blog

REAPERのプロジェクトをAEに読み込む

https://github.com/atarabi/RPPLoader.jsx

REAPERはv4?から動画を読み込めるようになって軽く動画編集も出来るようになったわけですが、さすがに単独だときついのでAEにアイテムを読み込むスクリプトを作成。

動画ファイルから音声だけ書き出して編集。完成したら、AEにプロジェクトを読み込んで、その音声ファイルと元の動画ファイルのフッテージを入れ換えた後色々弄るというのが一番ラクかなと思います。

ストレッチマーカーには一応対応してますが、当然全ての機能に対応してるわけではないので、色々機能を駆使すると、ずれたり、エラーが出たり、といったこともあると思うのでその点はあしからず。

プロジェクト設定のフレームレートとビデオサイズを参照するので適宜弄ってください。

新しくコンポを作って配置、アクティブなコンポに配置、の2つを選べるようにしてるんですが、後者の方は、REAPERが各アイテムをGUIDで管理していることを利用して、すでに配置済みのアイテムに関しては無視して差分だけ配置するようにしてます。これを利用すれば音声、映像と並行しながら進められるという算段なんですが、実際にやりやすいかは未知数。

Kikaku.jsxに依存してるので

https://raw.githubusercontent.com/atarabi/Kikaku.jsx/master/dest/Kikaku.jsx

をStartupフォルダに突っ込んだ後

https://raw.githubusercontent.com/atarabi/RPPLoader.jsx/master/RPPLoader.jsx

をScriptUIフォルダに突っ込んでください。

#AfterEffects #script

AEスクリプトの開発環境をTypeScriptに移行した

それにともなって、Startup用の自作ライブラリ的なのも移植しました。以前は複数ファイルに分けてたんですが、単一ファイルに。

https://github.com/atarabi/Kikaku.jsx

https://raw.githubusercontent.com/atarabi/Kikaku.jsx/master/dest/Kikaku.jsx

Typescriptもバージョンが1.7になって大分便利になってきました。ES3環境だと恩恵を受ける機能は少ないんですけど。

VS CodeだとIntelliSenseで気軽に書けるので非常に楽。

#AfterEffects #script

シェイプレイヤーのエクスプレッションでグループのindexを求める。

エクスプレッション内におけるindexは当該Layerのindexのため、シェイプレイヤーのコンテンツ内のグループを用いてindex芸（indexを参照するエクプレッションを構築して複製しまくること）を行うには少々工夫がいる。必要となるのはレイヤーのindexではなく所属グループのindexなのであるが、そのためにはまずその所属グループのプロパティを取得する必要がある。そのために上の階層のプロパティを取得するpropertyGroup()メソッドを用いるわけだが、その前にまず何階層上に辿れば目的のプロパティの到達するかを計算する必要がある。スクリプトではpropertyDepthを用いて、対象プロパティが何階層目にいるのかを取得できるのだが残念ながらエクスプレッションでは用いることが出来ないので自力で求める必要がある。

function getPropertyDepth(property) { var i = 0; try { while (true) { property = property.propertyGroup(); i++; } } catch (e) { } return i; }

求めるには色々な方法があると思うが、propertyGroup()で一つずつインクリメントしながら上の階層に登っていくという方法をとることにした（一番上のルートとなるLayerプロパティでpropertyGroup()を実行するとエラーが出るのでそこでループは自動的に止まる）。上記の関数を用いれば自身のプロパティの深さはgetPropertyDepth(thisProperty)で求まる。

目的のグループプロパティはLayer -> Contents -> Group…とレイヤーから数えて2番目の深さにあるので、

function getGroupProperty() { var propertyDepth = getPropertyDepth(thisProperty); return thisProperty.propertyGroup(propertyDepth - 2); }

とすれば取得することが出来る。同じ親に所属するプロパティの中で何番目のプロパティになるかはpropertyIndexを用いれば良いので

function getGroupPropertyIndex() { return getGroupProperty().propertyIndex; }

と最終的に欲しい値が求まる。

まとめると、

#AfterEffects #script

KikakuPattern 設計意図: パターン

KikakuPattern

パターンは主に有限パターンと無限パターンとの2種類に分類される。無限パターンには”Line”、”Grid”、”Triangular Grid”の3つがありそれ以外は全て有限パターンである。両者の違いは、前者の有限パターンが始まりと終わりが明確に決まっているのに対して、後者の無限パターンがそうではないという一点にある。例えば”Grid”の場合、無限に広がるグリッドの中でレイヤー内に収まる部分だけを抽出していると捉えることができるので、どこが始まりでどこが終わりなのかというのを決定するのは難しい。そこで無限パターンの場合には、周期というものを導入している。周期があれば少なくともその周期内における始まりと終わりというものを決めることが出来るという算段である。このような違いが”Transition”や”1D Map”を適用した際の差異となっている。

#AfterEffects #plugin

KikakuPattern

コミックマーケット88 1日目 8/14(金) Atarabi(東ヒ-06b) 5,000円

#AfterEffects #plugin

KikakuShapes

三角形を座標を用いて描写したかった等々。

#AfterEffects #plugin

AEスクリプトのTypeScript型定義ファイル

https://github.com/atarabi/aftereffects.d.ts

es.d.ts系統のExtendScript全般に関わる型定義ファイルに関してはhttps://github.com/felixSchl/photoshop.d.tsここから。

/// <reference path="./ae.d.ts"/>

のようにae.d.tsだけ参照すれば良い。

AEスクリプトの場合グローバルを共有するので関数内で色々やりたい場合が多いと思うが、関数内でクラスを定義したりといったLocal typesがTypeScript 1.6からなので本格的なものを作るには時期尚早という気がする。ただ、簡単なのを組む分には十分かと思われる。

#AfterEffects #script

Pattern

#gif

グラフエディタを用いてグラデーションを生成する。

KikakuParametricRamp

カラーパラメータ、スライダパラメータのグラフエディタを用いて、一次元テキスチャ、マップを生成する。

やっていること自体は単純で、最初と最後のキーフレームの間の色及び不透明度の時間的変化を空間的変化へとマッピングしているだけ。キーフレームを普通とは異なる目的で使用してるので時間変化させることは出来ない。

エクスプレッションも用いることができるので、例えば不透明度を三角関数的に変動させるといったことも出来る。この場合もどこからどこまでの値を評価すればいいのかを示すために、パラメータの値を使用していなかったとしてもキーフレームを2つ打つ必要がある。

平面にこのエフェクトを適用し、かつShape、Point 1、Point 2に変動がない場合、グラデーションは一意に決定されるはずであるが、カラーパラメータ、スライダーパラメータの元の値が変動している場合に、それを変化と捉えキャッシュが利用されず再描写されるという無駄が発生する場合がある（当然通常のエフェクトの場合パラメータが変化したことによって描写が変化するのでこの動作は至極当然である）。

グラデーションを単に静止画的に利用する場合であれば、プリコンポーズした後、タイムリマップを用いて最初のフレームに固定すれば無駄な再描写はされなくなる。またタイムリマップを用いることによって、インポイント、アウトポイントをそのコンポジションの長さにとらわれず扱えるので、それこそ静止画的に扱うことが出来る。そういうことも企図して下記のスクリプトを作った。

MakeItStill

#AfterEffects #plugin

シェイプレイヤーをトリミングする。

LayerTrimmer

エフェクトのレイヤーパラメータ(例えばParticularのSprite)に、シェイプレイヤー、テキストレイヤーを直接指定するのは便利である。しかし、シェイプレイヤー、テキストレイヤーは仕様としてレイヤーのサイズがコンポジションのサイズと同等となるので、例えば1920x1080のコンポジション内だと仮に中心に小さなテキストしか表示していなかったとしても1920x1080のレイヤーとして扱われ処理が非常に重くなる。したがって、重さを我慢するか、泣く泣くプリコンポーズするかの二択に迫られるわけであるが、どうしても利便性と軽さを両立したい。そこで先の部分的調整レイヤーの考えを利用する。対象のシェイプレイヤー、テキストレイヤーは元のコンポジションにオリジナルとしてとっておき、新たにコンポジションを生成しそこにオリジナルをコピーする。また、更新が必要なときはスクリプトで更新を実行する。コンポジションを生成する際にバウンディングボックスを考慮してサイズを決定するのが付加要素。

レイヤー自体のトランスフォームは考慮しないので、動かしたい場合はシェイプレイヤーの場合はグループのトランスフォーム、テキストレイヤーの場合はアニメーターを利用してください。

#AfterEffects #script

Cinderを用いてCompute Shaderで遊ぶ

CinderでCompute Shaderを気軽に扱えるようになったのでサンプルを参考に遊んでみた。

Cinder-AfterEffects/samples/ParticleCS

Compute ShaderはOpenGLの枠内で簡単にGPGPUをやろう的なヤツで、元のサンプルではパーティクルの更新に使ってたので自分もそれを参考に。GL_POINTSで描写するのは味気ないのでGeometry Shaderでビルボードの平面を生成してFragment Shaderで円を描写をするようにした。

後、OpenGLでブレンドする際は（特にMSAAだと）premultipliedの方が扱いやすいので、void setUnmultiply(bool)でもってpngに出力する際に事前処理としてunmultiplyするか否か設定できるようにした。

#AfterEffects #Cinder #Compute Shader

部分的調整レイヤー

AfterEffects-Scripts/ScriptUI/PartialAdjustment

調整レイヤーにエフェクトを掛けるということは、調整レイヤー以下のレイヤーをプリコンポーズして、そのコンポをソースとしたレイヤーにエフェクトを掛けることとほぼ変わりがない。したがって、プリコンポーズ対象のレイヤーを元のコンポの中にオリジナルとしてとっておき、それとプリコンポ先とのレイヤーとを紐つければ、わざわざプリコンポ先に行く必要がなくなり同じコンポ内で作業が完結できるようになる。つまり、調整レイヤーライクに弄ることが出来るわけである。これを利用すれば部分的に調整レイヤーをかけるということを模擬することができる。といっても、プリコンポーズに起因する問題というのは生じるわけだけども。

#AfterEffects #script

AfterEffectsとCinderを連携させる　その2

Cinder-AfterEffects

setCameraParameter()でもってCinder側のカメラ情報をAE側にベイクできるようにした。また、次期バージョンとなるv0.9.0ではWindowsにおいてアルファマットが生成されない不具合があったんだけど修正されたので、こっちもv0.9.0対応版に切り替えてv0.8.6向けは別ブランチに追いやった。

Transitioning to Cinder 0.9.0 OpenGL in Cinder 0.9.0

v0.9.0ではベクトル、行列関係はGLMに切り替わってOpenGL周りも大分変わるっぽい。

#AfterEffects #Cinder

AEのScriptUIを楽に作る。その2

AfterEffects-Scripts/Startup/KikakuUIBuilder

GitHubに上げた。それに伴って、若気の至りでつけたような機能を削ったり、いくつかの汎用的な機能は別クラスとして外部に出したりしたが(Dependencies: 別途必要)、基本的な部分は変わってない。

一行に一パラメータもしくは複数の同種パラメータという設計方針なので、特殊用途のスクリプトだったり、ぎちぎちにUIを詰め込みたい、といったことは難しいが、汎用的な用途には十分だと思われる。なので、UI作るの面倒、ロジック部分だけに力入れたい、という場合におすすめする。ScriptUIの有る無しでやり直しの容易さが違うので。

後、AfterEffects-Scripts/ScriptUIに使用例をいくつか上げてるのでご参照ください。

#AfterEffects #script

日没する国

#graphic

AfterEffectsとCinderを連携させる

AfterEffects-Cinder Cinder-AfterEffects

任意のフレームに容易に移動出来るランダムアクセス的なAfter Effectsと、Processingのようなシークエンス的なものを簡単に組み合わせて云々したいというのは前からあって、それで以前PanelとProcessing.jsを組み合わせたものを作ったわけですが、拡張性等々に難があるのでCinderでシステムを構築することにした。

AE側はパネルを使用し、OSCを用いてCinderで作ったアプリケーションに命令を出す。

Cinder側は、普通以下のようにAppBasicを継承して色々実装していくが（名前空間は省略する）、

class CinderApp : public AppBasic { public: void setup() override; void update() override; void draw() override; };

それに代えてAppAEを継承し、接尾辞にAEがついた仮想関数をオーバーライドしていく。

class CinderAEApp : public AppAE { public: void initializeAE() override; void setupAE() override; void updateAE() override; void drawAE() override; };

基本的には対になるように設計してあるが、レンダリング開始時に初期化する必要性があるのでそれはsetupAE()に任せ、アプリケーション自体のセットアップとしてinitializeAE()を導入した(通常のsetup()に同じ)。

AEから操作したパラメータを使いたい際はinitializeAE()の中でaddParameterを呼べばよい。

void CinderAEApp::initializeAE() { addParameter("Slider", 0.f); addParameter("Color", Color{1.f, 0.f, 0.f}); }

値を取得したい場合はgetParameterを呼ぶ。また、Cinder側からAE側へ値をベイクしたい場合はsetParameterを呼ぶ。

void CinderAEApp::updateAE() { float slider = getParameter("Slider"); Color color = getParameter("Color"); setParameter("Point", Vec2f{50.f, 183.f}); }

AE側からカメラの情報を送りたい場合は、他のパラメータ同様にaddCameraParameterを呼ぶ。するとCameraAEが追加されるので、Fovとカメラ行列をベイクする(カメラ関係のパラメータが変更される度に手動でする必要がある)。

今後の予定としては、Cinder側のカメラの値をAE側にベイク出来るようにする、CinderのglNextブランチに対応する、くらいかなぁ。

#Aftereffects #Cinder

AEのエクスプレッションでalertを使う。

AEのエクスプレッションではスクリプトと違ってalertが使えないが、

function alert(text) { throw new Error(String(text)); }

こんな感じで例外を投げればダイアログが表示されるのでそれで代用する。

#tips #Aftereffects

Trending Blogs

Recently Viewed Blogs

Atarabi-Tumblr