【Shader Graph】星芒形(アステロイド)を描く

はじめに

Unity の Shader Graph を使って星芒形(アステロイド)の図形を描くシェーダーの作り方。
図形を描く方法の基本については 【Shader Graph】図形を描く の記事を参照。

曲線の極方程式

ステロイド(Astroid)の極方程式は以下の通り

 r(\theta) = \frac{\left| \text{sec}\theta \right|}{(1 + \text{tan}^{2/3} \theta)^{3/2}}

Astroid -- from Wolfram MathWorld

上記の式では  \text{tan}\theta の値が負となる範囲で適切な値が得られないため、
タンジェント項を絶対値に変更して実装する。

 r^{\prime} (\theta) = \frac{\left| \text{sec}\theta \right|}{(1 + {\left| \text{tan} \theta \right| }^{2/3})^{3/2}}

以下の画像のように、Graphtoyを使って関数を可視化すると分かりやすい。

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

https://raw.githubusercontent.com/sotanmochi/ProceduralShapesShaderPack/main/Docs/Astroid/Astroid_Graphtoy_02.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/Astroid/Astroid_CustomFunction.png

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

Graph

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

SubGraph

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

出力結果

Quadに描画した

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

https://raw.githubusercontent.com/sotanmochi/ProceduralShapesShaderPack/main/Docs/Astroid/Astroid_Rotate.gif

アセット

github.com

github.com