跟我一起学glsl编程07 - 旋转的方块

旋转的方块

• 示例代码

// 宏操作，判断运行的环境是否是基于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 {vec2} scale     缩放比例 
* 返回值 float 0 或者 1
*/
float rectshape(vec2 position, vec2 scale){
   scale = vec2(0.5) - scale * 0.5;
    vec2 shaper = vec2(step(scale.x,position.x),step(scale.y,position.y));
   shaper *= vec2(step(scale.x,1. - position.x), step(scale.y, 1.0 - position.y)); 
   return shaper.x * shaper.y;

}

mat2 rotate(float angle){
   return mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
}

// 类似于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 *= rotate(u_time);
   position+=vec2(0.5);

   // 通过函数返回position位置对于的值是0 还是 1
   float rectangle = rectshape(position,vec2(0.3));
   
    
    // 将获得长方形的值作为颜色值
    color = vec3(rectangle);

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

• 代码效果

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