TouchDesignerでみんな大好きグロー(glow)エフェクトをやってみよう！

ナカジ(@cp_nakajun)です。

タイトルに「みんな大好きグローエフェクト」というフレーズを使いました。

Glowエフェクトとはざっくり「発光」させる効果のことです。よく見ますよね。

このフレーズは以前「Notch Study Night」際に講師のkatsuyatsukuiさんがこの言い回しをされてて、妙に気に入ってしまったので使わせてもらいました！

ところで今回タイトルになぜこのフレーズを使ったのか、それは

初めてVisual(映像)を作ってみたくてTouchDesignerを触るような方のテンションを１つアゲられたらと思ったのです。

もともと映像の知識・スキルがあるTouchDesignerビギナーの方はきっとオペレーターを探せばチャっと作れちゃうと思います。

でも本当に「はじめての一歩」を踏み出し始めた時には「とりあえず」でもグローできると嬉しいんじゃないか？な、と

だってきっと「みんな大好き」ですよね…

ということで今回は「初めてのTouchDesigner、初めてのビジュアルコーディングにちょっと味付けしてみよう！」的な記事です。

グローエフェクトをやってみる前に

まずはグローさせる「モノ」を準備しましょう。
本記事では割愛させて頂きます。

本「Visual Thinking with TouchDesigner – プロが選ぶリアルタイムレンダリング&プロトタイピングの極意」を参考にする。

もしくはネット。例えばToyoshi MoriokaさんがQiitaに「TouchDesignerを勉強する時に参考になるサイトまとめ」という記事を書かれてますので紹介されているサイトを参考にされるとか

本当に「初めて」の方、ここだけは頑張ってください。

TouchDesignerでグロー(Glow)エフェクト

今回、とりあえず用意したのは単純なレクタングルです。

グローエフェクトの作り方はすごく雑に言うと「ブラーと合成」、ボカして重ねる。
ですかね。

どんな感じにしたいかという目的や、人の好みによっていろんな方法があります。

今回はAfter Effectsでのやり方を解説されている以下の記事

「After Effectsで綺麗なグローをつくるテクニック」

を参考にGlowさせて見ようと思います。

こういう他のツールのノウハウをサクッと参考にできるのもTouchDesignerの魅力ですね！

上記サイトを参考にした要点は

• ブラー量の違うレイヤーを重ねる(下のレイヤーの倍）
• スクリーン合成か加算合成で重ねる

というわけでTouchDesignerのオペレータのレイアウトは上記の画像のようになります。

• 設定の違う４つのブラー
• そのうち３つはCompositeオペレータでScreen合成
• 残りの１つとScreen合成したものを加算合成

４つのブラーの各設定は以下の画像のようにしてます。

[Filter Size]パラメータが倍になるようにしています。
（CHOPをつかって一括で変更できるようにしてます。）

Screen合成は[Composite]TOPのoperationパラメーターでScreenを選択してます。

パラメーターはお好みで適時調整してください。

この感じで先のようになると思います。

TouchDesignerらしくバナナを光らせよう

最後にTouchDesignerらしくバナナで遊ぼうと思います。

TouchDesignerでは「パーティクル」の解説例で「パーティクルにバナナのテクスチャを貼って飛ばす」というのをよくやるように思います。

Tokyo Developer’s Study Weekendでも取り上げられたように記憶してます。

ちなみに「Visual Thinking with TouchDesigner – プロが選ぶリアルタイムレンダリング&プロトタイピングの極意」を持ってる方は、P94〜P95あたりをオススメします。

これに先ほどのグローエフェクトの部分を合わせると

という感じになります。

本記事で１つテンションをあげることはできましたでしょうか？