【TouchDesigner】空間が切り替わるエフェクト

[TouchDesigner Advent Calendar 2023](https://qiita.com/advent-calendar/2023/touchdesigner)の17日目です。

この記事では最終的にこのような、空間がワープしたようなエフェクトを作れるように進めていきます。

![out (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/d28502e9-4e83-9dbc-e507-b37546fea8dc.gif)

プロジェクトファイルは[こちら](https://github.com/atsonic/TD-ScanlineEffect)にアップしています。
※プロジェクトファイルにニケ像のモデルは入ってません。ただのBOXに変えています。

# はじめに
本エフェクトは、Aftereffectsのこちらの動画を見て、TouchDesginerでの実装を試みたものになります。
https://www.youtube.com/watch?v=VJJkCRHqyno

# 作り方
### 1.シーンの準備
このエフェクトは同じパースの2つの空間を、スキャンラインを走らせトランジションするというエフェクトになるため、同じパースの2つの空間を作ります。

今回は下記のようなシーンを適当に作っています。

* 1つ目のシーン
![scene2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/028e3bf2-981a-9299-d58b-92efe2a37247.png)

* 2つ目のシーン
![scene1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/4422a135-53c2-fde9-ec84-d72d552f6fa2.png)



:::note info
エフェクト自体は動的に作れるため各シーンはTouchDesigner内で作っても、fbx等の外部で作成した3Dモデルを読み込んでもどちらでも大丈夫です。
※2Dイメージでもエフェクトは作れますが深度マップが必要になります。
:::

### 2.Depth TOPで深度イメージを作成
TouchDesignerには「**Depth TOP**」という、空間の深度を0~1（黒から白）で表現する便利なオペレーターがあります。
Render TOPから深度マップを動的に作成してくれるものですが、後から出現するシーンのRender TOPをつなぎましょう。

それと、Camera COMPのクリッピング設定のNearの数値を変更するとDepth TOPも変わっていくので適宜調整しましょう。

![スクリーンショット 2023-12-17 115019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/d0f23d07-fc91-589b-09ae-e32c7072dbe2.png)



ついでですが、このDepth TOPとRender TOPを「**Luma Blur TOP**」に接続すると、Dof効果が出ます。
せっかくなので入れておきましょう。

![スクリーンショット 2023-12-16 212938.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/9a2576cc-2e48-e156-d001-075d6443da20.png)

それと、Depth TOPのPixel Formatがデフォルトでは「Depth Texture」になってますが、今回はアルファチャンネルも使いたいので「**32-bit float(RGBA)**」に変えておきます。

![スクリーンショット 2023-12-16 213045.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/c711e84c-be83-72bb-8ac5-3defc840d2cd.png)

### 3.Chroma key TOPでマスクを作成
次に2のDepth TOPを手前から徐々に出現させていき、後から出現するシーンのマスクとして使用します。

その徐々に出現する表現にChroma key TOPを使いますが、下記のパラメーターを0から1に動かすことで、Depth TOPの黒から白にかけ徐々に表示されるようになります。

![スクリーンショット 2023-12-16 215347.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/13e05ac7-43cd-3401-d9ea-162f2dad7b85.png)

こんな感じ
※黒い部分は本当は透過されています。

![out.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/1c3634a2-6934-51d6-1fe6-9c2463772806.gif)

これとConstant TOPの白をComposite TOPにつなぎ、Operationを**A TOP**にすることで、マスクを作ることができます。

![スクリーンショット 2023-12-16 223754.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/bc8d3b1d-d11f-0fd9-4437-a53db6e701f7.png)



### 4.Chroma key TOPでスキャンラインを作成
今度は別のChroma key Topを使って、徐々に現れるシーンの境界を表現するスキャンラインを作成します。

先ほどと同じようにValの値を変えていきますが、今度はMinとMax両方同時に動かします。
Minの値をMaxの値から少し小さく設定すると、特定の色の範囲だけ取り出すことができます。

![スクリーンショット 2023-12-16 221926.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/3da85117-48fb-03cb-79da-941d01a89d02.png)

こんな感じになります。
※MinとMaxの差を調整することでスキャンラインの幅を変えることができます。

![out.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/496f3cf2-05df-292b-a400-2b23f8d03b48.gif)

この形をベースに色を変えたりBloomをかけたりして良い感じに調整します。
※Bloom TOPは使い勝手があまり読めてないので[Hossie TouchDesigner PostEffects](https://backspace.tokyo/research/hossie-touchdesigner-post-effects/)のBloomを使いました。

![スクリーンショット 2023-12-16 222652.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/a85a1ce3-9b88-81a2-8fd6-8c4f944e3d5f.png)

:::note info
参考にしたチュートリアルではAEのWiggleで画面を揺らすような効果を入れていました。今回細かい説明は省きますが、githubにアップしたtoeファイル中ではCHOPやDistortionなどを使って再現しています。
:::

### 5.各TOPを重ねる
最後に今まで作成してきたTOPをComposite TOPで重ね合わせて完成です。

![TDMovieOut.0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/c2ad219d-d93a-0508-ee5f-62c545a02335.png)

# 最後に
やはりAfter Effectsのモーショングラフィックスは参考になるものが多く、良い刺激になりますね👍