はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Unity】ShaderGraphで色んな図形を作ってみる

はじめに

今回はShaderGraphで色んな図形を作ってみる記事になります!

f:id:hanaaaaaachiru:20191123203135p:plain

紹介するのはこれらの形たち。早速みていきましょう。

楕円

名前 入出力 タイプ 意味
UV 入力 Vector 2 入力するUVの値
Width 入力 Vector 1 楕円の幅
Height 入力 Vector 1 楕円の高さ
Out 出力 Vector 1 出力値

Ellipse Node | Shader Graph | 7.1.5

f:id:hanaaaaaachiru:20191123232727p:plain

ポリゴン

名前 入出力 タイプ 意味
UV 入力 Vector 2 入力するUVの値
Sides 入力 Vector 1 辺の数
Width 入力 Vector 1 ポリゴンの幅
Height 入力 Vector 1 ポリゴンの高さ
Out 出力 Vector 1 出力値

Polygon Node | Shader Graph | 7.1.5

f:id:hanaaaaaachiru:20191123233354p:plain

長方形

名前 入出力 タイプ 意味
UV 入力 Vector 2 入力するUVの値
Width 入力 Vector 1 長方形の幅
Height 入力 Vector 1 長方形の高さ
Out 出力 Vector 1 出力値

Rectangle Node | Shader Graph | 7.1.5

もうここらへんになったら慣れたものですね。

f:id:hanaaaaaachiru:20191124002522p:plain

角丸な長方形

名前 入出力 タイプ 意味
UV 入力 Vector 2 入力するUVの値
Width 入力 Vector 1 長方形の幅
Height 入力 Vector 1 長方形の高さ
Radius 入力 Vector 1 角(丸める)の半径
Out 出力 Vector 1 出力値

Rounded Rectangle Node | Shader Graph | 7.1.5

f:id:hanaaaaaachiru:20191124003941p:plain

チェッカー

名前 入出力 タイプ 意味
UV 入力 Vector 2 入力するUVの値
Color A 入力 Color RGB 一個目のチェックの色
Color B 入力 Color RGB 二個目のチェックの色
Frequency 入力 Vector 2 何個チェック柄を置くか
Out 出力 Vector 2 出力値

Checkerboard Node | Shader Graph | 7.1.5

f:id:hanaaaaaachiru:20191124004505p:plain

図形とTiling And Offsetノード,Fractionノード

おそらくこれらの図形たちとTiling And OffsetノードFractionノードは一緒に覚えておくと良いと思います。

Tiling And Offsetについては前に記事を書いたのでよかったらみてみてください。

【Unity】ShaderGraphのTiling And Offsetノードについて - はなちるのマイノート


Fractionノード小数点のみを返すノードで、組み合わせるとこんなことができます。

f:id:hanaaaaaachiru:20191123234112p:plain

図形をいっぱい表示したいときはこの組み合わせというのを覚えておくと良いですね。

さいごに

ちなみに鋭い人はTiling And Offsetノードのタイルで図形を並べる方法を思いつくかもしれませんが、残念ながらそれはできません。

詳細はこちらにあるので、気になる方は見てみてください。
Ellipse Node | Shader Graph | 7.1.5