OpenGL?Shader如何實(shí)現(xiàn)陰影遮罩效果

小編給大家分享一下OpenGL Shader如何實(shí)現(xiàn)陰影遮罩效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

smoothstep另一種用法

在之前OpenGL Shader-抗鋸齒實(shí)現(xiàn)文章中所介紹的那樣：為了抗鋸齒效果可以用smoothstep函數(shù)對(duì)繪制形狀進(jìn)行平滑過(guò)渡來(lái)實(shí)現(xiàn)。其中也提到了當(dāng)smoothstep函數(shù)中入?yún)?code>a和b范圍過(guò)大時(shí)就會(huì)出現(xiàn)漸變效果。如OpenGL Shader-抗鋸齒實(shí)現(xiàn)中所展示的效果：

遮罩效果實(shí)現(xiàn)

看到這個(gè)效果后似乎可以利用smoothstep函數(shù)中a和b入?yún)⑷〈蠓秶鷣?lái)實(shí)現(xiàn)不一樣的特效能力。例如可以使用該特點(diǎn)來(lái)實(shí)現(xiàn)類似于老電影中遮罩效果，在視圖邊緣出現(xiàn)一層朦朧遮罩中間最亮四周有一層淡淡的陰影效果。

實(shí)現(xiàn)原理其實(shí)就是利用smoothstep函數(shù)入?yún)⑹褂么蠓秶?，在繪制圓基礎(chǔ)上改造處理。底色使用白色vec3(1.),陰影遮蓋使用黑色vec3(1.)就能達(dá)到陰影遮罩效果了。

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;

    vec4 texture = texture(iChannel2,uv);
    uv -= 0.5;
    uv.x *= iResolution.x/iResolution.y;
    float m = 0.4;
    m = smoothstep(m-0.2,m+0.2,length(uv) - 0.2);
    vec3 pixel = mix(vec3(1.),vec3(0.),m);
    gl_FragColor = vec4(pixel,1.0);
    
}

除了采用smoothstep函數(shù)實(shí)現(xiàn)外，下面還有一種方法也能實(shí)現(xiàn)陰影遮罩效果。如下glsl所示 對(duì)顏色向量vec4 texture和vignette相乘，相當(dāng)于改變色值通道亮度達(dá)到明暗對(duì)比；同時(shí)對(duì)于取值uv.y-0.5可以理解越接近中心取值越接近為0，那么計(jì)算得出的vignette就越大約接近為1。

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture = vec4(1.);
    float vigAmt = 4.0;
    float vignette = (1.0-vigAmt*(uv.y-0.5)*(uv.y-0.5))*(1.0-vigAmt*(uv.x-0.5)*(uv.x-0.5));
    texture *= vignette;
    gl_FragColor = texture;
}

通過(guò)對(duì)照也能發(fā)現(xiàn)采用圓形公式實(shí)現(xiàn)遮罩是有一定圓弧趨勢(shì)，而另一種遮罩是偏向矩形，在特效效果上略有差異。以此類推肯定還可以根據(jù)這種方式來(lái)實(shí)現(xiàn)星型，愛(ài)心等形狀遮罩。

smoothstep

vignette

效果擴(kuò)展

最后可以增加一個(gè)time時(shí)間入?yún)ⅲㄟ^(guò)vigAmt值不斷變化vignette強(qiáng)弱來(lái)實(shí)現(xiàn)忽明忽暗的效果，會(huì)有一種在看老電影的感受。

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture = texture(iChannel2,uv);
    float vigAmt = 4.0 + 0.3 * sin(time + 5.0 * cos(time*5.0));
    float vignette = (1.0-vigAmt*(uv.y-0.5)*(uv.y-0.5))*(1.0-vigAmt*(uv.x-0.5)*(uv.x-0.5));
    texture *= vignette;
    gl_FragColor = texture;
}

以上是“OpenGL Shader如何實(shí)現(xiàn)陰影遮罩效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！