跟我一起学glsl编程08 - 缩放圆形

缩放圆形

• 示例代码

// 宏操作，判断运行的环境是否是基于OpenGL ES
#ifdef GL_ES
// 制定着色器的计算精度，主要包括lowp:低精度，mediump:中精度,highp:高精度
precision mediump float;
#endif
// 宏结束

// 定义统一变量 u_resolution，{x:画布的宽，y:画布的高}，外部传入，在顶点着色器与片元着色器中都可以访问到
uniform vec2 u_resolution;
uniform float u_time;

/**
* 定义绘制圆的方法
* @params {vec2} position 像素点的位置
* @params {float} radius  半径
* 返回值 float 0 或者 1
*/
float circleshape(vec2 position, float radius){
   // 第二个参数小于或等于第一个参数返回 0，否则返回 1
   return step(radius, length(position - vec2(0.5)));
}

// @params {vec2} scale 表示xy方向的缩放
mat2 scale(vec2 scale){
   //使用缩放矩阵
   return mat2(scale.x, 0.0, 0.0, scale.y);
}

// 类似于C语言， 程序启动的主方法
void main(){
   // gl_FragCoord内部变量,获取屏幕点的位置, position得到的就是[0,1]之间的屏幕位置
   vec2 position = gl_FragCoord.xy / u_resolution;

   // 定义一个颜色
   vec3 color = vec3(0.0);
    position-=vec2(0.5);
    position += scale(vec2(sin(u_time)+2.0)) * position;
    position+=vec2(0.5);
   // 通过函数返回position位置对于的值是0 还是 1
   float circle = circleshape(position,0.3);
    
    // 将获得圆的值作为颜色值
    color = vec3(circle);

    // gl_FragColor 系统变量，获得最终像素点的颜色  
    gl_FragColor = vec4(color,1.0);
}

• 代码效果

  圆的位置发生了向左，向上的偏移