詳解OpenGL Shader彩虹條紋效果的實現(xiàn)
前言
在一款圖片處理軟件colorow中發(fā)現(xiàn)彩虹效果濾鏡感覺蠻有意思。
在OpenGL Shader系列更新到現(xiàn)在嘗試通過之前積累的知識點來自行實現(xiàn)效果。
回顧
之前使用過內置函數(shù)smoothstep可實現(xiàn)數(shù)值過渡效果。如下代碼所示實現(xiàn)在坐標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實現(xiàn)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值是線性的所以呈現(xiàn)結果上來看并不自然?？梢酝ㄟ^使用采用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.;
效果實現(xiàn)
增加條紋
以上大致上實現(xiàn)了RGB彩條效果，若希望實現(xiàn)柵欄效果則需要將坐標平均分割出一段段。這里將再次使用sin或是cos配合abs只取正數(shù)，實現(xiàn)均勻分布的[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; // 降低亮度
}
角度變化
之前在簡單轉場效果中有介紹過對角線實現(xiàn)方法，這里對角線條紋實現(xiàn)采用distance內置函數(shù)，distance(x,y)等同于length(x-y)。 在這里使用smoothstep(0.0,1.,abs(sin(distance(uv.x ,uv.y)* 30.))),當x=y時v返回值為1表示最大，因此實現(xiàn)對角線效果。這里可以通過修改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運用還能實現(xiàn)彩虹扭曲效果。
水平
對角線
扭曲
到此這篇關于詳解OpenGL Shader彩虹條紋效果的實現(xiàn)的文章就介紹到這了,更多相關OpenGL Shader 彩虹條紋效果內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Android編程實現(xiàn)手繪及保存為圖片的方法(附demo源碼下載)
這篇文章主要介紹了Android編程實現(xiàn)手繪及保存為圖片的方法,涉及Android畫布的使用及圖片的操作技巧,并附帶了demo源碼供讀者下載,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了Android 客戶端RSA加密的實現(xiàn)方法的相關資料,希望通過本文能掌握RSA 的使用，需要的朋友可以參考下2017-08-08
Android開發(fā)使用HttpURLConnection進行網(wǎng)絡編程詳解【附源碼下載】
這篇文章主要介紹了Android開發(fā)使用HttpURLConnection進行網(wǎng)絡編程的方法,結合實例形式分析了Android基于HttpURLConnection實現(xiàn)顯示圖片與文本功能,涉及Android布局、文本解析、數(shù)據(jù)傳輸、權限控制等相關操作技巧,需要的朋友可以參考下2018-01-01
本篇文章給大家詳解了Android aapt命令介紹及常用命令實踐，有這方面需求的朋友跟著學習下吧。2018-01-01
這篇文章主要介紹了自定義Android圓形進度條，本文設計的進度條是圓形的，對進度條感興趣的小伙伴們可以參考一下2015-12-12
Android 中CheckBox的isChecked的使用實例詳解
這篇文章主要介紹了Android 中CheckBox的isChecked的使用實例詳解的相關資料,需要的朋友可以參考下2017-04-04
教你五分鐘實現(xiàn)Android超漂亮的刻度輪播控件實例教程
說到輪播圖,想必大家都不陌生，下面這篇文章主要給大家介紹了關于如何利用五分鐘快速實現(xiàn)一款超漂亮的Android刻度輪播控件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧2018-09-09
本篇文章主要介紹了Android中點擊事件的四種寫法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Android5.x中的陰影效果elevation和translationZ的實現(xiàn)方法
這篇文章主要介紹了 android5.x中的陰影效果elevation和translationZ的相關資料,需要的朋友可以參考下2016-12-12
Android源碼中final關鍵字的用法及final,finally,finalize的區(qū)別
Android的源碼中很多地方對final關鍵字的用法很是“別出心裁”，之所以這么說是因為我從沒看過是這么使用final關鍵字的，通過本文給大家分享Android源碼中final關鍵字的用法及final,finally,finalize的區(qū)別，感興趣的朋友一起學習吧2015-12-12