shader 案例学习笔记之fract函数

fract函数

• 可以理解为模1取余，获取一个数的小数部分，如果参数是向量，那就是获取每个向量分量上的小数

案例一

• 
  #ifdef GL_ES
  precision mediump float;
  #endif// 渲染分辨率
  uniform vec2 u_resolution;
  // 程序运行时间
  uniform float u_time;void main(){vec2 st = gl_FragCoord.xy/u_resolution;st *= 3.0;st = fract(st);gl_FragColor = vec4(vec3(st,0.5),1.0);
  }

•  vec2 st = gl_FragCoord.xy/u_resolution;
  • 坐标归一化 
• st *= 3.0;
  • 将坐标空间放大三倍
• st = fract(st);
  • 取小数部分，将创建3*3的重复网格
•  gl_FragColor = vec4(vec3(st,0.5),1.0);
  • 设置最终的片段颜色，处理后的st.x赋值给颜色红色通道，st.y赋值给颜色的绿色通道，0.5赋值给蓝色通道
• 

案例

• #ifdef GL_ES
  precision mediump float;
  #endifuniform vec2 u_resolution;
  uniform float u_time;void main(){vec2 st = gl_FragCoord.xy/u_resolution;st *= 3.0;st = fract(st);st -= 0.5;float r = length(st);float color = smoothstep(0.1,0.2 ,r );gl_FragColor = vec4(vec3(color),1.0);
  }

•  st -= 0.5;
  • 将3*3的网格的每个网格的坐标往中心坐标移动；
• float r=length(st);
  • 获取二维向量st到原点的距离
• float color = smoothstep(0.1,0.2 ,r );
  • 利用smoothstep函数进行颜色插值
    • 如果某个片元到原点的距离小于0.1，返回0
    • 如果某个片元到原点的距离大于0.2，返回1
    • 如果距离大于等于0.1，小于等于0.2，则在0-1进行颜色插值，实现平滑过度；
•