OpenGL水波紋效果

glsl水波紋效果，可使用shadertoy直接運行。sin和iTime配合得到水波紋mask，通過mask流動變化得到水波紋效果。

腳本1

#iChannel0 "file://./bg0.jpg"// 水波紋中心點 const vec2 center = vec2(0.5, 0.5); // 水波紋速度 const float speed = 2.5; // 水波紋強度 const float intensity = 36.0;void mainImage(out vec4 fragColor, in vec2 fragCoord) {// 計算uvvec2 uv = fragCoord.xy / iResolution.xy;// 計算center到各個uv的值float dst = distance(uv, center);// fragColor = vec4(vec3(dst), 1.0);// 計算水波紋// sin將對這個范圍限制到[-1, 1]// dst范圍是[0, sqrt(2)]// intensity可以理解為波紋數// iTime的引入讓一個點可以從[-1, 1]的變化// speed是速度// 可以理解為dst*intensity是初始波紋, iTime的引入讓波紋動了起來float wave = sin(sqrt(dst)*intensity-iTime*speed);// fragColor = vec4(vec3(wave), 1.0);// 接下來使用da和偏移的db來mix, 也就是水波紋白色區域取db, 黑色區域取davec3 da = texture2D(iChannel0, uv).rgb;vec3 db = texture2D(iChannel0, uv-vec2(0.01)).rgb;vec3 res = mix(da, db, wave*wave); // wave*wave范圍為[0, 1]fragColor = vec4(res, 1.0); }

腳本2

#iChannel1 "file://./bg0.jpg" #iChannel2 "file://./mask.png"const float intensity = 0.02; const float speed = 10.0;void mainImage(out vec4 fragColor, in vec2 fragCoord) {vec2 uv1 = fragCoord.xy / iResolution.xy;// mask的uv流動vec2 uv2 = uv1 + vec2(0.0, iTime * speed / 100.0);// 由于vs中不能對iChannel2進行repeat, 所以進行一個求余操作uv2 = mod(uv2, 1.0);// 得到mask的流動vec2 wave = texture2D(iChannel2, uv2).xy;// wave范圍是[0, 1], intensity限制了范圍, 錯位得取像素uv1 = uv1 + wave*intensity;fragColor = texture(iChannel1, uv1); }

腳本3

#iChannel0 "file://./bg0.jpg"const float speed = 1.0; const float intensity = 6.0;float wave(vec2 pos, float t, float freq, float numWaves, vec2 center) {float d = length(pos - center);d = log(1.0 + exp(d));return 1.0/(1.0+20.0*d*d) * sin(2.0*3.1415*(-numWaves*d + t*freq)); }float height(vec2 pos, float t) {float w;w = wave(pos, t, speed, intensity, vec2(0.5, -0.5));w += wave(pos, t, speed, intensity, -vec2(0.5, -0.5));return w; }vec2 normal(vec2 pos, float t) {return vec2(height(pos - vec2(0.01, 0), t) - height(pos, t), height(pos - vec2(0, 0.01), t) - height(pos, t)); }void mainImage(out vec4 fragColor, in vec2 fragCoord) {vec2 uv = fragCoord.xy / iResolution.xy;vec2 uvn = 2.0*uv - vec2(1.0); uv += normal(uvn, iTime);fragColor = texture2D(iChannel0, uv); }

總結

以上是生活随笔為你收集整理的OpenGL水波纹效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。