Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use OpenGL Shader to achieve rainbow stripe effect, I hope you will gain something after reading this article, let's discuss it together!

Preface

It's interesting to find the Rainbow filter in colorow, an image processing software.

In the OpenGL Shader series update to now try to use the accumulated knowledge points to achieve the effect.

Review

You have previously used the built-in function smoothstep to achieve a numerical transition effect. As shown in the following code, the black and white boundaries are divided at coordinate 0.5.

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

It is known that the function smoothstep can be used to do the segmentation effect.

The rgb color value effect is achieved in 0.minute 0.2,0.05 and 0.15 respectively. The following code uses if-else to determine the coordinates.

Void main () {vec2 uv = gl_FragCoord.xy / iResolution.xy; vec3 color = vec3 (0.); float glow1 = 1.-smoothstep (0. 2pr. X); float glow2 = uv.x > 0. 05? 1.-smoothstep (0. 05 smoothstep.): 0. 0; float glow3 = uv.x > 0. 15? 1.-smoothstep (0. 15. Color + = vec3 (glow1,0.,0.) + vec3 (0.) vec3 (0.); gl_FragColor = vec4 (color * 0. 5);}

Because the uv.x value is linear, it is not natural to render the results. You can enhance the transition effect by using sin or 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运用还能实现彩虹扭曲效果。 水平

Diagonal line

Twist

After reading this article, I believe you have a certain understanding of "how to use OpenGL Shader to achieve rainbow stripe effect". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.