跟我一起学glsl编程05 - 绘制一个多边形

绘制一个多边形

• 示例代码

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

// 定义一个常量
const float PI  = 3.1415926535;

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

/**
* 定义绘制多边形的方法
* @params {vec2} position 像素点的位置
* @params {float} radius  半径
* @params {float}  边数
* 返回值 float 0 或者 1
*/
float polygonshape(vec2 position, float radius, float sides){
   position = position * 2.0 - 1.0;
   // atan的取值范围是[-pi/2,pi/2]
   float angle = atan(position.x, position.y);
   // 每一份的弧度
   float slice = PI * 2.0 / sides;
   // floor 向下取整,floor(0.5 + angle / slice)返回的结果是[0,2]
   // length计算模长
   return step(radius, cos(floor(0.5 + angle / slice) * slice - angle) * length(position));
}


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

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

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

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

• 代码效果