grid 效果一
- 示例代码一
#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);
color += sin(coord.x * cos(u_time / 30.0) *60.0) + sin(coord.y * cos(u_time /15.0) * 10.0);
gl_FragColor = vec4(color,1.0 );
}
-
代码效果
通过
u_time效果中是包含动画的
grid 效果二
- 示例代码二
// 同示例代码一，调整代码
// 将上面的示例coord.y 更改为coord.x
color += sin(coord.x * cos(u_time / 30.0) *60.0) + sin(coord.x * cos(u_time /15.0) * 10.0);
gl_FragColor = vec4(color,1.0 );
- 代码效果
grid 效果三
- 示例代码三
// 同示例代码二，调整代码
// 将上面的示例coord.x 更改为coord.y
color += sin(coord.y * cos(u_time / 30.0) *60.0) + sin(coord.y * cos(u_time /15.0) * 10.0);
gl_FragColor = vec4(color,1.0 );
- 代码效果
gird 效果四
- 示例代码四
// 同示例代码一，调整代码
// 增加一行color的赋值，将上面的示例coord.x 更改为coord.y，coord.y更改为coord.x
color += sin(coord.x * cos(u_time / 30.0) *60.0) + sin(coord.y * cos(u_time /15.0) * 10.0);
color += sin(coord.y * cos(u_time / 30.0) *60.0) + sin(coord.x * cos(u_time /15.0) * 10.0);
你可以尝试更改以上示例中的各个参数，包括将sin 更改为 cos ,cos 更改为sin ,你会看到不同的惊喜！
