Estoy desarrollando un sombreador que dibuja un círculo en WebGL y parece funcionar, pero no estoy seguro de cómo hacerlo. Aquí está el sombreador de vértices:

 in vec2 a_unit; uniform mat3 u_projection; uniform vec3 u_transform; out vec2 v_pos; void main() { v_pos = a_unit; float r = u_transform.z; float x = u_transform.x - r; float y = u_transform.y - r; float w = r * 2.0; float h = r * 2.0; mat3 world = mat3( w, 0, 0, 0, h, 0, x, y, 1 ); gl_Position = vec4(u_projection * world * vec3(a_unit, 1), 1); }

Y aquí está el sombreador de fragmentos:

 in vec2 v_pos; uniform vec4 u_color; uniform vec3 u_transform; uniform mat3 u_projection; out vec4 outputColor; void main() { vec2 dist = v_pos - 0.5; if (dist.x * dist.x + dist.y * dist.y > .222) { discard; } outputColor = u_color; }

Paso al sombreador una matriz u_projection , que es solo mi cámara. Y también paso un vector u_transform , que son solo las coordenadas mundiales (y el radio mundial) de mi círculo.

Entonces, por ejemplo, u_transform podría ser algo como (200, 300, 25) para dibujar un círculo en x: 200 , y: 300 , con radius: 25

Ah, y a_unit es solo un cuádruple de unidades:

 [ 0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1, ]

La lógica es que solo dibujo un rectángulo y luego lo recorte descartando cualquier cosa que no esté dentro del radio. Y así se dibuja un círculo.

Mi confusión radica en esta línea:

 if (dist.x * dist.x + dist.y * dist.y > .222) { discard; }

Se me ocurrió el valor 0.222 simplemente adivinando y comprobando una y otra vez. Aunque no entiendo cómo funciona. ¿Por qué este número mágico es capaz de dibujar un círculo?

Pensé que necesitaría convertir el radius en coordenadas de textura, pero no parece que sea necesario. Pero no estoy seguro de por qué...

¿Por qué funciona esto para dibujar un círculo con un radio arbitrario? Y cuál es el valor adecuado, porque 0.222 , aunque está cerca, no es el valor exacto. ¿Cuál es el valor adecuado que debería usar en lugar de 0.222 aquí?