跟我一起学glsl编程18 - 变换的点效果

绘制一个闪烁点的效果

• 示例代码

这个示例中，我们使用了fract 内部函数,作用就是返回小数部分，你可以理解为a-floor(a)的结果，a是一个小数

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

//定义一个随机函数
float random2d(vec2 coord){
    return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
  vec2 coord = gl_FragCoord.xy;

  float rand01 = fract(random2d(floor(coord)));

  gl_FragColor=vec4(rand01, 0.1 ,0.0, 1.0);   
}

• 代码效果

• 示例代码二

在上面的代码基础上，我们让获得屏幕像素点的数据整体乘以0.06,闪烁的点就会变大

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

//定义一个随机函数
float random2d(vec2 coord){
    return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
  vec2 coord = gl_FragCoord.xy * 0.06;

  float rand01 = fract(random2d(floor(coord)));

  gl_FragColor=vec4(rand01, 0.1 ,0.0, 1.0);   
}

• 代码效果

• 示例代码三

在增加一个绿色通道的随机计算

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

//定义一个随机函数
float random2d(vec2 coord){
    return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
  vec2 coord = gl_FragCoord.xy * 0.06;

  float rand01 = fract(random2d(floor(coord)));
  float rand02 = fract(random2d(floor(coord)));

  gl_FragColor=vec4(rand01, rand02 ,0.0, 1.0);   
}

• 代码效果

• 示例代码四

加入u_time计算，会看到红色点，绿色点会随机的在画布中出现

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

//定义一个随机函数
float random2d(vec2 coord){
    return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
  vec2 coord = gl_FragCoord.xy * 0.06;

  float rand01 = fract(random2d(floor(coord)) + u_time / 60.0 );
  float rand02 = fract(random2d(floor(coord)) + u_time / 40.0);

  gl_FragColor=vec4(rand01, rand02 ,0.0, 1.0);   
}

• 代码效果

效果有点差，慢慢的就会让你惊艳起来

• 示例代码五

进一步对coord的位置进行计算

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

//定义一个随机函数
float random2d(vec2 coord){
    return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
  vec2 coord = gl_FragCoord.xy * 0.06;

  coord -= u_time + vec2(sin(coord.y));

  float rand01 = fract(random2d(floor(coord)) + u_time / 60.0 );
  float rand02 = fract(random2d(floor(coord)) + u_time / 40.0);

  gl_FragColor=vec4(rand01, rand02 ,0.0, 1.0);   
}

-代码效果

• 示例代码六

我们对x方向也做相应的变化

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

//定义一个随机函数
float random2d(vec2 coord){
    return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
  vec2 coord = gl_FragCoord.xy * 0.06;

  coord -= u_time + vec2(sin(coord.y), cos(coord.x));

  float rand01 = fract(random2d(floor(coord)) + u_time / 60.0 );
  float rand02 = fract(random2d(floor(coord)) + u_time / 40.0);

  gl_FragColor=vec4(rand01, rand02 ,0.0, 1.0);   
}

• 代码效果

• 示例代码七

类似于示例六的代码，加入rand01 *= 0.4;

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

//定义一个随机函数
float random2d(vec2 coord){
    return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
  vec2 coord = gl_FragCoord.xy * 0.06;

  coord -= u_time + vec2(sin(coord.y), cos(coord.x));

  float rand01 = fract(random2d(floor(coord)) + u_time / 60.0 );
  float rand02 = fract(random2d(floor(coord)) + u_time / 40.0);

   rand01 *= 0.4;

  gl_FragColor=vec4(rand01, rand02 ,0.0, 1.0);   
}

• 代码效果

• 示例代码八

继续修改rand01,红色看不到了

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

//定义一个随机函数
float random2d(vec2 coord){
    return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
  vec2 coord = gl_FragCoord.xy * 0.06;

  coord -= u_time + vec2(sin(coord.y), cos(coord.x));

  float rand01 = fract(random2d(floor(coord)) + u_time / 60.0 );
  float rand02 = fract(random2d(floor(coord)) + u_time / 40.0);

   rand01 *= 0.4 - length(fract(coord));

  gl_FragColor=vec4(rand01, rand02 ,0.0, 1.0);   
}

• 代码效果

• 示例代码九

我们让两个随机数颜色都乘以 4.0,只修改最后一行

gl_FragColor=vec4(rand01 * 4.0, rand02 * 4.0 ,0.0, 1.0);   

• 代码效果

• 示例代码十

继续修改最后一行代码，神奇的效果出现了

 gl_FragColor=vec4(rand01 * 4.0, rand02 * rand01 * 4.0 ,0.0, 1.0); 

• 代码效果

动画有些颜色失真

• 示例代码十一

完整的最终代码，将上例中的0.06更改为0.01,效果相当酷炫

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

//定义一个随机函数
float random2d(vec2 coord){
    return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
  vec2 coord = gl_FragCoord.xy * 0.01;

  coord -= u_time + vec2(sin(coord.y), cos(coord.x));

  float rand01 = fract(random2d(floor(coord)) + u_time / 60.0 );
  float rand02 = fract(random2d(floor(coord)) + u_time / 40.0);

   rand01 *= 0.4 - length(fract(coord));
   
  gl_FragColor=vec4(rand01 * 4.0, rand02 * rand01 * 4.0 ,0.0, 1.0);   
}

• 代码效果

  

感谢大家的阅读！

跟我一起学glsl编程》期待你的关注与点赞