川村　健一, 松岡　湧紀, 森岡　東洋志 　著

内容

目次

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 の学習方法 おわりに