绘制变形网格框
- 示例代码一
闪烁的横线条
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
void main(){
vec2 coord = gl_FragCoord.xy * 1.0 - u_resolution;
vec3 color = vec3(0.0);
color += sin(coord.y) - cos(u_time);
gl_FragColor = vec4(color, 1.0);
}
-代码效果
- 示例代码二
我们让格子变得更宽一些，加入参数20.0
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
void main(){
vec2 coord = gl_FragCoord.xy * 1.0 - u_resolution;
vec3 color = vec3(0.0);
color += sin(coord.y / 20.0) - cos(u_time);
gl_FragColor = vec4(color, 1.0);
}
- 代码效果
这里只是截图，真正的效果需要你自己运行代码来看，是有动画的
- 示例代码三
加入x方向的线条
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
void main(){
vec2 coord = gl_FragCoord.xy * 1.0 - u_resolution;
vec3 color = vec3(0.0);
color += cos(coord.x) + sin(coord.y / 20.0) - cos(u_time);
gl_FragColor = vec4(color, 1.0);
}
- 代码效果
- 示例代码四
同样加入参数 20.0
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
void main(){
vec2 coord = gl_FragCoord.xy * 1.0 - u_resolution;
vec3 color = vec3(0.0);
color += cos(coord.x / 20.0) + sin(coord.y / 20.0) - cos(u_time);
gl_FragColor = vec4(color, 1.0);
}
- 代码效果
- 示例代码五
通过abs内部方法，矫正颜色值
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
void main(){
vec2 coord = gl_FragCoord.xy * 1.0 - u_resolution;
vec3 color = vec3(0.0);
color += abs(cos(coord.x / 20.0) + sin(coord.y / 20.0) - cos(u_time));
gl_FragColor = vec4(color, 1.0);
}
- 代码效果
最终的效果
《跟我一起学glsl编程》期待你的关注与点赞
