ビジュアルクリエイターのためのTOUCHDESIGNERバイブル
書籍情報
発売日 : 2020年12月17日
著者／編集 : 川村 健一/松岡 湧紀/森岡 東洋志
出版社 : 誠文堂新光社
発行形態 : 単行本
書籍説明
内容紹介
初心者から中級者以上まで、手元に置きたい読み応え十分の実践的マニュアルＢＯＯＫ！
目次
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 の学習方法
おわりに
はじめに
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 の学習方法
おわりに
著者情報
川村 健一
■川村 健一（カワムラ ケンイチ）
電通アイソバー株式会社Creative Director／Media Artist。
アートディレクター、インタラクションデザイナーとして活動後、電通アイソバーにジョイン。デザイン、テクノロジー、マーケティングの知見と、それにもとづく発想をベースに、テクノロジーを活用したクリエイティブに従事。
TouchDesignerによる事例も多数手がけており、映像演出、企業イベントのシステム開発、配信システム、ワークショップ講師、イベントへの登壇等を行っている。
川村, 健一
松岡 湧紀
■松岡 湧紀（マツオカ ユウキ）
インタラクションデザイナー。
首都大学東京大学院システムデザイン研究科インダストリアルアート学域修了。
その後、電通アイソバー株式会社に入社。テクノロジー起点の企画立案およびデジタルクリエイティブのソフトウェア開発業務に携わる。
松岡, 湧紀
森岡 東洋志
■森岡 東洋志（モリオカ トヨシ）
ベースドラム株式会社 Tech Director。
大学で視覚の研究に従事したのち、メーカーにて3Dスキャナなどの研究開発を行う。
その後、現1→10, inc.に入社。エンジニア、テクニカルディレクター、CTOなどを歴任したのちベースドラム株式会社に移籍。
2020年より現職。プロダクト開発やサービス開発のコンサルティングやテクニカルディレクションを行う。
京都芸術大学および大阪芸術大学にて非常勤講師としてTouchDesignerを教えている。
また、SPEKTRAとして関西を拠点にVJ、ライトインスタレーション、ワークショップなどの活動も行っている。
森岡, 東洋志
Voigt, Ben
