詳解OpenGL Shader彩虹條紋效果的實現

Posted on by

前言

在一款圖片處理軟件colorow中發現彩虹效果濾鏡感覺蠻有意思。

在OpenGL Shader系列更新到現在嘗試通過之前積累的知識點來自行實現效果。

回顧

之前使用過內置函數smoothstep可實現數值過渡效果。如下代碼所示實現在坐標0.5分割黑色和白色分界。

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec3 color = vec3(0.);
    float glow = smoothstep(0.5001,0.5002,uv.x);
    gl_FragColor = vec4(color,1.);
}

可知函數smoothstep能用於做分割效果。

分別在0.,0.2、0.05,0.25、0.15,0.3實現rgb色值效果，如下代碼使用if-else來判斷坐標。

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec3 color = vec3(0.);
    float glow1 = 1. - smoothstep(0.,0.2,uv.x);
    float glow2 = uv.x > 0.05 ? 1. - smoothstep(0.05,0.25,uv.x) : 0.;
    float glow3 = uv.x > 0.15 ? 1. - smoothstep(0.15,0.3,uv.x) : 0.0;
    color += vec3(glow1,0.,0.)  + vec3(0.,glow2,0.) + vec3(0.,0.,glow3);
    gl_FragColor = vec4(color * 0.5,1.);
}

由於uv.x值是線性的所以呈現結果上來看並不自然。可以通過使用采用sin或是cos來增強過渡效果。

float glow1 = uv.x < 0.15 ? 1. - smoothstep(0.,1.,abs(sin(uv.x * 30.))) : 0.;
uv.x += 0.01;
float glow2 =  uv.x < 0.15 ? 1. - smoothstep(0.,1.,abs(sin(uv.x * 30.))) : 0.;
uv.x += 0.01;
float glow3 = uv.x < 0.15 ? 1. - smoothstep(0.,1.,abs(sin(uv.x * 30.))) : 0.;

效果實現

增加條紋

以上大致上實現瞭RGB彩條效果，若希望實現柵欄效果則需要將坐標平均分割出一段段。這裡將再次使用sin或是cos配合abs隻取正數，實現均勻分佈的[0,1]取值范圍，讓取值為1或是0作為分割點即可。因為uv.x取值是[0,1]分割需要多段則需要將范圍擴大將uv.x取值變更為[0,30]即可。

 // 色值大小計算
float v(in vec2 uv, float d, float o){
	 return 1.0-smoothstep(0.0,1.,abs(sin(uv.x * 30.)));
}
vec4 b(vec2 uv, float o) {
 // 坐標
 float d =  uv.x;
 return vec4(v(uv, d, o), 0.0, 0.0, 0.1) +  // 紅色
 vec4( 0.0,v(uv + vec2(0.4,0.), d, o), 0.0, 0.1) + // 綠色
 vec4( 0.0,0.,v(uv + vec2(0.8,0.), d, o), 0.1);   // 藍色
}
void main() {
    float iTime = 1.;
    vec2 uv = gl_FragCoord.xy /iResolution.x;
    gl_FragColor = b(uv, iTime)*0.2; // 降低亮度
}

角度變化

之前在簡單轉場效果中有介紹過對角線實現方法，這裡對角線條紋實現采用distance內置函數，distance(x,y)等同於length(x-y)。 在這裡使用smoothstep(0.0,1.,abs(sin(distance(uv.x ,uv.y)* 30.))),當x=y時v返回值為1表示最大，因此實現對角線效果。這裡可以通過修改uv.y百分比來調節角度。

float v(in vec2 uv, float d, float o){
    return 1.0-smoothstep(0.0,1.,abs(sin(distance(uv.x ,uv.y)* 30.)));
}

拓展

此外增加sin運用還能實現彩虹扭曲效果。

水平

對角線

扭曲

到此這篇關於詳解OpenGL Shader彩虹條紋效果的實現的文章就介紹到這瞭,更多相關OpenGL Shader 彩虹條紋效果內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：