詳解OpenGL Shader彩虹條紋效果的實(shí)現(xiàn)
前言
在一款圖片處理軟件colorow中發(fā)現(xiàn)彩虹效果濾鏡感覺蠻有意思。
在OpenGL Shader系列更新到現(xiàn)在嘗試通過之前積累的知識點(diǎn)來自行實(shí)現(xiàn)效果。
回顧
之前使用過內(nèi)置函數(shù)smoothstep可實(shí)現(xiàn)數(shù)值過渡效果。如下代碼所示實(shí)現(xiàn)在坐標(biāo)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.);
}可知函數(shù)smoothstep能用于做分割效果。
分別在0.,0.2、0.05,0.25、0.15,0.3實(shí)現(xiàn)rgb色值效果，如下代碼使用if-else來判斷坐標(biāo)。
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值是線性的所以呈現(xiàn)結(jié)果上來看并不自然?？梢酝ㄟ^使用采用sin或是cos來增強(qiáng)過渡效果。
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.;
效果實(shí)現(xiàn)
增加條紋
以上大致上實(shí)現(xiàn)了RGB彩條效果，若希望實(shí)現(xiàn)柵欄效果則需要將坐標(biāo)平均分割出一段段。這里將再次使用sin或是cos配合abs只取正數(shù)，實(shí)現(xiàn)均勻分布的[0,1]取值范圍，讓取值為1或是0作為分割點(diǎn)即可。因?yàn)閡v.x取值是[0,1]分割需要多段則需要將范圍擴(kuò)大將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) {
// 坐標(biā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); // 藍(lán)色
}
void main() {
float iTime = 1.;
vec2 uv = gl_FragCoord.xy /iResolution.x;
gl_FragColor = b(uv, iTime)*0.2; // 降低亮度
}
角度變化
之前在簡單轉(zhuǎn)場效果中有介紹過對角線實(shí)現(xiàn)方法，這里對角線條紋實(shí)現(xiàn)采用distance內(nèi)置函數(shù)，distance(x,y)等同于length(x-y)。 在這里使用smoothstep(0.0,1.,abs(sin(distance(uv.x ,uv.y)* 30.))),當(dāng)x=y時v返回值為1表示最大，因此實(shí)現(xiàn)對角線效果。這里可以通過修改uv.y百分比來調(diào)節(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運(yùn)用還能實(shí)現(xiàn)彩虹扭曲效果。
水平
對角線
扭曲
到此這篇關(guān)于詳解OpenGL Shader彩虹條紋效果的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)OpenGL Shader 彩虹條紋效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Android編程實(shí)現(xiàn)捕獲程序異常退出時的錯誤log信息功能詳解
這篇文章主要介紹了Android編程實(shí)現(xiàn)捕獲程序異常退出時的錯誤log信息功能,結(jié)合實(shí)例形式分析了Android異常信息捕獲與日志操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了Android編程之繪圖canvas基本用法,結(jié)合實(shí)例形式分析了Android canvas繪圖的相關(guān)方法與使用技巧,需要的朋友可以參考下2017-09-09
Android彈出dialog后無法捕捉back鍵的解決方法
這篇文章主要為大家詳細(xì)介紹了Android彈出dialog后無法捕捉back鍵的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
本篇文章主要介紹了android 設(shè)置鬧鐘及通知示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
在Android開發(fā)中,透明度是很常見的一個屬性,是指控制一個視圖的不透明程度,取值范圍從0到255,通過設(shè)置透明度能夠?qū)崿F(xiàn)圖片、控件等UI元素的顯示效果的調(diào)整,Android透明度對照表是開發(fā)過程中常用的工具之一,它能夠幫助開發(fā)人員快速了解設(shè)置透明度的數(shù)值范圍2023-11-11
Webview實(shí)現(xiàn)android簡單的瀏覽器實(shí)例代碼
這篇文章主要介紹了Webview實(shí)現(xiàn)android簡單的瀏覽器實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了Android ActivityManager使用案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細(xì)介紹了微信跳一跳游戲Android刷分代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
Android實(shí)現(xiàn)驗(yàn)證碼登錄
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)驗(yàn)證碼登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
Android Canvas之drawBitmap方法案例詳解
這篇文章主要介紹了Android Canvas之drawBitmap方法案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08