![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/44b9e1ab-e791-49ad-8c04-4e4263091265_rw_1200.png?h=133d97fe7905d3a6e32de9070f189ae4)
1. はじめに
TOP=Texture Operator
TOPはTexture Operatorと呼ばれ、静止画や動画を含む2D画像を扱うOperatorである。TOPを使いこなせば、PhotoshopのフィルターやAfter Effectsのビデオエフェクトのような画像処理をリアルタイムに行うことができる。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/da2881c7-a468-49a7-8780-5c35c11fd6a9_rw_1200.jpg?h=224bb334eac9ee154840157511a0fc91)
2. 参考サイト
本稿の内容は以下のサイトを参考にしている。
3. TOPの使い方
例外的なものもあるが、TOPは機能によって入力/ソース、効果/フィルタ、出力の3つの種類に分けられる。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/821bf153-2174-4e02-a462-981148615e1f_rw_600.jpg?h=c5669b64b2bc9af9af17e712ca5622c5)
入力/ソース
・Movie File In
・Video Device In
・Constant
・Ramp
・Circle
・Noise
・Text
・Video Device In
・Constant
・Ramp
・Circle
・Noise
・Text
効果/フィルタ
・Monochrome
・Level
・Blur
・Flip
・Mirror
・Tile
・Transform
・Compose / Add / Multiply / Over / Screen
・Displace
・Edge
・Lookup
・Level
・Blur
・Flip
・Mirror
・Tile
・Transform
・Compose / Add / Multiply / Over / Screen
・Displace
・Edge
・Lookup
出力
・Out
・Movie File Out
・Video Device Out
・Movie File Out
・Video Device Out
4. 準備
サンプルプロジェクトのオペレータを削除して、Palleteを閉じる。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/7a2fbdcb-f995-4bf9-b04d-2898c537d9fe_rw_1200.jpg?h=7227140bb5af16df93ae001936ce622c)
5. 入力/ソース
Movie File In TOP
画像や映像を読み込むことができるオペレータ。パラメータウィンドウのFileで画像や映像ファイルを指定する。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/ea891104-7fd4-4b99-8bd7-97106e3fd330_rw_1200.jpg?h=c9e8fb67cc7e1de59fa72a209548fac9)
Video Device In TOP
映像機器を接続することができる。ノートPCではウェブカメラが接続される。パラメータウィンドウのDeviceのプルダウンリストから接続機器を切り替えることができる。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/dfe157ba-f37c-45b3-998c-33f5e141bb78_rw_1200.jpg?h=baf5d4a1783f1c24706c24d305b0b9da)
Constant TOP
RGBA(0〜1指定)でカラーマットを作成できる。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/bbb09db2-2fc6-45a6-9da7-6bce6b1b9cb2_rw_1200.jpg?h=d0744009ae0a27fa328d6e42ed982b80)
Ramp TOP
様々なグラデーションを作成できる。パラメータウィンドウで色指定、TypeでVerticla、Horizontal、Radial等の種類を変更することができる。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/c3a7f16d-649a-4ddc-9e11-f68aad263b03_rw_1200.jpg?h=e6315d36d7a16dab4bceb53830912dca)
Circle TOP
正円、楕円が作成できる。ボーターも設定可能。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/46b811a7-23bf-46f1-af66-aa421c9f103e_rw_1200.jpg?h=aef06f081a718022ea25d8feb89ffdf4)
Noise TOP
パラメータにより様々なノイズが作成可能。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/7af5b781-2d69-4c70-b63b-d9dd0ab43a57_rw_1200.jpg?h=310064c3307d8f9ab80202e7cc3102a8)
Text TOP
文字が作成可能。フォント指定、文字色、背景色の設定が可能。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/ac431686-a912-4508-8d65-842323596a47_rw_1200.jpg?h=fc2521dfee327f4db71f3db889e47f7e)
6. 出力
Out TOP
出力用TOP。サンプルプロジェクトでは、ルートのContainer COMにout1が指定されている。Nullの名称をout1にしても動作可能なので、Out TOPの必然性があるかは不明。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/15688b9a-9491-440a-a14f-b3662104eec6_rw_1200.jpg?h=0e092888a7fc9410d220a5e7cf23bef8)
Movie File Out TOP
RecordのON/OFFにより録画可能。各種フォーマットに対応、映像データだけでなく、イメージシーケンスも書き出し可能。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/39c9e7c5-636f-4b8c-9126-f854d44aa522_rw_1200.jpg?h=5d47eaf6cb23e8e237109feef3558c68)
Video Device Out TOP
Blackmagic Design等の対応機器を接続すれば、直接機器を通して映像出力することが可能。
7. 効果/フィルタ
Monochrome TOP
白黒画像へ変換。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/56239194-7085-4dd8-8b61-f4039d717c08_rw_1200.jpg?h=d03e590cb191d598e9b16052b6934ba0)
Level TOP
Brightness、Gamma、Contrast等を変更可能。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/24862cac-c0fc-465a-865b-530b11d1fdc7_rw_1200.jpg?h=036fb6832dc1ba5f1ea4726af54f0f83)
Blur TOP
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/522f3ac2-7111-4dea-96e6-bee1e8dcbdc6_rw_1200.jpg?h=354760cc16bf1b210d9e7730bba828e3)
Flip TOP
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/b17c8f7d-0225-4ab0-ae3f-be3b332b919a_rw_1200.jpg?h=0c2f0239abf5f096335faa476cfe953f)
Mirror TOP
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/6bf6f182-3cc0-412f-a64a-eb05e871263c_rw_1200.jpg?h=6edd79b326f0bc53eb39cb6fcf7701fa)
Tile TOP
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/1c4e5af4-8b0d-4902-b887-e6e62c541890_rw_1200.jpg?h=4599c404c94dc64d4d80dbcb905939a7)
Transform TOP
移動、回転、スケールが可能。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/5d8c4330-1638-4b0a-ba13-634f8fd82728_rw_1200.jpg?h=435bc973329bbd45300150ae4a229949)
TileタブのExtendをRepeatにすることでタイリングが可能。Tile TOPは4分割上限だが、Transform TOPでのタイリングは無限に作成可能。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/44682243-8dc8-449e-b2aa-b6713efb0f8a_rw_1200.jpg?h=3dd9d3fd2c2d4e72b3b5804fd8262364)
Composite TOP(Add / Multiply / Over / Screen他)
2つ以上の画像を合成するオペレータ。Operationプルダウンリストから、Add / Multiply / Over / Screen他、様々な合成を行うことができる。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/fd9dfb71-1cb8-42d4-b809-245435effaab_rw_1200.jpg?h=ffa0c0b003319f05f7184ea11d20fb59)
※Add TOP、Multiply TOP、Over TOP、Screen TOP等はCompositeのOperation設定を変更しなものと同じ。
Displace TOP
グレースケール画像をDisplacement Map(置き換えマップ)として、変形させることができる。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/1b4a64e3-4900-4724-a88b-3e62f496acf1_rw_1200.jpg?h=122b399409ec407d0863f6996097e6ba)
上図は、Displace TOPのDisplace Weight: 0.1, 0.1、Noise TOPのHarmonics: 0, Exponent: 1.0の設定。Noise TOPのTransform Xを変更すると面白いアニメーションが作成できる。
Edge TOP
エッジ抽出。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/4c5e10bc-5d03-402a-b69e-22957f24f988_rw_1200.jpg?h=35f3608489c9860529cc872dbff5ac3b)
Lookup TOP
Ramp TOPと一緒に使うことで、イラスト風なエフェクトを作成することができる。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/0e3c5635-64a4-40e7-b5e7-acfee9975eec_rw_1200.jpg?h=9cca775c46caf0218a5d825bfc9baa7c)
上図では、Ramp TOPのInterpolate Notches をStepにした上で色調整、Lookup TOPのIndex ChannelをLuminanceに変更したもの。
8. 分身
Cache TOPのOutput Indexを-32にして、Composite TOPのDaken Colorで元画像と合成する。時間差の合成による映像表現。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/0ed8c80d-b935-4d54-bbcb-56099ffddb50_rw_1200.jpg?h=ee26d4db05d3b335dcd335a4e8e88ac4)
9. チュートリアル事例
LookupやDisplacementを理解できれば、下のようなチュートリアルが作成可能。
JavierCasadidioのYouTubeチャンネルには、おしゃれなチュートリアルが多数アップされているので参考になる。
10. 透明背景を黒にする方法
画像の透明部分はNetwork EditorのOperator上ではチェック柄で表示される。ViewerやPerform Modeを利用すれば、透明部分は黒で表示されるが、Network Editorの段階で透明部分を黒にしたい場合も多い。以下の5つの方法が考えられる。④が一番カンタン。
方法① Over
ソース画像(下図ではMovie File In TOP)とConstant TOP(黒設定)をOver TOPで合成する。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/d612422a-8297-4c45-aad6-a61c73c4116d_rw_1200.jpg?h=f059246543da396eee2b2084847b0188)
Over TOPのFixed LayerをInput 1に設定して、Movie File In TOPの解像度に合わせる。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/74d0f96c-1666-4f84-9080-46bdf1a43791_rw_600.jpg?h=f9f64a02d612c55d9ac0d5be923b17ce)
方法② Composite TOP
方法①のOver TOPをComposite TOPに入れ替えたもの。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/b8db801f-0404-47ee-a83e-c227087fa2c0_rw_1200.jpg?h=ccfddf78ef9529d9bc75f05027ce01ec)
Composite TOPのOperationをOverに設定。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/e0092421-f3ae-4161-b62e-8182077300d2_rw_600.jpg?h=c1c114aa669ecc51fafb18bd24c66f3f)
Fixed LayerはInput 1に設定してMovie File In TOPの解像度に合わせる。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/20194694-e7d8-4a83-a7d7-e4de1109e2ba_rw_600.jpg?h=994b81593773ef03085b83b70254d5eb)
方法③ Transform TOP
Transform TOPだけで、背景を黒に設定することができる。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/e20ae41a-dcd5-45e4-ba11-0381554dea9b_rw_1200.jpg?h=903db1fb2befe4346d872fe962be8970)
Comp Over Backgournd ColorをON、Background Colorを0:0:0:1(R:G:B:A)に設定する。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/7c194c03-30f6-41e8-abc9-c6577959b72b_rw_600.jpg?h=671944069e6de52d21124a5784c9f239)
方法①〜③では黒以外の色も設定可能。
方法④ RGB Key TOP
本来は指定したRGBの色範囲をキーとして抜く(透明にする)ための用途だが、初期値のままで透明部分を黒にすることができる。これが一番カンタン。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/ffe86b71-ce1b-4faa-9b37-18855a4bbb13_rw_1200.jpg?h=88c2d4da2bf6e652e9bc52716ed34730)
方法⑤ Preferences
EditメニューからPreferencesを開く。TOPsタブでViewer BackgrondをChecker BoardからBlackへ変更すうr。ただし、この方法では素材画像が黒なのか透過なのかわからなくなるのでオススメしない。
![](https://cdn.myportfolio.com/9dc1d2d9-3bfc-4c09-8745-b82529bfc2d1/70a22c28-9ba4-4b72-a145-196a6432145c_rw_600.jpg?h=0f8b813b63e91f6889d144546f01bf9a)