回答編集履歴

2

Ellipseの問題点について追記

2023/10/07 07:50

投稿

Bongo
Bongo

スコア10816

test CHANGED
@@ -41,3 +41,18 @@
41
41
  シーンにQuadを配置してマテリアルをセットし、各パラメーターを変えてみると下図のようになりました。
42
42
 
43
43
  ![図2-4](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-06/c32cf389-101c-4cf9-a002-71b03a519567.gif)
44
+
45
+ ## 菱形を星に変える場合の注意点
46
+
47
+ 菱形を描くサブグラフを、下図のように変更してみました。
48
+
49
+ ![図3-1](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-07/d5e4ab59-ab50-43b9-a9cb-ec75e6d07b9d.png)
50
+
51
+ Ellipseを使うルートは見送って代替ルートに差し替えていますが、Ellipseを使った場合は下図のように格子境界でスジが生じてしまいました。
52
+
53
+ ![図3-2](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-07/847f1b9e-d8a2-4df5-8765-d6a17b3753b6.png)
54
+
55
+ Ellipseは計算過程で円の中心からの距離の[fwidth](https://learn.microsoft.com/ja-jp/windows/win32/direct3dhlsl/dx-graphics-hlsl-fwidth)をとっている箇所があったのですが、どうやらこれがまずいみたいでした。格子の境界では円の中心からの距離が大きく飛びますので、異常値を生じてしまうのだろうと思います。
56
+ エッジの滑らかさは失われてしまいますが、前述の代替ルートに差し替えたところスジは消えたようでした。
57
+
58
+ ![図3-3](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-07/3a8c86f7-d146-4f57-8dfd-02fec8c60f83.png)

1

ランダム菱形シェーダーを追記

2023/10/05 21:56

投稿

Bongo
Bongo

スコア10816

test CHANGED
@@ -12,3 +12,32 @@
12
12
  すると下図のように個々のパーティクルが菱形で描画されました。
13
13
 
14
14
  ![図3](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-30/9b250fc7-f4f3-42b0-b71c-85b069d5621a.gif)
15
+
16
+ ## ランダム菱形シェーダー
17
+
18
+ 菱形を描く部分はサブグラフとして作りました。
19
+ エッジにグラデーションを施したりエッジのたわみを調整したりする機能はオミットして、与えられたUVの0~1の範囲いっぱいに白い菱形を描くだけのシンプルなものにしました。
20
+
21
+ ![図2-1](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-06/ae13eb73-64b7-4e2a-857a-c6cef347434c.png)
22
+
23
+ メインのシェーダーグラフは下図のようになっています。菱形をランダムに配置するロジックは、Yuji YASUHARAさんの[TiledVoronoi](https://qiita.com/yuji_yasuhara/items/cfe4b08e7438eca06eda#tiledvoronoihlsl-%E6%9C%80%E7%B5%82%E3%82%B3%E3%83%BC%E3%83%89)を拝借しました。
24
+ UV空間を格子状に区切って各セルに1個ずつ点を打つ形ですので、完全ランダムと比べると規則性に縛られてしまうでしょうが、点数が多くても(つまり格子の分割数を増やしても)一定した処理コストで描画できるためシェーダーにとっては好都合かと思います。
25
+
26
+ ![図2-2](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-06/a269f0ad-5da4-4c19-821a-7df0c72dc5e6.png)
27
+
28
+ グラフの中ほどで9つの区画に菱形を書いている箇所がありますが、この繰り返し部分は共通の処理ですのでDiamondCellとしてサブグラフにまとめました。このグラフ内で前述の菱形サブグラフ(Diamond)を使用しています。
29
+
30
+ ![図2-3](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-06/22c24bdc-f112-452c-acb7-2a33f9045151.png)
31
+
32
+ RandomVectorはCustom Functionノードで、コードは下記の内容になっています。
33
+
34
+ ```HLSL
35
+ float2x2 m = float2x2(15.27, 47.63, 99.41, 89.98);
36
+ float2 angles = fmod(mul(UV, m), TWO_PI);
37
+ UV = frac(sin(angles) * 46839.32) * Offset;
38
+ Out = float2(sin(UV.y), cos(UV.x)) * 0.5 + 0.5;
39
+ ```
40
+
41
+ シーンにQuadを配置してマテリアルをセットし、各パラメーターを変えてみると下図のようになりました。
42
+
43
+ ![図2-4](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-06/c32cf389-101c-4cf9-a002-71b03a519567.gif)