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