連我都料想不到，隔了快一年，
居然出第五篇了?!
上一篇 (四) 講的是 noise 的基礎，
這一篇 (五) 打算講
a. 如何畫 noise outline (外框?)，
b. noise outline 有甚麼常見應用。
[準備]
經過了前一篇，
應該都能畫得出下面類似的 2d noise
https://imgur.com/JncbutC
不管是用 Game Engine 給的現成 noise，
或是抄來的 shader 寫出來的都行，
反正畫得出來就好。
如果畫不出來，這裡有個現成的 (不是我寫的)
https://www.shadertoy.com/view/Wt2czD
[noise outline]
假設產生 noise 的 code 長得像這樣：
float noise( vec2 uv )
{
// create noise from uv
}
void fragment( out vec4 COLOR, vec2 UV )
{
vec2 uv = UV; // uv 應該要隨著螢幕長寬更改比例
// 產生一個黑白的 noise 畫面
float n = noise(uv);
COLOR.rgb = vec3(n);
}
原始畫面是
https://imgur.com/JncbutC
現在加一行，把 code 改成:
float n = noise(uv);
// =========== magic formula =========== //
n = 0.3 * 0.09 / (0.3-n);
// ===================================== //
COLOR.rgb = vec3(n);
畫面就會變成
https://imgur.com/B9HfACw
將將將! 劃出外框了! 就這麼簡單 XD
把 0.3 / 0.09 / 0.3 這三個參數改一改，
會出現其他各種效果，
有空可以試試。
[應用]
所以畫了 outline 又能怎樣呢?
其實有不少實用的地方。
舉例來說，第一個『水滴效果』
https://imgur.com/FcBbHxw
這是把螢幕當鏡頭，
模擬鏡頭上有水珠的樣子。
因為水珠的外圈折射率大，中心折射率小，
跟外框的顏色