TouchDesigerのインスタンシングを体系的に理解しよう1/2
インスタンシングとは
インスタンシング（Instancing）は、コンピュータグラフィックスやプログラミングにおいて、一つのオブジェクトのデータを効率的に複数回描画または生成する手法のことです。この技術により、メモリや処理能力を節約しながら、多くの同じ形状やオブジェクトをシーン内で繰り返し使用することができます。（ChatGPT）
簡単に言うとGPUを使って大量に3Dモデルを作れるって感じです
ほとんどの3DCGツールやゲームエンジンならできます
今回のtoxです。最悪これ見てください。
記事の内容
この記事でできることは
グリッド上にオブジェクトを複製
複製したものにテクスチャを貼る → ここまで
https://note.com/lively_bear294/n/n5f6b0368b509 → この先テクスチャの切り替え
バラバラにパラパラと回転する
こんな感じです。早速TouchDesignerを起動しましょう
グリッド上に複製
3DCGをするので何はともあれSOPからRenderまで作っちゃいましょう
すべてデフォルトのパラメーターです。このまま作ってください
もし「何やってんのこれ」状態の人は下記動画を見るとわかりやすいです。
まずはグリッド上に複製していきましょう
16:9のサイズで適当な大きさで作ります。
Grid SOPのサイズはそのままサイズを変更しています。
RowsとColumnsは行列のポイント数です。
「どっちがどっちだ…？」ってなったらいろいろな覚え方あるので1つ決めると楽ですよ
今回はRowが10、Columnsが17ですね。「16と9じゃないんか？」って思う人もいるかもですが、あくまでも「頂点」の数なので+１した数で正方形になります
geo1 compを選択し、Instanceページに行き、Translate OPに grid1 sopをドラッグしましょう
Translate Xとかの右にある黒三角を押すとなんかが選べるようになるので
Translate X P(0)
Translate Y P(1)
としてくださいZ（奥行き）にコピーしないのでXとYのみで大丈夫です
これでインスタンシングはできてます。
見た目に変化がなさそうですよね。それはBOX SOPのサイズがでかいからです。
tranceform sopを追加し、薄く、小さくしましょう
Uniform Scaleは見やすくするために0.9にしてます。最後の最後に1に戻します。
成功です！グリッド上にboxが並びました！
細かく解説すると
「grid1」のポイントの位置に「null1」が並べられています。「null1の原点を中心として」並べられていることを覚えておきましょう。今回の記事には関係なです。
テクスチャを貼る
ではでは次はこれにテクスチャを貼っていきましょう。
正直ここが一番の難所です。ゆっくり進めます。
まずはgrid sopからsop to chopを繋げてください。
select chopを2つ使い、「tx」と「ty」を取り出します。（tzは奥行き情報のため今回はいらない）
math chopをそれぞれに繋げて、グラフの幅を0-1にします。
CHOPからインスタンシングするのにグラフの確認はめちゃやるのでやり方覚えといてください
＋ボタン押して、マウス中ボタンで拡大できます。
txの方につなげたmath chopは-8の8です。
同じようにtyは-4.5の4.5です。
16*9でサイズを作ったのでその半分ですね。
中学生の数学でやったグラフみたいなやつです
では赤い範囲まで作ってください
さらにmath chopを繋げて、それをmerge chopで1つにまとめてます。
math chopを2個使ってるのは手順を1つ1つにしたいからです。慣れてから省略しましょう。
最後のnullはさっきやったようにD&Dして、「Uにtx」「Vにty」
（Wは奥行きのため今k…）
一旦mathの数値はおいておいて先にテクスチャを貼りましょう
Movie File In Topを3回目のcompにドラッグをしましょう
名前は何でもいいですが、わかりやすいようにAにしました。
2枚目以降はB…C…とします！
おぉ～！
正しく貼れてないけど変化が起こるとテンション上がりますよね！
ここから！ここから中学数学みたいなことします。一次関数とかでやったグラフを思い出しながらやりましょう。
Texture sopの追加をします！Scaleを弄ります
パラメーターを何もいじらないと1つ1つに同じテクスチャが貼られてしまします。
これはこれで演出として面白いかもですね
今回はグリッド全部を1枚として見て貼りたいので
グリッドで増やした数の分、画像を分割する必要があるんですね。
貼れた！！！！！
・・・と思うじゃん？
つなぎ目をなくして、画像と見比べてみると……
なんか、上の色変じゃない？あと全体的にズレてない？
（画像と縦横比が違うのは仕様です）
簡単にいうとUVがズレてるんですよね
直し方と説明をさせてください。結構大事。座学。
UVとは数学のXYのようなもんだとおもってください
上にいくと「Vが増える」、右に行くと「Uが増える」。ただそれだけ。
今回はきりが良いのでVを使って説明します。
今回のグリッドは縦に10分割しています。
つまり、1つにつき、縦幅が0.1あります。
空の画像に置き換えるとこう！
1つのタイルが1/10の大きさを持っていて、上に9個分進むとVはちょうど1まで埋まります。
もし、10回進んだらどうなるの…？10を超えたら…？
その答えが現状なのです。
赤に注目してください。
全く同じ色してますよね？
UVはループしているのです！
さっきの図で表すとこんな感じ
はいTDに戻ります。このCHOPを拡大してください
黄色のグラフを見ます。
10段ありますね。つまりのグラフの縦軸はVを表しています。
ってことは横軸は…？
グリッドの横の数の17で段が上がってるので、Uを表していますね！
だんだんと理解してきた…？
しかし！あくまでもグラフは移動値を表しています！
段を上った数 = 上に移動した数は９回です！
この赤線まで移動してるんですよ！
あれ…？黄色いグラフをもう一度みると…
Vが1までいっちゃってません？
これがUVがずれた原因なのです！
このグラフの上限値は 9/10 = 0.9 の必要があります。(行数-1)/行数
なので2つめのmath chopには上限値をこのように設定する必要があったのですな
tranceform sopのUniform Scaleを1に直してあげると…
きたー！！
素晴らしいです。
なるべく丁寧に解説しましたが、もしわからんかったらTwitterで連絡ください。「note見たけど全然わからんかったぞ」って言ってくれれば教えやす
思ったより長くなったのでここで半分にしますか…
このあとはテクスチャの切り替えと回転です。
どっちもUVより簡単なので気張らずに頑張りましょう。
この記事が気に入ったらサポートをしてみませんか？