【Shader Graph】花の図形を描く

はじめに

Unity の Shader Graph を使って花の図形を描くシェーダーの作り方。
図形を描く方法の基本については 【Shader Graph】図形を描く の記事を参照。

曲線の極方程式

バラ曲線(※正葉曲線ともいう)の極方程式は以下の通り。

 r(\theta) = a \,\text{cos} \,(n\theta)

Rose Curve -- from Wolfram MathWorld

これを基にして  r(\theta) = a \,\left| \text{cos} \,(n\theta) \right| とすると、 2n 枚の花びらを持つ形を描くことができる。
さらに  p (p > 0) すると、花びらを細くしたり広くしたりすることができる。

 r_{c}(\theta) = a \,\left| \text{cos} \,(n\theta) \right|^{p}

また、 \text{cos} 関数だけでなく  \text{sin} 関数によって表すこともできる。

 r_{s}(\theta) = a \,\left| \text{sin} \,(n\theta) \right|^{p}

 p の値を変化させた時の様子は、以下の画像のように、Graphtoyを使って可視化すると分かりやすい。

https://raw.githubusercontent.com/sotanmochi/ProceduralShapesShaderPack/main/Docs/Rose/Rose_Graphtoy.png

graphtoy.com

シェーダー作成

環境

  • Unity 2020.3.18f1
  • Universal Render Pipeline 10.6.0
  • Shader Graph 10.6.0

Custom Function

https://raw.githubusercontent.com/sotanmochi/ProceduralShapesShaderPack/main/Docs/Rose/Rose_CustomFunction_CosineCurve.png

https://raw.githubusercontent.com/sotanmochi/ProceduralShapesShaderPack/main/Docs/Rose/Rose_CustomFunction_SineCurve.png

https://raw.githubusercontent.com/sotanmochi/ProceduralShapesShaderPack/main/Docs/Rose/Rose_CustomFunctionNode.png

Graph

https://raw.githubusercontent.com/sotanmochi/ProceduralShapesShaderPack/main/Docs/Rose/Rose_ShaderGraph.png

SubGraph

https://raw.githubusercontent.com/sotanmochi/ProceduralShapesShaderPack/main/Docs/Rose/Rose_SubGraph.png

 \text{cos} 関数で描画される図形と  \text{sin} 関数で描画される図形を切り替えられるように、Keyword ノード を使っている。
Keyword ノードを使うことで、シェーダーバリアント(Shader Variant)を作ることができる。

Keyword | Shader Graph | 10.0.0-preview.27

出力結果

Quadに描画した

https://raw.githubusercontent.com/sotanmochi/ProceduralShapesShaderPack/main/Docs/Rose/Rose.png

参考資料

アセット

github.com

github.com