Tengo un sombreador que dibuja un montón de círculos instanciados, ¡y funciona muy bien! Funciona básicamente dibujando un montón de rectángulos en cada ubicación dada, y luego en el sombreador de fragmentos descarta efectivamente los píxeles que están fuera del radio, y esto dibuja un círculo.

Estoy tratando de actualizar el sombreador ahora para que dibuje círculos "ondulados". Es decir, tener una curva de seno trazando todo el borde exterior del círculo. Pero el problema con el que me estoy topando ahora es que esta curva se recortará fuera de los límites del rectángulo y, como resultado, los bordes se cortarán. Dibujé una imagen (cruda) de lo que creo que está sucediendo:

Como puede ver, hacer un círculo ahuecando un quad funciona bien en el caso fácil. Pero cuando agrega ondas al círculo, partes de este se recortan fuera del espacio de la unidad, lo que hace que esas partes no se representen, por lo que el círculo representado se corta en esas partes. Así es como se ve en mi aplicación (observe que se corta en los bordes superior, inferior, derecho e izquierdo):

Aquí es donde creo que está ocurriendo el clip:

Aquí están mis sombreadores de vértices y fragmentos actuales para dibujar estos círculos ondulados. ¿Hay alguna forma en que pueda modificarlos para evitar que ocurra este recorte? ¿O tal vez hay alguna configuración de WebGL que podría usar para solucionar esto?

Sombreador de vértices:

 in vec2 a_unit; // unit quad in vec4 u_transform; // x, y, r, alpha uniform mat3 u_projection; // camera out float v_tint; out vec2 v_pos; void main() { 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); v_tint = u_transform.w; v_pos = a_unit; }

Sombreador de fragmentos:

 in vec2 v_pos; in float v_tint; uniform vec4 u_color; uniform mat3 u_projection; uniform float u_time; out vec4 outputColor; void main() { vec2 cxy = 2.0 * v_pos - 1.0; // convert to clip space float r = cxy.x * cxy.x + cxy.y * cxy.y; float theta = 3.1415926 - atan(cxy.y, cxy.x) * 10.0; // current angle r += 0.3 * sin(theta); // add waves float delta = fwidth(r); // anti-aliasing float alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r); outputColor = u_color * alpha * vec4(1, 1, 1, v_tint); }