ちょっと思い立ってトーン風マテリアルを作ってみた。
いわゆる漫画のあれね
需要はわからないけど、たぶん誰かがいい感じに使うでしょってことでノードを公開しとくね
ノードは各自コピペしてもらえればいいとして、作り方についての簡単な説明をば
ベースとしてはみつまめ杏仁さんのところのこの記事
この記事をみてスクリーントーンも作れそうだなとなったので実践
まずはノードを写す
杏仁さんの作ったマテリアルを解析する…
最初のFmodでUV値を指定した数に分割する。
Fmodを使うとUVの値が減るため、次のMultiplyで減らした分を元に戻す。
お前は何を言っているんだ。という人は小さい数値で手で計算してみるとなるほどとなる。
続いてここはUV値の調整。
すぐ後に使うVectortoRadialValueで正しい円を描くための調整。
テクスチャを使う場合は不要
ここでドットの描画とStepによるドットサイズの調整をしている。
VectortoRadialValueは円形のグラデーションを生成する関数。
さて、調査は終了。分解して考えればなんということは無い。
あとはこれをスクリーントーン化するだけ
そもそもスクリーントーンの形状ってなんぞ？
というと、ただドットが並んでるだけではなく1列ごとにズレてドットが並んでいるパターンになっている。漫画見ればわかると思うけど。
つまり杏仁さんのままだと要件を満たせていないのだ。
また、杏仁さんのマテリアルは特定のドット数…つまりサイズの割合が限定されているという制限がある。
(Imageを引き延ばしたりすると、とたんに点が正円にならず崩壊する)
今回はその制限も解決することにした。
最初の部分はTexcoordではなくScreenAlignedUVsに変更。
ちょっと小細工をすることでスクリーンサイズに影響されずに画面に張ったようなトーン表現ができるようになる。
右側は元のノードと意味は一緒。
1行のドット数をパラメータにして使いまわしてる。
そして本命の部分
偶数行のＵＶズラし
まずは大元のＵＶ値からＧの値（縦のＵＶ値）を抜き出す
ドット数の半分をFmodをかける。
これで緩やかな縦のUVを作り出す
MultiplyでUV値を0~1に戻したうえでStepノードに0.5を入れることで
1行ごとに縞々になるUV値が出来上がる。
つまり、この縞々の赤い部分だけ横軸のUV値をズラせば目的を達成可能ということ
Multiplyの0.5の部分でUV値を0.5ズラしている。
あとは杏仁さんのマテリアルと基本は変わらず。
トーングラデーションをしたかったのと背景カラーも欲しかったため少し手を加えたけど、そこは見たままだから特に説明しない。
ノードは渡したから自分で見れるはず。
あとがき
なんとなく思い立って作ったけど、思いのほかいい感じにできて〇
使い道はわからんけど、自分はフォントマテリアルとして使った。
改善点としてはトーングラデーションがX方向あるいはY方向の一方向にしかかけられず斜めのトーングラデーションがかけられないこと
DotSizeの設定が定量的ではないからもう少しわかりやすい0~1化をしたい
とまぁ心残りはあるけど別に売るわけでもなし、ここでひとまず終わりとする。
改善案わかったら教えてほしい…
わかんないところがあっても教えてほしい…
