Shader 实现彩虹旋涡
字节流动
共 4736字，需浏览 10分钟
· 2023-08-08
绘制彩虹漩涡
示例代码一
先绘制一个螺旋状的图形
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
void main(){
vec2 coord = (gl_FragCoord.xy / u_resolution);
vec3 color = vec3(0.0);
float angle = atan(coord.y + 0.25, coord.x + 0.5) * 0.1;
float len = length(coord - vec2(0.5, 0.25));
color += sin(len * 50.0);
gl_FragColor = vec4(color, 1.0);
}
代码效果
中心点大体在（0.5，0.75)的位置上
示例代码二
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
void main(){
vec2 coord = (gl_FragCoord.xy / u_resolution);
vec3 color = vec3(0.0);
float angle = atan(-coord.y + 0.25, coord.x - 0.5) * 0.1;
float len = length(coord - vec2(0.5, 0.25));
// color += sin(len * 50.0 - angle);
// color += sin(len * 50.0 - angle * 40.0);
color += sin(len * 50.0 - angle * 40.0 + u_time);
gl_FragColor = vec4(color, 1.0);
}
代码效果
加入
color += sin(len * 50.0 - angle);计算，圆圈发生了断裂
继续修改代码
color += sin(len * 50.0 - angle * 40.0);,呈现漩涡的效果
加入
u_time让漩涡动起来color += sin(len * 50.0 - angle * 40.0 + u_time)
示例代码三
加入颜色，提升漩涡效果
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
void main(){
vec2 coord = (gl_FragCoord.xy / u_resolution);
vec3 color = vec3(0.0);
float angle = atan(-coord.y + 0.25, coord.x - 0.5) * 0.1;
float len = length(coord - vec2(0.5, 0.25));
color.r += sin(len * 50.0 - angle * 40.0 + u_time);
color.g += cos(len * 50.0 - angle * 40.0 - u_time);
color.b += sin(len * 50.0 - angle * 40.0 + 6.0);
gl_FragColor = vec4(color, 1.0);
}
代码效果
再加入多绿色的处理color.g += cos(len * 50.0 - angle * 40.0 - u_time);,叠加的效果是
再加入多蓝色的处理
color.b += sin(len * 50.0 - angle * 40.0 + 6.0);
示例代码四 最终酷炫的彩虹漩涡就出来了
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
void main(){
vec2 coord = (gl_FragCoord.xy / u_resolution);
vec3 color = vec3(0.0);
float angle = atan(-coord.y + 0.25, coord.x - 0.5) * 0.1;
float len = length(coord - vec2(0.5, 0.25));
color.r += sin(len * 40.0 - angle * 40.0 + u_time);
color.g += cos(len * 30.0 - angle * 60.0 - u_time);
color.b += sin(len * 50.0 - angle * 50.0 + 6.0);
gl_FragColor = vec4(color, 1.0);
}
代码效果 gif效果有些失真，补充一张Png效果图片
原文链接: https://juejin.cn/post/6844904080779771918
-- END --
进技术交流群，扫码添加我的微信：Byte-Flow
获取相关资料和源码
推荐：
全网最全的 Android 音视频和 OpenGL ES 干货，都在这了
评论