[程式] 超新手 shader language 教學文 (五)

看板GameDesign (遊戲設計)作者meowyih (meowyih)時間2年前 (2022/06/15 23:06)推噓4(4推 0噓 1→)

留言5則, 4人參與討論串1/1

連我都料想不到，隔了快一年，居然出第五篇了?! 上一篇 (四) 講的是 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://www.ptt.cc/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

推

wangm4a1

06/16 10:45, 2年前 , 1^F

06/16 10:45, 1^F

推

Lhmstu

06/16 15:35, 2年前 , 2^F

06/16 15:35, 2^F

推

dklassic

06/16 15:54, 2年前 , 3^F

06/16 15:54, 3^F