連我都料想不到，隔了快一年， 居然出第五篇了?! 上一篇 (四) 講的是 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 這是把螢幕當鏡頭， 模擬鏡頭上有水珠的樣子。 因為水珠的外圈折射率大，中心折射率小， 跟外框的顏色 -- 靠外面比較白 (接近1)，靠中間比較灰 (接近0) 類似。 假設背景是 TEXTURE，最後一行改成下面這樣就可以了。 // 將 uv 往 vec2(1,1) 的方向偏移 0%~25% // 並取得偏移點的 pixel COLOR = texture(TEXTURE, (UV + vec2(n) / 4.)); https://imgur.com/FcBbHxw 可以加上時間讓水滴往下流， 也可以用 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 (影片) 乍看之下好像和外框無關， 但我改一下參數。 https://imgur.com/sJN524E 這樣應該就看出來了， 這是同樣的外框效果。 [結語] 寫完了。 會不會有第六篇呢? 我覺得很難，哈哈。 --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.228.214.18 (臺灣) ※ 文章網址: https://webptt.com/m.aspx?n=bbs/GameDesign/M.1655305586.A.FD1.html ※ 編輯: meowyih (36.228.214.18 臺灣), 06/15/2022 23:13:21 ※ 編輯: meowyih (61.228.80.32 臺灣), 06/16/2022 09:04:40