Nabla Tech Lab

【Shader Graph】図形を描く

Unity Shader

はじめに

Shader Graphを使って平面図形を描く方法についての簡単な説明と、
具体例として、カージオイド（Cardioid）の図形を描くシェーダーの作り方。

図形を描く方法

曲線の極方程式（Polar equation）とステップ関数（Step function）を使う。

極方程式は、平面上の曲線を極座標系（Polar coordinates system）で表した方程式である。
多くの場合、 $r = f(\theta)$ という形で動径 $r$ を偏角 $\theta$ の関数として表すことができる。

ステップ関数 $f(x) = \text{step} (a, x)$ は、
・ $x$ が $a$ 未満の時に $f(x) = 0$
・ $x$ が $a$ 以上の時に $f(x) = 1$
となる関数である。

ステップ関数を用いて $g(x) = 1 - \text{step} (a, x)$ とすると、
・ $x$ が $a$ 未満の時に $g(x) = 1$
・ $x$ が $a$ 以上の時に $g(x) = 0$
となる。

極方程式とステップ関数を使うことで曲線の内側の領域を判定することができる。
原点を中心とする一定範囲の平面領域内で以下の1～3の処理を繰り返す。

平面領域内の1点の値 $(r_p, \theta_p)$ を取得する
曲線上の点への距離 $d = f(\theta_p)$ を計算する
$1 - \text{step} (d, r_p)$ を計算する

曲線の内側と判定された領域を塗りつぶすことで図形を描くことができる。

Shader Graphで図形を描く方法

主にPolar CoordinatesノードとCustom Functionノードを使う。

Polar Coordinates ノード | Shader Graph | 10.0.0-preview.27
Custom Function ノード | Shader Graph | 10.0.0-preview.27

Polar Coordinatesノードの出力は、 $x$ 成分が動径 $r$ の値、 $y$ 成分が偏角 $\theta$ の値になっている。
偏角 $\theta$ の値は、 $-0.5～0.5$ という値になっているため、Custom Functionノードの処理などでラジアンへの変換が必要となる。

シェーダー作成

環境

Unity 2020.3.18f1
Universal Render Pipeline 10.6.0
Shader Graph 10.6.0

Custom Function

カージオイドの極方程式

$r(\theta) = a (1 - \text{cos} \theta)$

Cardioid -- from Wolfram MathWorld

Graph

出力結果

Quadに描画した

アセット