triangle - OpenGL GLSL Shader: Dibuja un círculo en un polígono plano

opengl triangle

Question

Estoy buscando una forma de dibujar algo similar a estas "perillas" con un sombreador GLSL

Solo quiero dibujar los círculos de colores, y mi aplicación no es para un control, sino un medidor de progreso funky. ¿Es posible dibujar círculos (o más específicamente arcos) en un polígono plano simplemente usando un sombreador? ¿Y cómo comenzaría uno el proceso?

Answer 1

Sí, es posible. Establezca las coordenadas de la textura en el polígono para que pueda acceder a las coordenadas relativas en el sombreador (por ejemplo, de -1, -1 a 1,1 hace que el centro del polígono 0,0). En el sombreador de fragmentos calcule la distancia al centro con pythagoran. Si la distancia es menor que el radio del círculo, el píxel está dentro del círculo. Luego puede especificar el radio para dos círculos y colorear el píxel si está dentro del círculo exterior y fuera del círculo interno.

Si desea colorear solo un arco, obtenga el ángulo con atan (y, x) y verifique si se encuentra dentro de un rango determinado.

También puede suavizar los círculos mediante la interpolación (paso, paso suave, etc.) en lugar de un simple si al determinar si el punto está dentro de un círculo.

Además, como optimización, no es necesario calcular la raíz cuadrada al calcular la distancia al centro si, por el contrario, se comprueba el radio de nuevo ^ ^.

Answer 2

Sí, es posible ! Compruebe este script GLSL que dibuja varios arcos diferentes:

#define between(v,x1,x2) (v>= x1 && v<=x2)
#define pi 3.141592653589793238462643383279

uniform sampler2D tex;

void main()
{
    vec2  pnt = vec2(0.5,0.5);
    float dr = 0.005;
    float fr = 0.15;
    float r1 = fr;
    float r2 = 1.5*fr;
    float r3 = 2.0*fr;
    float r4 = 2.5*fr;
    float r5 = 3.0*fr;
    float rp = distance(pnt,gl_TexCoord[0].xy);
    vec4 col1 = vec4(0.4,0.1,0.,1.);
    vec4 col2 = vec4(1.,1.,1.,1.);
    float angle = atan(gl_TexCoord[0].y,gl_TexCoord[0].x);
    vec4 rezcol;
    rezcol = (between(rp,r1-dr,r1+dr) && between(angle,-pi,pi))? col1:col2;
    rezcol = (between(rp,r2-dr,r2+dr) && between(angle,-pi,pi/3.1) && rezcol==col2)? col1:rezcol;
    rezcol = (between(rp,r3-dr,r3+dr) && between(angle,-pi,pi/4.6) && rezcol==col2)? col1:rezcol;
    rezcol = (between(rp,r4-dr,r4+dr) && between(angle,-pi,pi/8.8) && rezcol==col2)? col1:rezcol;
    rezcol = (between(rp,r5-dr,r5+dr) && between(angle,-pi,pi/22.8) && rezcol==col2)? col1:rezcol;
    gl_FragColor = rezcol;
}

que da como resultado tal imagen: