OpenGL Shader實現陰影遮罩效果
smoothstep另一種用法
在之前OpenGL Shader-抗鋸齒實現文章中所介紹的那樣:為瞭抗鋸齒效果可以用smoothstep
函數對繪制形狀進行平滑過渡來實現。其中也提到瞭當smoothstep
函數中入參a
和b
范圍過大時就會出現漸變效果。如OpenGL Shader-抗鋸齒實現中所展示的效果:
遮罩效果實現
看到這個效果後似乎可以利用smoothstep
函數中a
和b
入參取大范圍來實現不一樣的特效能力。例如可以使用該特點來實現類似於老電影中遮罩效果,在視圖邊緣出現一層朦朧遮罩中間最亮四周有一層淡淡的陰影效果。
實現原理其實就是利用smoothstep
函數入參使用大范圍值,在繪制圓基礎上改造處理。底色使用白色vec3(1.)
,陰影遮蓋使用黑色vec3(1.)
就能達到陰影遮罩效果瞭。
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
函數實現外,下面還有一種方法也能實現陰影遮罩效果。如下glsl
所示 對顏色向量vec4 texture
和vignette
相乘,相當於改變色值通道亮度達到明暗對比;同時對於取值uv.y-0.5
可以理解越接近中心取值越接近為0,那麼計算得出的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; }
通過對照也能發現采用圓形公式實現遮罩是有一定圓弧趨勢,而另一種遮罩是偏向矩形,在特效效果上略有差異。以此類推肯定還可以根據這種方式來實現星型,愛心等形狀遮罩。
smoothstep
vignette
效果擴展
最後可以增加一個time
時間入參,通過vigAmt
值不斷變化vignette
強弱來實現忽明忽暗的效果,會有一種在看老電影的感受。
#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實現陰影遮罩效果的文章就介紹到這瞭,更多相關OpenGL Shader陰影遮罩內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- OpenGL Shader實現物件材料效果詳解
- 詳解OpenGL Shader抗鋸齒的實現
- OpenGL Shader實現簡單轉場效果詳解
- 詳解OpenGL Shader彩虹條紋效果的實現
- OpenGL Shader實現光照發光體特效