How to draw a circle
Draw a circle in a fragment shader without vertices.
article
canvas
data
| Vertice | Index | x | y |
|---|---|---|---|
| 0 | 0 | 0 | 0 |
| 1 | 1 | 512 | 0 |
| 2 | 2 | 0 | 288 |
| 3 | 3 | 0 | 288 |
| 4 | 4 | 512 | 288 |
| 5 | 5 | 512 | 0 |
pixel
r
0
g
0
b
0
a
0
x
0
y
0
Fragment Shader
xxxxxxxxxx1
precision mediump float;2
3
uniform vec2 u_resolution;4
5
6
void main() {7
vec2 uv = gl_FragCoord.xy;8
vec2 center = u_resolution * 0.5;9
10
if (distance(uv, center) < 25.) {11
gl_FragColor = vec4(0.027, 0.988, 0.341, 1.);12
}13
}14
Vertex Shader
xxxxxxxxxx1
precision mediump float;2
3
attribute vec2 a_position;4
uniform vec2 u_resolution;5
6
void main() {7
vec2 pos = a_position / u_resolution * 2.0 - 1.0;8
gl_Position = vec4(pos.x, -pos.y, 0.0, 1.0);9
}10