20191207_Node Juggling / beginner to intermediate

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532219/997da666-c0b1-4cfb-17f9-95ed51912f4f.png)

##はじめに
こんにちは、水谷です。今回はNotch上で様々なノードカテゴリを
横断する方法について書いてみたいと思います。初級者から中級者向けの内容です。
ここにシーンファイルをアップロードしてあるので、実際にシーンを触りながら読んで頂くと
理解が深まるかもしれません。
[DFX DOWNLOAD](https://www.dropbox.com/sh/l71aezm3ovufg6m/AABSlGl1NJuq9D0j7djaHX2Xa?dl=0 "Advection Project")  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532219/599eaef9-dae9-055c-c8cd-0392eda8e836.png" width="40px">
<font color="DarkGray">I'm going to try to explain the inter-connectivity of different node types.
I uploaded the dfx here. So please feel free to play with it(CC0).</font>

それぞれ単独でも十分に強力なノード群からなるnotch、
リッチなインタラクティブかつリアルタイムなビジュアルは一つの
ノードグループでも完結して制作することができます。
<font color="DarkGray">Notch nodes are generally pretty powerful, in general.
You can build stunning interactive, real time visuals within the given node category.
You can finish your work only with the particle nodes and it's awesome.</font>
##Notch = Versatility
<img width="400" alt="_" src="https://paper-attachments.dropbox.com/s_1B610EB5FBB4E10AE759605E60B30A81EC844E4C7468F608959B0D39ADD4694A_1573779954394_Title..png"">
これらのノードの中にはノードカテゴリの垣根を超えてお互いに接続できるものがあります。
思いつく一番シンプルな組み合わせを挙げるとすれば、
<font color="Orange">particle node</font>と<font color="YellowGreen">Cloner(Clone To Particle Node)</font>の組み合わせだと思います。
なので、実際に見てみましょう。
<font color="DarkGray">At the same time many notch nodes are built inter connectivity of different node-types in mind.
The simplest example might be the combination of particle nodes and Cloner(clone to particle node).
This relatively new node(as replacement of mesh renderer particle node) enables to create instances of
3d geometry(3D object/Shape 3D etc) for assigned particles.</font>
##Clone to Particles
<img width="600" alt="_" src="https://paper-attachments.dropbox.com/s_1B610EB5FBB4E10AE759605E60B30A81EC844E4C7468F608959B0D39ADD4694A_1573780317087_Clone+to+Particles.gif">
 <font color="Orange">Particle</font>と <font color="YellowGreen">Cloner</font>は色が違うからといってお互いに干渉することは不可能かと言えば
そうではなく、例えばこの<font color="YellowGreen">Clone To Particle</font> Nodeを使えば、
パーティクルのそれぞれのポイントを3Dジオメトリに置き換えて表示することができます。
上記は実際にグリッド状に配置されたパーティクルをスフィアのインスタンスに置き換えてみたところです。
<font color="DarkGray">But there's much more of this kind in notch.
You can combine so many node-types and go back and forth within the different node-types, like jugglers do.</font>
##Clone to Particle 詳細
<img width="600" alt="_" src="https://paper-attachments.dropbox.com/s_1B610EB5FBB4E10AE759605E60B30A81EC844E4C7468F608959B0D39ADD4694A_1573780893834_Clone+to+Particles.jpg">
<font color="YellowGreen">Clone To Particles</font> Nodeのinputを見てみると、 <font color="Orange">Particle Node</font>とオーバーレイが表示されます。
これにより、<font color="YellowGreen">Clone To Particles</font> NodeはParticleをインプットとして
扱うことができるのだな、と知ることができます(この場合は <font color="Orange">Particle Root</font>をフィードしていますね)。
<font color="DarkGray">If you hover the mouse cursor on the input of Clone To Particles, it'll indicate it accepts Particle Node as input. In this manner you may know which node type could be fed as input.</font>
##小まとめ
まずは基本の<font color="YellowGreen">Clone To Particles</font>。
<font color="Orange">Particle Root</font>からアウトする、という手法がちょっとトリッキーですね。
<font color="DarkGray">Ok, this is pretty basic, but wiring from the Root node might be tricky.</font>
##Advection I
<img width="400" alt="_" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532219/580709e3-aba9-6c50-071e-9a1dbeb165b3.gif">
こちらは<font color="Purple">Field</font>と<font color="Orange">Particle</font>をかけ合わせた例です。
パーティクルが外側に押し出される様子が見て取れるかと思います。
煙のような流体のモーションに注目してください。
こういった有機的・流体的な動きは<font color="Orange">Particle</font>ノード内で完結した場合、なかなか難しい表現だと思います。
<font color="DarkGray">Here's fairly simple example of combining field node and particle node.
You can see particles within the sphere get pushed outwards.
Please notice the fluid or smoke-alike motion here.
You can never achieve this only in particle node group.
In this example, particle motion is driven by velocity field and this is called advection.</font>
##Advection II
![](https://paper-attachments.dropbox.com/s_1B610EB5FBB4E10AE759605E60B30A81EC844E4C7468F608959B0D39ADD4694A_1573781979732_Simple+Advection.jpg)
実際にネットワークグラフがどうなっているのかを見てみましょう。
まず、下部の紫の<font color="Purple">Field Root</font>から見てみると、<font color="Purple">Velocity Affector</font>, <font color="Purple">Turbulence Affector</font>の2つがメインのモーションを
作っています。最後に<font color="Purple">Fluid Affector</font>があり、これが流体らしさを追加するキーとなる重要なノードになります。

次に上部の<font color="Orange">Particle Root</font>を見てみると、パーティクルの動きに影響を及ぼすAffectorは<font color="Orange">Field Affector</font>の１つしかありません。
Field Affectorのinputを見てみると、Field Rootからのアウトプットが繋がっているのが見て取れると思います。
(先程の<font color="YellowGreen">Clone To Particles</font>が<font color="Orange">Particle Root</font>をinputとして取っていたのに似ていますね。)
こうして<font color="Orange">Particles</font>が<font color="Purple">Field</font>により動いているわけですね。

<font color="DarkGray">Let's take a closer look and check how the network view looks like:
Actually the particle root contains only one affector(Field Affector) which drives motion of particles.
And you see the input source of Field Affector is coming from Field root.
And again, Field Root has three Affectors which are:
The Velocity Affector, Turbulence Affector and last but not least, the Fluid Affector.
These three Affectors are responsible for particle motion in this example.</font>

##Advection 小まとめ(verdict)
多くのDCCアプリケーションではFluid Dynamicsの挙動を詰めてからParticlesを添わせる、という
２ステップのワークフローになる事がままありますが、notchではこれがリアルタイムに同時にできます。
これは非常にパワフルなフィーチャーなので、パーティクルに有機的な挙動を与えたいときには
非常に有効な手法と言えるでしょう。
<font color="DarkGray">In most of DCC application these kind of simulation is so expensive that you need to cache the 
fluid simulation first then you can see advected movement of particles.
Notch does this in real time. At the first time I saw this, I was literally blown away.</font>
##Render to Texture I
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532219/e648048f-6997-dcb1-9096-c7a8117f7fe1.gif">
次に<font color="Grey">Render To Texture</font>についてカバーしたいと思います。
このノードは<font color="Grey">Render To Texture</font>以下に接続されているchildren nodesをレンダリングし、それを
Textureのストリームとして保存し、MaterialのTextureや、様々なノードカテゴリ内で他の用途に使用できると言うものです。
これにより、テクスチャをプロシージャルかつリアルタイムに生成することができます。
<font color="DarkGray">Okay let's move on.
The next topic I'd like to cover, in terms of inter connectivity, is the render to texture node.
This node enables you to render current scene as continuous bitmap stream and use them as texture.
So you can create textures in procedural way and it's real time, isn't this sweet?</font>

##Render to Texture II
![Render to Texture simple.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532219/14448f47-0b01-fba6-4c4d-f473f92876ac.jpeg)

<font color="Grey">Render Texture Root</font>以下に通常の要領でシーンを作っていきます。
<font color="Blue">Camera</font>は１つ必ず必要で、このViewからの絵が実際にテクスチャとして保存されます。
<font color="Grey">Render To Texture Root</font>から、このテクスチャがMaterialのDiffuse Textureに送られ、
それによりPlane上に「カメラから見た絵（つまりノイズのテクスチャのついた球体）」がマッピングされているわけです。
<font color="DarkGray">Node-Manner is relatively simple.
Just connect Render Texture node with at least one camera.
This camera will the render cam.
The other scene objects, which should be rendered, should be also connected into Render To Texture Node.</font>

##Render To Texture: Verdict
考え方としてやや馴染みが無いので慣れるまで使いにくいですが、強力なワークフローです。
最近実業務でとても有意義に使えたシナリオとして、球体プロジェクションのモック制作で
VRcamから見たシーン全体を360度レンダリングし、そのテクスチャを球体にマッピングすることで、
球体マッピングのコンテンツなどをリアルタイムに制作したりしました。

##Scene Reading: Inhale/Exhale(by me)
![MweMMrSU5P.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532219/cfaf5550-5a19-7125-07ae-3100530dabaf.gif)

最後にこのページのタイトル絵になっている習作(Inhale/Exhale)を読み解いてみましょう。
このページで紹介したテクニックを元に作られていて、シーンビルディングの順序としては以下の通り：

1)<font color="Purple">Field Root</font>からVelocity Fieldの作成

2)<font color="Orange">Particle Root</font>以下に<font color="Orange">Field Affector<font>を置き、そのinputと<font color="Purple">Field Root</font>を繋ぐ。

3)これにより<font color="Orange">Particle</font>の動きは<font color="Purple">Field</font>のVelocity Fieldにより制御されます。

4)<font color="YellowGreen">Clone To Particle</font>を作成、<font color="YellowGreen">Cloner To Particles</font>のinputと<font color="Orange">Particle Root</font>を繋ぐ。

5)これにより、<font color="YellowGreen">Cloner</font>に接続された3Dジオメトリが<font color="Orange">Particle</font>のインスタンスとして表示されます。

基本的な流れとしてはこんな感じでしょうか。

さらに追加の要素として

6)<font color="Orange">Particle Root</font>以下に<font color="Orange">Point Renderer</font>を置き、<font color="Orange">Attribute Shading</font>(Magnitude Velocity)により
移動量の大きいパーティクルは白く、小さいパーティクルは黒く描いています。

7)これを<font color="Grey">Render To Texture</font>により、テスクチャとして保存

8)このTextureに<font color="LightBlue">Image Effects(IMAG)</font>をかけ、スムーズにします。

9)プロセス後の白黒イメージを <font color="YellowGreen">Cloner</font>以下の<font color="YellowGreen">Image Affector</font>のinputに繋ぎ

10)移動量の速いパーティクルにはZ軸にスケールがかかるようになっています。

全体としてみると <font color="Purple">Field</font>/<font color="Orange">Particle</font>/<font color="YellowGreen">Cloner</font>/<font color="Grey">Render To Texture</font>/<font color="Lightblue">IMAG</font>の5要素が連携している
事になります。

##Network graph
![Inhale Exhale.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532219/8c15cbc8-9147-9c48-336e-817e7f2a5e23.jpeg)
ネットワークにカテゴリをまたいで繋がっている関係をマーキングするとこのような感じになるかと思います。
横断するワイヤが多くなるとノードグラフの可読性が悪くなるので、できるだけそれぞれのグループを
コンパクトに配置したり、ラインの重なりができる限り起きないように工夫しています。

##Verdict 
さて、この記事では「いろいろなノードをつないでみよう」
というテーマで書いてみました。

これはnotchを使う際には必須の考え方なのですが、慣れないうちは
それぞれの要素を同時に管理するのが大変ですね。

一方、慣れてくるに従ってこのチェーンを複雑化したり再帰的に使ったりすることが
できるようになります。これらは勿論元々notch内で想定されているワークフローなので
全く新しい物でもなんでもないのですが、様々なノードの組み合わせ方がわかると
Trail Rendererや、Geometey Connection Rendererの合せ技など、
「あぁ、notchでサクっと作ったっぽいね」という印象からはもう少し違った
複雑な挙動のビジュアルを作れるようになります。

思いもよらない発想やビジュアルが生まれてくるので、
この記事がみなさんのワークフローを一段推し進める一助になればと思います。

かしこ。