看了下面的 shadertoy 的一些隨筆。

https://www.shadertoy.com/view/4lfSzs

準備一個隨時間變化的 noise (3d or 4d)。

劃出實心、有漸層環的圖案

我們把 UV (0,0) 設定在畫面中心，length 為 UV 離中心的長度。

da = length – 0.4;

color = vec4(da);

實心半徑是 0.4，漸層到無限遠，依距離數值為距離減 0.4，可視圓半徑是 1.4。

劃出實心、有噪音加漸層的圖案

接上例

da = da – r * noise( uv );

實心區數值原本就小於 0，所以再減也不會變。

漸層區半徑最多會增加 r，因為 noise [0…1]。

r 也用來調整噪音的強度。

接上例，零乘零是零、一乘一是一，所以只有灰階會變。

da = clamp( 0, 1, da );

da = da * 20.;

實心處不會變，半徑一樣是 0.4，漸層大於 0.05 的都會變成 1，只留下邊緣近黑處。

下圖

db = db / 0.4;

做出沒有實心的漸層，半徑為 0.4。

這種作法也能加半徑為 1.25 的漸層圈，實心半徑依然是 0.4;

db = db – 1.25;

也可以減小漸層圈，如果是黑的，再乘也是零，但如果是 0.5 以上的就會變白色。這是常用技巧。

db = db * 2.0;

其實沒差別。

舉例來說，我先 d – 0.4 做 0.4 實心，1.0 漸層的圈圈，然後我希望漸層是 0.4 就再除 0.4。

也可以先 ( d / 0.4 ) 做漸層 0.4，再減一，變實心 1.0 漸層 0.4。

( d – 0.4 ) / 0.4 = ( d / 0.4 ) – 1.0

是一樣的圖。

接上，黑白反轉技巧，先把大於 1 的都變 1，小於 0 的都變 0，然後再反轉。

db = clamp( 0, 1, d );

db = smoothstep(1, 0, d);

同樣的 da 也反轉

da * db

外圈是漸層加噪音，酷。