之前绘制的点都是正方形的,类似一个像素点,那怎么才能把方点绘制成圆点,顶点着色器和片元着色器之间发生了光栅化过程,一个顶点被光栅化为了多个片元,每一个片元都会经过片元着色器处理,直接绘制就是方形的点,要绘制圆形的点就需要把多余的片元给削去;
将矩形削成圆形需要知道每个片元在光栅化过程中的坐标,在片元着色器中通过 **内置变量 gl_FragCoord
**来访问片元的坐标,还可以通过另一个 **内置变量 gl_PointCoord
**来访问片元在绘制的点内的坐标;
变量类型和名称 | 描述 |
---|---|
vec4 gl_FragCoord | 片元的窗口坐标 |
vec4 gl_PointCoord | 片元在被绘制的点内的坐标(0.0, 1.0) |
gl_PointCoord
变量表示当前片元在所属的点内的坐标,坐标值的区间是0.0
到1.0
,因此为了将矩形削成圆形,需要将点的中心(0.5, 0.5)
距离超过以0.5
为半径范围外的片元剔除掉,在片元着色器中可以使用 discard来放弃当前片元
具体剔除片元的代码在片元着色器中实现
片元着色器代码
precision mediump float;
void main(){
// 点的中心坐标
float dist = distance(gl_PointCoord, vec2(0.5, 0.5));
// 如果点的半径小于 0.5 则绘制,大于则放弃当前片元
if(dist < 0.5) {
gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
} else {
discard;//放弃当前片元
}
}
顶点着色器代码
attribute fec4 a_Position;
void main(){
gl_Position = a_Position;// 顶点位置
gl_PointSize = 10.0;// 顶点大小
}
示例效果图
示例链接