yoppa.org

TouchDesigner中級編 2 – CHOPによる3Dジオメトリの操作

height:480

本日の内容

  • 今回も網羅的に学ぶのではなく、トピックスを絞って
  • 今日はCHOPによる3Dジオメトリの操作についていろいろ試します
  • 最後はオーディオとの連携も!

CHOPによる座標の制御

その1: ランダムな座標の生成

  • Pattern CHOPを使用して大量のランダムな座標(x, y, z)を生成
  • 生成した座標でジオメトリインスタンシング
  • 3Dオブジェクトがランダムに空間に配置される

サンプルファイルダウンロード

その2: 三角関数を組み合わせる

  • 三角関数 (sin, cos) を座標の情報にしてみる
  • 3Dのリサージュパターンを描くことが可能!

サンプルファイルダウンロード

その3: 迫ってくる物体

  • Pattern CHOPのrandom(x, y)とramp(z)を組合せる
  • rampの位相を時間で変化させる
  • こちらに向かって迫ってくる3Dオブジェクトが生成可能!

サンプルファイルダウンロード

さらに工夫して表現力を高めてみる!

サンプルファイルダウンロード

サウンドで3Dオブジェクトを操作

  • CHOPは数値の集合
  • 数値の集合を波形として捉えると信号になる
  • TouchDesignerでは音の信号もCHOPで扱う

サウンド入力の基本

  • サウンドファイルの読み込みと再生はとても簡単!
    • サウンドファイルの読み込み: Audio File In CHOP
    • スピーカーからの出力: Audio Device Out CHOP

オーディオリアクティブ1: 音量に反応させる

  • 読み込んだ波形をAnalyze CHOPで解析
  • RMS Powerを使用すると音量と視覚的な変化の一致度が高い
  • その情報で3Dオブジェクトのスケールを変更してみる
heigt:480

サンプルファイルダウンロード

オーディオリアクティブ2: 反応の細さかをコントロール

  • Analize CHOPのRMS Powerの生の数値だと少し細かい動きすぎる
  • フィルタリングして滑らかに
    • Filter CHOP
    • Lag CHOP
  • FilterとLagの違いを視覚的に確認してみる

サンプルファイルダウンロード

オーディオリアクティブ3: 音域で分ける

  • フィルターで音域ごとに音を分離
    • LPF: 低周波成分のみ通過 (高周波成分をカット)
    • HPF: 高周波成分のみ通過 (低周波成分をカット)
    • BPF: 特定の範囲の周波数帯域のみ通過
  • 低域、中域、高域、それぞれに反応させてみる

サンプルファイルダウンロード

応用: 音のビジュアライズ

  • 音の波形の情報をTOPに
  • サウンドのビジュアライズ!

その1: 音量をシンプルにTOPに変換

  • 波形の情報をAnalize CHOPでRMS Powerに
  • その情報をTrail CHOPで一定時間バッファリング
  • 得られた情報をCHOP to TOPでテクスチャに変換
  • 音量のビジュアライズに!

サンプルファイルダウンロード

その2: 波紋のようなパターンに!

  • 得られたパターンから波紋のようなイメージにしてみる
  • Palletにある直交座標を極座標に変化するCOMPを使用
    • ImageFilters > cartesianToPolar COMP

サンプルファイルダウンロード

アンケート

本日の講義に参加した方は以下のアンケートに回答してください

TouchDesigner中級編 1 – パーティクル表現

今日の内容

  • 前回までは基本機能について網羅的に学んできた
  • 今回からは中級編 – 1つのテーマをとりあげて掘り下げる形式で
  • 今回はパーティクル表現をマスターする!

パーティクルとは?

パーティクル (Particle) またはパーティクルシステム (Particle System) とは、たくさんの細かいスプライト画像、3Dモデル、またはその他のCGオブジェクトを使って、様々な現象をシミュレーションする表現手法です。パーティクルを用いて炎、爆発、煙、流水、火花、落葉、雲、霧、雪、埃、流星、毛髪、毛皮、草地など様々な現象や物体のふるまいをシミュレーションすることが可能です。

TouchDesingerでは、Particle SOPを用いることでとても簡単にパーティクルの生成と制御が可能です。また、生成したパーティクルにスプライト画像を適用したり、ジオメトリインスタンシングを用いてパーティクルの一粒ごとに3Dオブジェクトを配置することも可能です。今回はTouchDesingerのパーティクル表現についていろいろ実験していきます。

参考作品

サンプルプログラム

パーティクル基本

  • パーティクルの基本は、3D形状のSOPをParticle SOPに繋ぐだけ
  • SOPの頂点からパーティクルが生成される
  • 生成されたパーティクルをRender TOPでレンダリング
  • パーティクルは、SOPの頂点の番号ごとに生成される
    • そのままだと、規則的すぎる
    • SOPとParticleの間にSort SOPを入れる
    • Point SortをRandomにする

パーティクル + ジオメトリインスタンシング

  • パーティクルの座標を利用してジオメトリインスタンシングも可能
  • 詳細はパッチで
  • さらに高度なパーティクル表現

本日の実習

ここまでの内容を踏まえて、パーティクルで表現してみる! 作成した作品は演習の最後に発表していきます。

アンケート

本日の講義に参加した方は下記のアンケートに回答してください。

動きを生みだす – アニメーションとベクトル

今回からいよいよp5.jsを用いた動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。

参考リンク

スライド資料、サンプルプログラム

サンプルプログラム

アンケート

本日の授業を受講した方は以下のアンケートに回答してください。

画像生成AI実践 2: 展示に向けて – 生成した画像のレイアウト

本日の内容

  • AIで生成した画像を展示に向けてレイアウトする
  • Figmaの紹介とインストール
  • 生成した画像をグリッド状に配置してみる

生成した画像をレイアウトする

  • 第1課題「生成コレクション」 (課題確認)
  • 生成した多く画像を整然とレイアウトする必要あり
    • Illustrator? → 有料、もし持っている人はどんどん利用
    • 無料で作業するには -> Figmaを使う

Figma

  • ブラウザベースのコラボレーション・ツール
  • デスクトップ版やモバイル版もあり
  • もともとはインターフェイス (UI) のデザインに特化していたが、グラフィクスデザインツールとしても使用可能
  • コラボレーション機能
  • 学生であれば無料で使用可能!
    • ただし資格認定を受ける必要あり

教育用Figma | クラスルーム向け無料ツール

  • 教育用Figmaのページにアクセス
  • 「資格認定を受ける」のボタンをクリック
  • 大学のemailのGoogleアカウントでログイン
  • 画面の指示に従って、登録を進めていく

制作用テンプレート

課題作例

「生成コレクション – 貝殻」

本日の実習

  • Figmaのテンプレートを使用して、7×4 (= 28枚) で構成される「生成コレクション」を作成
  • できれば自分で考案したテーマに沿って生成したイメージで
  • もし画像が無い場合は下記のサンプルファイルを使用

来週までの課題

  • Figmaを使用して、7×4の「生成コレクション」を完成させる
  • 画像は自分で設定したテーマに沿って生成した画像で構成すること
  • なぜそのテーマにしたのか簡単に説明できるように準備
  • 次回の実習の開始時間までに作成しておくこと

アンケート

  • 本日の実習に参加した方はアンケートに回答してください
  • アンケート

TouchDesigner中級編 1 – パーティクル表現

今日の内容

  • 前回までは基本機能について網羅的に学んできた
  • 今回からは中級編 – 1つのテーマをとりあげて掘り下げる形式で
  • 今回はパーティクル表現をマスターする!

パーティクルとは?

パーティクル (Particle) またはパーティクルシステム (Particle System) とは、たくさんの細かいスプライト画像、3Dモデル、またはその他のCGオブジェクトを使って、様々な現象をシミュレーションする表現手法です。パーティクルを用いて炎、爆発、煙、流水、火花、落葉、雲、霧、雪、埃、流星、毛髪、毛皮、草地など様々な現象や物体のふるまいをシミュレーションすることが可能です。

TouchDesingerでは、Particle SOPを用いることでとても簡単にパーティクルの生成と制御が可能です。また、生成したパーティクルにスプライト画像を適用したり、ジオメトリインスタンシングを用いてパーティクルの一粒ごとに3Dオブジェクトを配置することも可能です。今回はTouchDesingerのパーティクル表現についていろいろ実験していきます。

参考作品

サンプルプログラム

パーティクル基本

  • パーティクルの基本は、3D形状のSOPをParticle SOPに繋ぐだけ
  • SOPの頂点からパーティクルが生成される
  • 生成されたパーティクルをRender TOPでレンダリング
  • パーティクルは、SOPの頂点の番号ごとに生成される
    • そのままだと、規則的すぎる
    • SOPとParticleの間にSort SOPを入れる
    • Point SortをRandomにする

パーティクル + ジオメトリインスタンシング

  • パーティクルの座標を利用してジオメトリインスタンシングも可能
  • 詳細はパッチで
  • さらに高度なパーティクル表現

本日の実習

ここまでの内容を踏まえて、パーティクルで表現してみる! 作成した作品は演習の最後に発表していきます。

アンケート

本日の講義に参加した方は下記のアンケートに回答してください。

TouchDesigner基本 3 – SOPを極める!

今日の内容

前回のTOPに引き続き、今回はSOPを中心にとりあげていきます!

3D基本図形の描画 (3D Generators)

  • SOPは、TouchDesigner内でネイティブに3Dジオメトリを作成する
  • 3Dの基本図形を作成する「ジェネレーター」SOP
    • 球: Sphere SOP
    • トーラス: Torus SOP
    • ボックス: Box SOP
    • 円: Circle SOP
    • 長方形: Rectangle SOP
    • チューブ: Tube SOP
    • ライン: Line SOP
    • グリッド: Grid SOP

サンプルファイル

プロシージャル (手続的) モデリングの基本

  • プロシージャルモデリングはオペレータとそのパラメータによってサーフェスやモデルを自動的に変更できるジオメトリを扱う方法
  • オペレータのネットワークを作成することで3Dのジオメトリを作成
  • 例えばCHOPで生成した数値で3Dジオメトリを生成
    • CHOP to SOP: パターンCHOPを変換しLine SOPを作成
    • Sweep SOP、Facet SOPと組み合わせてねじれたサイン波のような形態を生成

サンプルファイル

Noise SOPでアニメーションを作成

  • Noise SOPはSOPに擬似的なランダム変形を加えるために頻繁に使用される
  • SOPの頂点座標、法線座標、カラーアルファ座標、テクスチャ座標など様々な要素に適用可能

サンプルファイル

3Dレンダリングの基本

  • TouchDesignerの3Dレンダリングは、コンポーネントオペレータ(COMP)、テクスチャオペレータ(TOP)、およびサーフェスオペレータ(SOP)で構成されている
  • 基本になる3つのCOMP
    • Geometory COMP
    • Camera COMP
    • Light COMP
  • シーンをレンダリングして3Dのオブジェクトを2Dのビューにするには、Render TOPを追加する

サンプルファイル

3D Geometry COMPの機能

  • TOPでCHOPを使って画像をアニメーションさせるように、CHOPを使ってジオメトリをアニメーションさせることができる
  • ジオメトリに移動、回転、スケールの変更を行う際には、Transform SOPを使用するよりもGeometory COMP上でトランスフォーム操作を行うほうが良い
    • Transform SOP: CPUで演算 → 高負荷
    • Geometory COMP内のTransform: GPUで演算 → 低負荷

サンプルファイル

カメラを操作する

  • TouchDesignerにはカメラを操作する方法がたくさんある
  • 頻繁に使用される便利なテクニック: Loop-atを使用する
    • シーン内の3Dオブジェクトにカメラを向ける
    • Null COMPは、3Dトランスフォームのパラメータをすべて持っていますが、レンダリングされたジオメトリを含んでいないため、他のCOMPのLook-atとして使用すると便利
  • SOPをカメラの起動にすることも可能
    • Camera COMPのPath SOPというパラメータにジオメトリがカメラが移動するパスを記述する
  • シーンを遠近法(Perspective)でレンダリングするか、正投影法(Orthographic)でレンダリングするかを選択できます

サンプルファイル

光源と影

  • 影を正しく描画させるには、Light COMPのShadowsページでシャドウを有効にする必要がある
  • 影を視覚化するために、Depth TOPを使い、ライトのZ軸が影を落とすオブジェクトの中央を向いていることを確認する

サンプルファイル

MATで3Dジオメトリにテクスチャーを適用

  • MATは、リアルタイムレンダリングのためにジオメトリをテクスチャリングするためのTouchDesignerのマテリアルシステム
  • コンスタントMATは、ライティング計算なしでジオメトリCOMPに色やテクスチャを適用する
  • Phong MATはライトの影響を受けるマテリアルです
  • Line MATはワイヤーフレームマテリアルに似ていますが、より多くの機能が追加されている
    • 単純なワイヤーフレーム、ポイントクラウド、アウトラインや矢印の作成など
    • カメラからの距離に応じてジオメトリにどのようにカラーを適用するかを制御可能- 線の太さを変化させるポイントウェイトを使用可能

サンプルファイル

物理ベースレンダリング (PBR Rendering)

  • PBR MATはPhysically Based Rendering（物理ベースレンダリング）に使用される
  • サーフェス上で散乱する光の挙動を模倣しようとする
  • PBR MATは通常、Environment Lightともう1つのLight COMPが必要
  • Phong MATとは異なり、PBR MATは環境ライトCOMPを環境と反射テクスチャに使用する

サンプルファイル

本日の実習

ここまでの内容を踏まえて、実践してみる。詳細はサンプルをみながら解説していきます!!

その1: プロシージャル3Dアニメーション

サンプルファイル

その2: 3Dジオメトリインスタンシング

アンケート

本日の講義に参加した方はアンケートに回答してください。

画像生成AI実践 – いろいろな画像生成AIを使ってみる!

今日の内容

  • 第一課題の確認
  • 画像生成系のAIを一通り試してみる

第一課題の確認

Sarah Meyohas, Infinite Petals

課題: 生成AIを用いて、架空のコレクションを作成して展示する。

DALL·EやStable DiffusionやMidjourneyなどここ数年で生成AIを用いた画像生成の技術が爆発的に進歩しています。工学デザイン実習IIIcの第1課題は、画像生成AIを積極的に活用して作品を制作します。画像生成AIの魅力のひとつは、単一のプロンプト (画像の生成を指示する文章) から大量のバリエーションの画像を生成できる点です。この性質を利用して、パッケージデザインやカーデザイン、建築のイメージスケッチなど様々な分野で活用が始まっています。今回の課題は、この画像生成AIの大量に類似画像を生成できるという点に着目して、何かのテーマによって収集された架空のコレクションを作成して作品として展示を行います。

  • 画像生成AIを用いて「架空のコレクション」を作成する
  • 題材は自由だが、テーマの「架空のコレクション」を想起させるものとする
  • 展示を前提に、グリッド状に生成された「標本」画像を陳列して展示する (フォーマットは別途提供)
  • 全てのコレクションを収集し編集した映像も作成する予定 (オープンキャンパスでの展示に活用)
  • 使用する画像生成AIは好みのサービスを各自選択する

参考作品

今後のスケジュール(暫定)

  • 4月29日: 第1課題出題
  • 5月06日: 休日 (こどもの日)
  • 5月13日: 第1課題制作方法解説
  • 5月20日: エスキース 1
  • 5月27日: エスキース 2
  • 6月03日: 中間講評、第2課題出題
  • 6月10日: 第2課題制作方法解説
  • 6月24日: エスキース 1
  • 7月01日: エスキース 2
  • 7月08日: エスキース 3
  • 7月15日: エスキース 4
  • 7月22日: 展示設営
  • 7月29日: 課題展示、講評

画像生成系のAIを一通り試してみる

現在試用可能な主な画像生成AIサービス

まずは一通り試してみる!

  1. Midjourney
  2. Stable Diffusion
    – Leonard AI
    – Stable Diffusion Online
    – Hugging Face
  3. DALL·E
    – DALL·E (Chat GPT)
    – DALL·E (Microsoft Copilot)

Midjourney

https://midjourney.com

  • テキストの説明文から画像を作成する独自の人工知能プログラム
  • また同プログラムを開発している独立した研究所の名称
  • 現実の写真のように見えるものからイラスト調のものまで幅広い種類の画像生成
  • 生成モデルを指定することで出力する画像のスタイルをカスタマイズ可能
  • かつてはクローズドベータ版が運用されていたが、現在は有料利用枠のみ提供

Stable Diffusion

  • ミュンヘン大学のCompVisグループが開発した潜在拡散モデル(latent diffusion model)
  • Stability AI、CompVis LMU、Runwayの三者が共同で開発し公開
  • ソースコードが一般に公開されている (MidjournyやDALL·Eは基本非公開)
  • コードが公開されているため様々なサービスを介して利用可能
    • 有料なものも無料なものも
  • APIをダウンロードして自分のPC上でローカルに動かすことも可能

Stable DiffusionをWeb経由で使用できる主なサービス

DALL·E

https://openai.com/index/DALL·E-3

  • OpenAI が開発した画像生成 AI ツール
  • テキストプロンプトを入力すると、それに対応する画像を生成
  • 現在の最新版は、DALL·E 3
    • 以前のバージョンよりも詳細なニュアンスを理解し、提供されたテキストに正確に従った画像を生成できるように
  • ChatGPT とネイティブに統合
  • 生成した画像は、再印刷、販売、商品化するための許諾は必要ない
  • 暴力的、成人向け、または憎悪的なコンテンツの生成を制限

本日の実習

Step 1:

  • 画像生成AIで一通り画像生成にトライしてみる
  • 自分の好みのサービスをみつける

Step 2:

  • 今回の第一課題の題材やコンセプトについて考える
  • 実際に想定する題材の画像を試しに生成してみる
    • テキストによるプロンプトから
    • 画像をアップロードして参考にさせてみる
  • 良い画像が生成されたら必ず保存しておくこと!

※本日考えたテーマ最終版ではありません、まだ変更可能です!

アンケート

本日の実習に参加した方は以下のアンケートに答えてください。

TouchDesigner基本 3 – SOPを極める!

今日の内容

前回のTOPに引き続き、今回はSOPを中心にとりあげていきます!

3D基本図形の描画 (3D Generators)

  • SOPは、TouchDesigner内でネイティブに3Dジオメトリを作成する
  • 3Dの基本図形を作成する「ジェネレーター」SOP
    • 球: Sphere SOP
    • トーラス: Torus SOP
    • ボックス: Box SOP
    • 円: Circle SOP
    • 長方形: Rectangle SOP
    • チューブ: Tube SOP
    • ライン: Line SOP
    • グリッド: Grid SOP

サンプルファイル

プロシージャル (手続的) モデリングの基本

  • プロシージャルモデリングはオペレータとそのパラメータによってサーフェスやモデルを自動的に変更できるジオメトリを扱う方法
  • オペレータのネットワークを作成することで3Dのジオメトリを作成
  • 例えばCHOPで生成した数値で3Dジオメトリを生成
    • CHOP to SOP: パターンCHOPを変換しLine SOPを作成
    • Sweep SOP、Facet SOPと組み合わせてねじれたサイン波のような形態を生成

サンプルファイル

Noise SOPでアニメーションを作成

  • Noise SOPはSOPに擬似的なランダム変形を加えるために頻繁に使用される
  • SOPの頂点座標、法線座標、カラーアルファ座標、テクスチャ座標など様々な要素に適用可能

サンプルファイル

3Dレンダリングの基本

  • TouchDesignerの3Dレンダリングは、コンポーネントオペレータ(COMP)、テクスチャオペレータ(TOP)、およびサーフェスオペレータ(SOP)で構成されている
  • 基本になる3つのCOMP
    • Geometory COMP
    • Camera COMP
    • Light COMP
  • シーンをレンダリングして3Dのオブジェクトを2Dのビューにするには、Render TOPを追加する

サンプルファイル

3D Geometry COMPの機能

  • TOPでCHOPを使って画像をアニメーションさせるように、CHOPを使ってジオメトリをアニメーションさせることができる
  • ジオメトリに移動、回転、スケールの変更を行う際には、Transform SOPを使用するよりもGeometory COMP上でトランスフォーム操作を行うほうが良い
    • Transform SOP: CPUで演算 → 高負荷
    • Geometory COMP内のTransform: GPUで演算 → 低負荷

サンプルファイル

カメラを操作する

  • TouchDesignerにはカメラを操作する方法がたくさんある
  • 頻繁に使用される便利なテクニック: Loop-atを使用する
    • シーン内の3Dオブジェクトにカメラを向ける
    • Null COMPは、3Dトランスフォームのパラメータをすべて持っていますが、レンダリングされたジオメトリを含んでいないため、他のCOMPのLook-atとして使用すると便利
  • SOPをカメラの起動にすることも可能
    • Camera COMPのPath SOPというパラメータにジオメトリがカメラが移動するパスを記述する
  • シーンを遠近法(Perspective)でレンダリングするか、正投影法(Orthographic)でレンダリングするかを選択できます

サンプルファイル

光源と影

  • 影を正しく描画させるには、Light COMPのShadowsページでシャドウを有効にする必要がある
  • 影を視覚化するために、Depth TOPを使い、ライトのZ軸が影を落とすオブジェクトの中央を向いていることを確認する

サンプルファイル

MATで3Dジオメトリにテクスチャーを適用

  • MATは、リアルタイムレンダリングのためにジオメトリをテクスチャリングするためのTouchDesignerのマテリアルシステム
  • コンスタントMATは、ライティング計算なしでジオメトリCOMPに色やテクスチャを適用する
  • Phong MATはライトの影響を受けるマテリアルです
  • Line MATはワイヤーフレームマテリアルに似ていますが、より多くの機能が追加されている
    • 単純なワイヤーフレーム、ポイントクラウド、アウトラインや矢印の作成など
    • カメラからの距離に応じてジオメトリにどのようにカラーを適用するかを制御可能- 線の太さを変化させるポイントウェイトを使用可能

サンプルファイル

物理ベースレンダリング (PBR Rendering)

  • PBR MATはPhysically Based Rendering（物理ベースレンダリング）に使用される
  • サーフェス上で散乱する光の挙動を模倣しようとする
  • PBR MATは通常、Environment Lightともう1つのLight COMPが必要
  • Phong MATとは異なり、PBR MATは環境ライトCOMPを環境と反射テクスチャに使用する

サンプルファイル

本日の実習

ここまでの内容を踏まえて、実践してみる。詳細はサンプルをみながら解説していきます!!

その1: プロシージャル3Dアニメーション

サンプルファイル

その2: 3Dジオメトリインスタンシング

アンケート

本日の講義に参加した方はアンケートに回答してください。