【Shader Graph】星型多角形(N芒星)を描く

はじめに

Unity の Shader Graph を使ってN芒星(五芒星、六芒星、七芒星、など)を描くシェーダーの作り方。
図形を描く方法の基本については 【Shader Graph】図形を描く の記事を参照。

曲線の極方程式

N芒星( n \ge 5)を描くための極方程式は以下の通り。

 r (\theta) = \frac{\text{cos} \left( \frac{2 \, \pi}{n} \right)}
            {\text{cos} \left( \frac{2 \, \pi}{n} \, - \, \frac{\text{arccos} \left(\text{cos} \left( n \theta \right) \right)}{n} \right)}

図形の丸みを変化させるパラメーター  k \, (0 \le k \le 1) を持つ場合の極方程式は以下の通り。

 r^{\prime} (\theta) = \frac{\text{cos} \left( \frac{\text{arcsin} (k)}{n} \, + \, \frac{3 \pi}{2n} \right)}
            {\text{cos} \left( \frac{\text{arcsin} (k \, \text{cos} \left( n \theta \right))}{n} \, + \, \frac{3 \pi}{2n} \right)}

これらの極方程式についての解説は 極座標を用いて星型多角形(N芒星)を描く方法について の記事を参照。

シェーダー作成

環境

  • 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/StarPolygon/StarPolygon_CustomFunction.png

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

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

Graph

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

SubGraph

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

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

Keyword | Shader Graph | 10.0.0-preview.27

出力結果

Quadに描画した

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

参考資料

  • シェーダーバリアントについて
    Unity Shader Programming Vol.02(第8章 シェーダバリアントによる複数シェーダの生成) booth.pm

  • 星型多角形を描くための極方程式について nabla-tech-lab.hatenablog.com

アセット

github.com

github.com