ビジュアルクリエイターのためのTOUCHDESIGNERバイブル

最先端の映像表現の構築に使えるソフト、TouchDesignerの使い方をわかりやすく解説。

内容

TouchDesigner（タッチデザイナー）は、カナダのDerivative（デリバティブ）社が開発した、あらゆる映像や音楽で構成されたメディアアートのシステムをデスクトップ上で簡単に構築することができるソフトウエアです。
インスタレーションアート、プロジェクションマッピングや、音楽と映像をシンクロさせた音楽ライブや演劇の演出で使われるメディアアートの創造に絶大な表現力を発揮し、視聴する者を魅了しています。

また、ハリウッド映画ではSF映画の宇宙船の操縦パネルのGUI（グラフィックユーザーインターフェイス）として使用されるなど、一般的にも目にすることが増えてきています。
コード（プログラム）を書かなくても、オペレータというボックスをつなぎ合わせていくことで、視覚的に容易に直感的なプログラミングができるソフトウエアとして、近年、ハイエンドな映像制作会社や映像クリエイターのニーズが高まってきています。

同書は、ハイエンド映像クリエイションの現場で活躍するトップクリエイター、川村健一を中心に同様のクリエイター松岡湧紀、森岡東洋志が、自身の作例を元にふんだんな制作過程の画像を元に丁寧に解説します。

著者紹介

川村健一（カワムラケンイチ）

電通アイソバー株式会社Creative Director／Media Artist。
アートディレクター、インタラクションデザイナーとして活動後、電通アイソバーにジョイン。デザイン、テクノロジー、マーケティングの知見と、それにもとづく発想をベースに、テクノロジーを活用したクリエイティブに従事。
TouchDesignerによる事例も多数手がけており、映像演出、企業イベントのシステム開発、配信システム、ワークショップ講師、イベントへの登壇等を行っている。

松岡湧紀（マツオカユウキ）

インタラクションデザイナー。
首都大学東京大学院システムデザイン研究科インダストリアルアート学域修了。
その後、電通アイソバー株式会社に入社。テクノロジー起点の企画立案およびデジタルクリエイティブのソフトウェア開発業務に携わる。

森岡東洋志（モリオカトヨシ）

ベースドラム株式会社 Tech Director。
大学で視覚の研究に従事したのち、メーカーにて3Dスキャナなどの研究開発を行う。
その後、現1→10, inc.に入社。エンジニア、テクニカルディレクター、CTOなどを歴任したのちベースドラム株式会社に移籍。
2020年より現職。プロダクト開発やサービス開発のコンサルティングやテクニカルディレクションを行う。
京都芸術大学および大阪芸術大学にて非常勤講師としてTouchDesignerを教えている。
また、SPEKTRAとして関西を拠点にVJ、ライトインスタレーション、ワークショップなどの活動も行っている。

ここだけの話

音楽と連動させてプロジェクションマッピングやVRのコンテンツを作ろう！

●TOUCHDESIGNERに触れる前に

　TOUCHDESIGNERというソフトウェアを使えば、音楽などと連動させてプロジェクションマッピングやVRのコンテンツを作ることができる。TOUCHDESIGNERの特徴を一言で言ってしまえばこういうことなのですが、皆さんはイメージできますか？　

　電子音楽とデジタルアートの祭典「MUTEK」のクリエイティブディレクター竹川潤一氏は本書の帯に、

　直感的な想像が眼に語りかける躍動。創造性のエネルギーのループを実感するまで、創りたいものを創る喜びは、新たな「一目瞭然」を世界に生み出す。しっかりと呼吸をして着想した活きた知識のUtilityを最大化する、TOUCHDESIGNERの実践本がここに誕生

と書いていただきました。

　TOUCHDESIGNERによるビジュアルの高みを知るプロの言葉だけに、エントリーユーザーは「なんだかスゴそうだけど…」と尻込みしてしまうかもしれません。まるで魔法のようなソフトウェアに思えます。

ただTOUCHDESIGNERの編集画面を起動させても、そこには黒い画面があるのみ。スマホのアプリのように、楽しく親切に次に行うべきことをナビゲートしてくれるわけではありません。

●まずは作りたいイメージありき

　……さて、本書の担当編集者として、すでにTOUCHDESIGNERを現場でバリバリ使いこなしている3人の著者と日々やり取りしていく中で、自分ならTOUCHDESIGNERをどう使いこなすかを想像してみました。

例えば、

自分の大好きな音楽を映像化してみたい。

例えば、

オフィスのインテリアを光と音で演出してみたい。

例えば、

ライブステージで曲に合わせて変化するライティングをしてみたい。

　そう、まずは、なんでもいいので、自分がやりたいことを妄想してみましょう。

　まずはイメージありき、です。そしてそのイメージ、妄想が実現できるのかどうか、TOUCHDESIGNERの黒い画面と向かい合って確認してみてください。

　そこではじめてTOUCHDESIGNERの秘めた魅力が、そのポテンシャルのすごさが、実感できると思います。

　逆に言えば、イメージを持たないユーザーに、TOUCHDESIGNERは何も提案してくれないし、応えてくれません。道具がイメージを作ってくれるのではなく、イメージが道具を使いこなすのです。TOUCHDESIGNERには興味があるけれど、使いこなせる自信がないという初心者の皆さんは、

まず自分が作りたいイメージを持ちましょう。

　1つできれば、1段階ステップアップ。そうしてスキルを少しづつ積み重ねていくことで、新しい領域の表現にチャレンジしたい気持ちやイメージが生まれるでしょう。

そしてさまざまなデバイスやセンサーとリンクさせることで、

TOUCHDESIGNERは新しい可能性に、クリエイターと共にチャレンジしてくれるでしょう。

まだ誰も見たことのない音と映像のファンタジーをTOUCHDESIGNERで！

書籍情報

商品名ビジュアルクリエイターのためのTOUCHDESIGNERバイブル

商品名（カナ）ビジュアルクリエイターノタメノタッチデザイナーバイブル

著者名川村健一

著者名松岡湧紀

著者名森岡東洋志

判型 B5

ページ数 312

TouchDesigner とは
はじめに

First Step1：TouchDesignerをはじめよう
1-1 ユーザー登録
1-2 ダウンロードと TouchDesignerのバージョンについて
1-3 ライセンスの種類について
1-4 起動とライセンス認証

First Step2：TouchDesigner の基本操作を覚えよう
2-1 TouchDesigner 的 Hello,world!
2-2 プロジェクトの保存/読み込み
2-3 Designer Mode とPerform Mode
2-4 COMPとtox、Export Movie
2-5 パネルのレイアウトとDisplay Option
2-6 Timeline GUI
2-7 Palette GUI

Touch Designer User’s Showcase
01 Dave & Gabe (USA) Eternal / Ultraviolet at Future Space
02 Vincent Houzé (USA) Transitions / Creatures
03 WHITEvoid (Germany) DEEP WEB/SKALAR

Step1：音に反応するグラフィックを作ってみよう
1-1 作例の概要
1-2 音を取り込む
1-3 音を3つの周波数に分ける
1-4 円を配置する背景を作る
1-5 円を配置。
1-6 円のサイズを変更する
1-7 CHOPからTOPへ値を割り当てる
1-8 円と背景を重ね合わせる
1-9 拡大しながら消えていく処理を入れる

Step2：Webカメラを使った時間差表現
2-1 作例の概要
2-2 Webカメラの映像を取り込む
2-3 版ズレ効果を出す
2-4 差分部分にエフェクトを出す
2-5 短冊のような効果を作る

Step3：3D空間を活用したオーディオリアクティブなグラフィック
3-1 作例の概要
3-2 TouchDesignerにおける3Dの基本要素
3-3 Geometryを編集
3-4 Geometryをワイヤーフレーム化
3-5 SOPの頂点情報を確認する
3-6 インスタンシングを行う
3-7 ポイントの法線方向にCircleを向かせる
3-8 音を取り込み、サイズ情報として活用する 150Step7:
3-9 体裁を整えブラッシュアップ
3-10 Geometryを回転させる

Step4：TouchDesignerでのパーティクル表現
4-1 作例の概要
4-2 Particle SOPにより追加される値
4-3 代表的なパラメータ
4-4 インスタンシングを行う
4-5 発生源を動かす
4-6 パーティクルに速度を与える
4-7 Particle SOPをCHOPに変換
4-8パーティクルを自然に表示する
4-9 Geometryに値を割り当てる

Step5：3Dオブジェクトを使った表現
5-1 作例の概要
5-2 CGを用意する
5-3 代表的なパラメータ
5-4 最小限の要素でPBRレンダリング
5-5 3Dデータの台座を作る
5-6 CGからパーティクルを発生させる
5-7 特定の要素を中心にカメラを回す

Step6：カメラを使ったアニメーション表現
6-1 作例の概要
6-2 線の元になる座標を作る
6-3 色情報を作る
6-4 CHOPから線を作る
6-5 カメラを設定する
6-6 カメラとNull COMPの座標を設定する

Step7：UIを使って表現を切り替える
7-1 作例の概要
7-2 Button COMPを使い、画像を切り替える
7-3 Button COMPをラジオボタンに変更する
7-4 ページ全体をボタン化し、クリックすると次のページへ遷移
7-5 ページの特定の場所にボタンを置き、クリックすると次のページへ遷移
7-6 Widgetsを使い、シンプルに実装する
7-7 選択した要素に応じてUIを変える
7-8 マウスカーソルが特定領域にあるときのみUIを表示する
7-9 パラメーターを調整する管理画面と投影
7-10 ジェネ映像でVJを行う場合のUI

Step8：スマートフォンと連携させる
8-1 作例の概要
8-2 スマートフォンとPCの連携方法
8-3 スマートフォンの傾きに反応させる
8-4 タッチ座標に反応させる
8-5 加速度でコンテンツを制御する

Step9：Depht Cameraを使った表現
9-1 作例の概要
9-2 D435のハードについて
9-3 取得できるデータについて
9-4 深度情報を取得
9-5 マスク表現
9-6 Point Cloud Color UVsをもとに、Color 情報を割り当てる
9-7 点群データ(Point Cloud)を表現

Step10：物理シミュレーションを使った作例。Bulletを使用した2Dゲーム
10-1 Bulletとは
10-2 Bullet SolverとActor
10-3 シミュレーションの実行方法
10-4 作例の実装指針
10-5 Add SOPを使用してシェイプを作成する。
10-6 Table DATに頂点を記録する
10-7 レンダリングのセットアップ
10-8 シミュレーションのセットアップ
10-9 衝突判定
10-10 障害物を設置する
10-11 Bullet Solver CHOPを使ったクリア判定

Step11：GLSLの基本
11-1 GPUについて
11-2 レンダリングパイプライン
11-3 GLSL TOP
11-4 GLSLで使用する変数の型
11-5 UV座標について
11-6 テクスチャの読み込みについて
11-7 GLSL TOPを使ってグラフィックスを作ってみる
11-8 Uniform 変数について
11-9 UV座標を操作する
11-10 グラフィックスに使用する

Step12：GLSL MATを使用した表現
12-1 GLSL MATについて
12-2 アトリビュートについて
12-3 Vertex Shaderについて
12-4 Pixel Shaderについて
12-5 頂点シェーダを使ったアニメーション
12-6 Displacement
12-7 カスタムアトリビュート
12-8 DisplacementしたGridを改良

Step13：スクリプトを書く
13-1 Expressionからはじめよう
13-2 CHOP ReferenceはPythonになっている。
13-3 Copy Parameterを使おう
13-4 TouchDesigner のデフォルト変数を使おう
13-5 Replicator COMP
13-6 Script SOP
13-7 まずは下準備
13-8 Script SOPを設置する
13-9 Script SOPの出力データを作成する
13-10 Script SOPにGUIをつける
13-11 仕上げ
13-12 Pythonライブラリを使う
13-13 画像処理の下準備
13-14 Script CHOPでOpenCVを動かす
13-15 元画像に重ね合わせる
13-16 演出を加える

TIPS
TouchDesigner の学習方法
おわりに

お詫びと訂正