詳解OpenGL Shader彩虹條紋效果的實現
前言
在一款圖片處理軟件colorow中發(fā)現彩虹效果濾鏡感覺蠻有意思。
在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百分比來調節(jié)角度。
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 彩虹條紋效果內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Android編程實現捕獲程序異常退出時的錯誤log信息功能詳解
這篇文章主要介紹了Android編程實現捕獲程序異常退出時的錯誤log信息功能,結合實例形式分析了Android異常信息捕獲與日志操作相關實現技巧,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了Android編程之繪圖canvas基本用法,結合實例形式分析了Android canvas繪圖的相關方法與使用技巧,需要的朋友可以參考下2017-09-09
Android彈出dialog后無法捕捉back鍵的解決方法
這篇文章主要為大家詳細介紹了Android彈出dialog后無法捕捉back鍵的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
本篇文章主要介紹了android 設置鬧鐘及通知示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
在Android開發(fā)中,透明度是很常見的一個屬性,是指控制一個視圖的不透明程度,取值范圍從0到255,通過設置透明度能夠實現圖片、控件等UI元素的顯示效果的調整,Android透明度對照表是開發(fā)過程中常用的工具之一,它能夠幫助開發(fā)人員快速了解設置透明度的數值范圍2023-11-11
這篇文章主要介紹了Webview實現android簡單的瀏覽器實例代碼的相關資料,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了Android ActivityManager使用案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細介紹了微信跳一跳游戲Android刷分代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要為大家詳細介紹了Android實現驗證碼登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
Android Canvas之drawBitmap方法案例詳解
這篇文章主要介紹了Android Canvas之drawBitmap方法案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-08-08