コンテンツにスキップ

NodeだけでDotテクスチャを作る

ネット上に公開されているノードネットワークをみながら
ノードの機能とかどこがどうなっているのかを確認しながら
真似しつついろいろとこねくり回してみようとおもいます。

参考元

まずは参考。
カメラ座標系でオブジェクトに対してToon調のドットテクスチャを張り付けます。

座標系の指定

まず、テクスチャを張り付けるための座標をしています。
持ってくるには「TextureCoordinate」ノードを使用します。

今回はカメラ座標を使用して張り付けるので「Camera」を選択します。

Note

Cameraと似たようなパラメーターに「Window」がある。
何が違うというと、Cameraの場合はCameraのズームに応じてテクスチャが拡大・縮小するのに対して
Windowの場合は、カメラの移動に関係なく同じ見た目のテクスチャを表示する。

テクスチャのオフセット

テクスチャをオフセットしたり回転したり拡大縮小したりしたい場合があるので
次にMappingノードをつなぎます。

Maya使い的に言うと「Place2DTexture」にあたるのがこれ。
入力した座標系に対してTransform変換を行います。
テクスチャのオフセットもこれでできます。

分離と結合

NodeEditorでつなげられる値のうち「Vector」になっているものは
「X Y Z」がワンセットになっている。
もしこのそれぞれの要素を別々に取り出して処理をしたい場合は
Separate XYZ や Combine XYZを使用してX Y Zそれぞれの数字に分解したり
分解された値を結合したりする。

MappingからのアウトプットをWaveにつなぐ。
FloatからVectorにつないだ場合は、全部が同じ値がセットされる?

WaveTexutreは、「のこぎり波」を出力してくれる。

Vectorはこのテクスチャの座標系を入力。
(なにもなければGenerated)
今回はカメラ座標系で貼り付けるので、カメラ座標系をはりつけるのですが
このときにXとYをそれぞれ分離して2つにわけてから入力する。

こちらがX

こちらがY

このように、それぞれの座標系を分離してから入力すると
縦横の向きになる。

分離してWaveにはりつけて、結合するとこうなる。
これは、WaveTextureの波の数だけなかに小さな0-1の座標系グリッドをつくっている状態。

ので、GradientTextureにこの座標系グリッドをつなげると

Sphereのグラデーションが大量に並べられた状態になる。

GradientTextureのおかげで、円型のグラデーションができたので
これを使用してドットにしていきます。
現状、中央が1、外側が0の円状のグラデーションになっているので
ここにクランプをかけて指定値のところで色が切り分けられるようにします。

そのためにはMathノードの「Graeather Than」を使用します。
これは、指定のValueの値よりも大きい場合は1、そうでない場合は0を返す
ようになります。

ある指定の数値で0か1に置き換わるので、このような●が並んだテクスチャになります。

Valueを動かすと閾値がかわるので、ドットの大きさが変化します。

このモノクロドットをColorRampに閾値としてセットすると、色付きのドットになります。

Greather Thanノードを指さない場合、ColorRampのグラデーションのPosが
ドットの大きさに対応することになる。

オフセット用のノードを入れる

Waveを使用してつくったグリッド内でオフセットをしたい場合、Math内のSubtractとMultiplyノードを使用する。

Subtract

Subtractは引き算。

引き算をすると、ドットの位置をグリッド内でオフセットしてくれる。

Xの値を動かしてみると、赤成分がオフセットされているのがわかる。
数値が0-1でそれ以外はクランプされているので、グリッド内でしかグラデーションが移動
しないようになる。

Multiply

Multiplyを入れると、スケールになる。
グラデーションの値にかけ算が入る->閾値が変わる→大きくなる
という理屈?

まとめ

Texture Coordinateでなにかしらの座標系を取得してきて
間に計算を挟んで、それをカラーのグラーデーションにマッピングすることで
Dotが出来ることが理解できた。

Vectorに刺すのは、Mayaでトゥーンを作る時に
UVCoordをRampにさしてマッピングするのとやってることは同じなので
わかってしまえばなんとかなったけど、
はじめVectorの意味するところが分からずかなり調べるのに苦労してしまった。

全体図はこちら。

実際は、さらにこの塊を組み合わせていくので
これ以上にノードが膨大になっていくんだろうなぁ...

参考


最終更新日: 2019-02-09 18:08:06