這是我在 PTT 發表的文章的備份。
綱要
這篇文章將會講到：
- 如何畫 2d noise outline (外框?)
- 2d noise outline 有甚麼常見應用。
準備
經過了前一篇，
應該都能畫得出下面類似的 2d noise
不管是用 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);
}
原始畫面是
現在加一行，把 code 改成:
float n = noise(uv);
// =========== magic formula =========== //
n = 0.3 * 0.09 / (0.3-n);
// ===================================== //
COLOR.rgb = vec3(n);
畫面就會變成
將將將! 劃出外框了! 就這麼簡單 XD
把 0.3 / 0.09 / 0.3 這三個參數改一改，
會出現其他各種效果，
有空可以試試。
應用
所以畫了 outline 又能怎樣呢?
其實有不少實用的地方。
舉例來說，第一個：
『水滴效果』
這是把螢幕當鏡頭，
模擬鏡頭上有水珠的樣子。
因為水珠的外圈折射率大，中心折射率小，
跟外框的顏色 —
靠外面比較白 (接近1)，靠中間比較灰 (接近0) 類似。
假設背景是 TEXTURE，最後一行改成下面這樣就可以了。
// 將 uv 往 vec2(1,1) 的方向偏移 0%~25%
// 並取得偏移點的 pixel
COLOR = texture(TEXTURE, (UV + vec2(n) / 4.));
可以加上時間讓水滴往下流，
也可以用 3d noise 讓水滴變形，
模擬真實的下雨景色。
第二個例子
『水底的光影』
https://imgur.com/SbxNQxT (影片)
這只是把 2d noise 變 3d，然後乘上顏色，
會放在游泳池或是水底，造成水底的光影效果。
// code 節錄是這樣
float n = noise3d( vec3(uv, TIME));
// =========== magic formula =========== //
n = 0.3 * 0.09 / (0.3-n);
// ===================================== //
COLOR.rgb = vec3(1.) * n * 0.6 + vec3(.1, .2, .4) * 1.4;
第三個例子
『閃電』
https://imgur.com/HMLoRoQ (影片)
乍看之下好像和外框無關，
但我改一下參數。
這樣應該就看出來了，
這是類似的外框效果。