After Effectsのエフェクトプラグインを作ってみよう！　その１

# この記事を読む前に

AEのプラグインを作成するにあたって、記事が古かったりそもそも日本の記事があまりにも少ない印象だったので書いてみました。

初めてこういった記事を書くので慣れていない部分が多く、とても読みづらくなってしまうかもしれませんがご容赦頂ければ幸いです、、！
また間違った知識の元書いてしまっている部があった場合はご指摘いただけると大変助かります！

# はじめに

AEのエフェクトプラグインを作るにあたって、以下のような知識が前提となります
- C++である程度コーディングができる
- 画像処理の基礎的なアルゴリズム
- 並列処理プログラムが書ける

と言ってもハードなプラグインを作ろうとしない限り
C++でコーディングができることと画像処理の根本的な仕組みが分かっていればある程度の処理プログラムは書けます
( 実際自分も超専門的なアルゴリズムを理解しているわけではないです笑 )

まあそんなに頭固くして物事考えても仕方ないので取り合えず触れてみる精神が大切だと思いますので興味があれば十分です！

今回はいきなり難しいことをやってもよくわからなくなるだけなので、
簡単に色素の順番を入れ替えるだけの処理書いていきます。

# 環境
今回は以下の環境で開発していきます。
Adobe社のソフトウェア 拡張機能・プラグイン のSDKは[こちらのサイト](https://developer.adobe.com/console/home)からダウンロードできます。
- Windows 10
- Adobe After Effects 2022
- Microsoft Visual Studio 2019
- October 2021 After Effects SDK Windows

# プラグインテンプレートのあれこれ
### 概要
After Effects のプラグインSDKにはいくつかのテンプレートが用意されています。

例えば After Effects その物を拡張する専用のものなどがありますが、
ここではそこまで触れないので興味がある方は[こちらの記事](https://qiita.com/Liesegang/items/528438c409fe7d3975a8)で詳しく紹介されているのでご覧ください。

### 解凍
After Effects のプラグイン専用SDKをダウンロードしてきたら
今後プラグインの開発をしていく為のディレクトリを用意して解凍しておきます。

例：C:\AESdk\　など
#### ※注意
解凍するときの注意点として
AESDK は配布されているテンプレートそのものを改造してコーディングしていくので、
将来的に移動したくなる場合などを考慮して解凍することをお勧めします。

### テンプレートの選び方
今回触る部分はいわゆる エフェクトプラグイン の開発なので、
主に「**Examples**」フォルダの中の「**Effect**」フォルダ内のテンプレートと「**Template**」フォルダ内のテンプレートを選ぶと良いです。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529815/410e6687-06bb-0592-869d-104f266d8cb1.png)
今回は基礎的な内容が簡単に書かれている **Template** フォルダ内の **Skeleton** テンプレートを改造していくことにします。

# Skeletonテンプレートの改造
### テンプレートのコピー
今後開発するにあたって、いちいちテンプレートをダウンロードしてくるのはめんどくさいので
最初にコピーしてから改造することをお勧めします。

コピーする際はプロジェクトのフォルダごとコピーしてしまいましょう！

今回はコピーしてからフォルダ名を **color_manager** とします。

# プロジェクトのオープン
コピーできたらフォルダを開き **Win** フォルダの中にある **Skeleton.sln** の名前も変更してしまいます。
先ほどと同様に **color_manager.sln** といった具合に変更します。

無事変更できたらそのままソリューションファイルを開きます。

開いた際に VisualStudio から
「Skeleton に対するセキュリティ警告」
といったポップアップが出現する場合がありますが、特に気にせずOKで大丈夫です。

開いたら画像のようなポップアップが出現するので
お使いの Windows SDK のバージョンなどに合わせてOKをクリックします。
( 通常はデフォルトのままで問題ないです )
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529815/c504871a-8f7c-7aeb-941b-d73707ae526d.png)

無事再ターゲットが完了すればソリューションが問題なく開かれます。
※ここで失敗するようであれば先ほどの Windows SDK などの設定が悪い可能性があるのでやり直してみてください。

### プロジェクトの名前の変更
まずビルドした際の拡張機能の名前を変更していきます。
( なんだかんだ言ってここが一番めんどくさかったりします笑 )

まずソリューション内に **Skeleton** という名前の C++ プロジェクトがあるのでこいつの名前を変更してやります。
普通に右クリックから「名前の変更」をしてやれば問題なく名前が変更されます。

ただこれだけでは After Effects に読み込ませたときにプラグイン名が変わっていないで、
次にそっちの設定もしてやる必要があります。

#### Skeleton.cpp

C++ プロジェクト内の **Skeleton.cpp** を開きます。
下の方に **PluginDataEntryFunction** という名前の関数あります。

こいつは簡単に言ってしまえば After Effects がこのプラグインを読み込んだ時に、どんな内容のプラグインなのかを確認するための関数です。

ローカル変数 result に詳細な名前などが設定されているので、こいつらを変更してやります。

- Name : プラグイン名
- Match Name : After Effects が内部でコールする際の名前？
- Category : エフェクトの収納カテゴリー名
```Skeleton.cpp
...

result = PF_REGISTER_EFFECT(
		inPtr,
		inPluginDataCallBackPtr,
		"color_manager",		// Name
		"Scald color_manager",	// Match Name
		"Scald",				// Category
		AE_RESERVED_INFO
);

...
```

#### Skeleton_Strings.cpp

次に **Skeleton_Strings.cpp** を開きます。

グローバル変数に **g_str** というものがあります。
これはエフェクトプラグインの情報部分にあたるもので、以下のように表示されるテキスト部分を設定しています。
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529815/ce215dc5-4948-8f88-c68d-9e660353d76a.png)
辿っていくと分かりますが、厳密にはSkeleton.cppのAbout関数で定義しているようですが、こうして別ファイルで定義しておけば書き換えがスムーズになるという意図があるのでしょう。

下の二つ ( GainとColor ) に関してはエフェクトコントロールに表示されるテキストの名前を定義しています。
これに関しても上で語っているものと同様です。

Skeletonテンプレートではこのような手法をとっているようです。

まあ適当にそれっぽく書いておきます
```Skeleton_Strings.cpp
...

TableString		g_strs[StrID_NUMTYPES] = {
	StrID_NONE,						"",
	StrID_Name,						"color_manager",
	StrID_Description,				"金とか買っちゃって～",
	StrID_Gain_Param_Name,			"Gain",
	StrID_Color_Param_Name,			"Color",
};

...
```

これでOK！
と思いきやまだ一段階あるようです、、、

はぁ〜〜〜〜(クソデカため息)

#### SkeletonPiPL.r

お次は **Resources** ディレクトリ内の **SkeletonPiPL.r** を開きます。

ここにきてなぜR言語？
と思った方も多いことでしょう。
( 正直自分も思いました笑 )

ここに関してはよくわかりませんが、おそらく After Effects の構造上Rのリソースファイルで読み込むことが都合が良いのでしょう。
まああまり深く考えることでもないのでそっとしておいてやります笑

中身の**16行目**あたりから**20行目**と、**60行目**あたりの部分を先ほどのSkeleton.cppの時と同様の値を設定してやります。
```SkeletonPiPL.r
...

/* [2] */
Name {
	"color_manager"
},
/* [3] */
Category {
	"Scald"
},

...

/* [11] */
AE_Effect_Match_Name {
	"Scald color_manager"
},

...
```
これでようやく名前の変更が終わりました。

いやめんどくさすぎるやろ。。。

# メインプログラムのコーディング
メインプログラムをコーディングする前に各関数の処理内容を説明したいと思います。

まず **Skeleton.cpp** を開きます。

### それぞれの関数の役割
色々とややこしそうな関数軍がありますが、それぞれ以下のような役割を担っています。

```
PluginDataEntryFunction - プラグインエントリーポイント
EffectMain - AEからコールされた際に毎回呼ばれるメイン関数
| About - プラグインの概要を設定
| GlobalSetup - 互換性などの設定
| ParamsSetup - エフェクトコントロールのUIを設定
└─ Render - メインの画像処理
   └─ MySimpleGainFunc16 および 8 - それぞれのカラービット数に応じた画像処理
```

他にも**out_flags**フラグなどを立てることで処理内容は変わったりしますが、今回は扱わないことにします。

### Render関数の引数リスト
ここでにメインの画像処理を行いたいので **Render** 関数に移動します。

Render関数の引数は以下のような内容で構成されています。
>- in_data : 入力画像の詳細情報 ※画像データではない
>- out_data : 出力画像の詳細情報 ※こちらも画像データではない
>- params : UIで設定されたパラメータの構造体ポインタ
>- output : 出力画像データのポインタ

ややこしいのが**in_data**や**out_data**は入出力画像の詳細情報の記された構造体ポインタであり、画像データその物ではないという点です。
反対に**output**が出力画像データのポインタです。

つまり**in_data、out_data**から画像の縦横幅などを取得し、その情報をもとにforループなどで**output**の出力画像の行列データを処理していくことになります。

まああまり言葉で書き綴ってもわかりづらいだけなので実際にプログラムをコーディングしながら説明していきます。

### イテレータとMySimpleGainFunc

なんかごちゃごちゃと書かれていますが、ざっくり説明すると「AEGP_SuiteHandler」クラスを用いてそれぞれ8、16カラービットの配列をイテレータを利用して**MySimpleGainFunc8, 16**に処理させているといった具合です。

ですがとても見にくいので**ローカル変数errとreturn部分を除いて**中身を一度空にしてしまいます。
**err**とは処理中に何かしらの不具合が起きたときに万が一スタックオーバーしないようにAEに知らせるために設定するフラグです。

MySimpleGainFunc8, 16も消してしまって構いません。
```Skeleton.cpp
...

static PF_Err Render(
    PF_InData     *in_data,
    PF_OutData    *out_data,
    PF_ParamDef   *params[],
    PF_LayerDef   *output
) {
    PF_Err err = PF_Err_NONE;

    return err;
}

...
```

### 入力画像の取得

勘の良い方はお気づきかと思いますが、この状態では入力画像データがありません。
なので取得してあげます。

取得方法はいたって簡単で引数の**params**配列に**0**を指定し、中身のレイヤーデータをポインタ変数で保管してあげます。
uとかldとかその辺はおまじないとしておきます。
```Skeleton.cpp
...

PF_Err err = PF_Err_NONE;

PF_LayerDef* input = &params[0]->u.ld;

return err;

...
```

### 必要なデータの割り当てと色深度分け

まずそれぞれ必要なデータをわかりやすくローカル変数にまとめます。
```Skeleton.cpp
...

PF_Err err = PF_Err_NONE;

PF_LayerDef* input = &params[0]->u.ld;

int w = input->width,
	h = input->height,
	r = input->rowbytes;

    if (PF_WORLD_IS_DEEP(output)) {

		PF_Pixel16* src = (PF_Pixel16*)input->data;
		PF_Pixel16* dst = (PF_Pixel16*)output->data;
		r /= sizeof(PF_Pixel16);

	}
	else {

		PF_Pixel8* src = (PF_Pixel8*)input->data;
		PF_Pixel8* dst = (PF_Pixel8*)output->data;
		r /= sizeof(PF_Pixel8);

	}

return err;

...

```

wとhはそれぞれ画像の横幅(width)と縦幅(height)です。
rは画像データが格納されている配列の幅です。

srcとdstにそれぞれ入出力画像データにアクセスする構造体ポインタをキャストしておきます。

**PF_WORLD_IS_DEEP**マクロは現在のカラービット数が16ビットの場合に**true**を返します。つまり16ビットの場合は**PF_Pixel16のサイズ**、8ビットの場合は**PF_Pixel8のサイズ**で割ってあげる処理になっています。

**PF_Pixel~**は1つの画素が格納されている構造体です。
8, 16, 32それぞれ red, green, blue, alpha の4チャンネル分格納できる構造体です。

### 鉄板の２重ループ処理

画像処理と言ったらやっぱり2重ループ！
基本的には列と行をそれぞれfor文でループするのが鉄板なのではないでしょうか！(タブン)

ということでfor文の2重ループで入力画像の画素にアクセスし、同じ位置の出力画像の画素に割り当てていきます。

画像処理に慣れている方からすれば当たり前の話ですが、画素へのアクセスには一癖あります。
例えば **3列 4行目** の画素にアクセスするには以下のように記述します。
```
src[4 + 3 * r]
```

今回は**RGBの順番を入れ替える操作をしたい**ので、**redをblue, blueをred** で割り当てます。
```Skeleton.cpp
...

PF_Err err = PF_Err_NONE;

PF_LayerDef* input = &params[0]->u.ld;

int w = input->width,
	h = input->height,
	r = input->rowbytes;

    if (PF_WORLD_IS_DEEP(output)) {

		PF_Pixel16* src = (PF_Pixel16*)input->data;
		PF_Pixel16* dst = (PF_Pixel16*)output->data;
		r /= sizeof(PF_Pixel16);

        for (int y = 0; y < h; y++) {
			for (int x = 0; x < w; x++) {

				dst[x + y * r].red		= src[x + y * r].blue;
				dst[x + y * r].green	= src[x + y * r].green;
				dst[x + y * r].blue		= src[x + y * r].red;
				dst[x + y * r].alpha	= src[x + y * r].alpha;

			}
		}

	}
	else {

		PF_Pixel8* src = (PF_Pixel8*)input->data;
		PF_Pixel8* dst = (PF_Pixel8*)output->data;
		r /= sizeof(PF_Pixel8);

        for (int y = 0; y < h; y++) {
			for (int x = 0; x < w; x++) {

				dst[x + y * r].red		= src[x + y * r].blue;
				dst[x + y * r].green	= src[x + y * r].green;
				dst[x + y * r].blue		= src[x + y * r].red;
				dst[x + y * r].alpha	= src[x + y * r].alpha;

			}
		}

	}

return err;

...
```

# ビルドの前に

### プリプロセッサの定義
さて、これで一応の処理は書き終えました！
早速ビルドしてみましょう...とその前に、

**Skeleton.h** を開き、#pragma once の後に次の定義を書き加えておきます。
```Skeleton.h
...

#pramga once

#define WINDOWS_IGNORE_PACKING_MISMATCH

...
```

これを書き加えないとビルド時にセキュリティチェックが働きビルドできない場合があります。
本来は何かしら対策をするべきなのですが、そもそもSDKのテンプレートがそのような対策をとっていないようなのでどうしようもありません。

### 環境変数の設定
After Effects のSDKではデフォルトで**AE_PLUGIN_BUILD_DIR**という環境変数を抽出場所として設定されています。
なのでご自身の環境変数に追加してやる必要があります。
( まあそれか単にAEのプラグインディレクトリを自力で指定してやっても良いです )

システム環境変数に**AE_PLUGIN_BUILD_DIR**変数を追加し、ディレクトリパスを**After Effects のプラグインディレクトリ**を指定して保存します。

例：C:\Program Files\Adobe After Effects 2022\Support Files\Plug-ins\

※環境変数の設定方法は割愛します。
※場合によってはVisualStudioを再起動させる必要があります。

# ビルド
それではプログラムをビルドしてみます。
無事にビルドできたら After Effects を起動します。
( ここでVisualStudioでデバッガをAEに設定してあげると楽に起動できます )

起動したら適当に画像などを読み込んでおきます。

エフェクトメニューを開くと、先ほど設定したカテゴリー名でメニューが追加されて無事エフェクトが認識されました。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529815/4fa112a0-65e1-0dbe-4fa1-94d541aa5c87.png)

ではこいつを適用してやりましょう！
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529815/b7f91ea9-88f3-dfd5-3349-c7e8bdab1f28.png)
すると無事色素の順番が入れ替わったエフェクトが適用されました。

# おわりに

今回書いたプログラムは[GitHub](https://github.com/sca1d/color_manager)にて公開してますので、良ければそちらも参考にしてください！

また、より深い知識や既存のクラスなどを活用したプログラムを書きたい場合は[こちらのガイド](https://ae-plugins.docsforadobe.dev)を参考にしてみてください。

またやる気が起きたらもうちょっと深い部分を書いてみるかもです～
( 超絶気分屋なのであんまり期待しないでください笑 )

お疲れさまでした！

# 参考
- [After Effects SDK Guide](https://ae-plugins.docsforadobe.dev/about.html)
- [After Effectsの拡張機能を開発しよう](https://qiita.com/Liesegang/items/528438c409fe7d3975a8)
- [アニメ制作者のためのAfterEffectsプラグイン作成入門(第3回)　プラグインの改造（修正) スケルトンの作成](http://ae-users.com/jp/resources/2010/05/%E3%82%A2%E3%83%8B%E3%83%A1%E5%88%B6%E4%BD%9C%E8%80%85%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEaftereffects%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E4%BD%9C%E6%88%90%E5%85%A5%E9%96%80%E7%AC%AC3/)