跟我一起学glsl编程04 - 绘制一个矩形

绘制一个矩形

• 示例代码

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

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

/**
* 定义绘制长方形的方法
* @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));
    // 在左上角位置
    // vec2 shaper = vec2(step(scale.x,1.0 - position.x),step(scale.y,position.y));
    // 在左下角位置
    // vec2 shaper = vec2(step(scale.x,1.0 - position.x),step(scale.y,1.0 - position.y));
    // 在右下角位置
    // vec2 shaper = vec2(step(scale.x,position.x),step(scale.y,1.0 - position.y));
    // 在中心位置
    shaper *= vec2(step(scale.x,1. - position.x), step(scale.y, 1.0 - position.y));
    
    return shaper.x * shaper.y;

}

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

    // 定义一个颜色
    vec3 color = vec3(0.0);

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

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

• 代码效果