TECH PLAY

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

4,180円 (税込)

楽天

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

書籍情報

発売日:

著者/編集:川村 健一/松岡 湧紀/森岡 東洋志

出版社:誠文堂新光社

発行形態:単行本

書籍説明

内容紹介

初心者から中級者以上まで、手元に置きたい読み応え十分の実践的マニュアルBOOK!

目次

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

著者情報

Voigt, Ben

川村 健一

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

川村, 健一

松岡 湧紀

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

松岡, 湧紀

森岡 東洋志

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

森岡, 東洋志