画中心圆

Question

我试图弄清楚如何使用片段着色器绘制居中的圆圈。我不太明白如何做到这一点。这是我到目前为止所得到的，但结果是白屏。

我希望能够绘制任何尺寸，并能够随意改变偏移（移动圆圈）。

void main()
{
    float radius        = 10.0;

    float viewWidth     = 340.0;
    float viewHeight    = 500.0;

    float offsetX       = viewWidth  / 2.0;
    float offsetY       = viewHeight / 2.0;

    float factorX       = viewWidth  / ( 360.0 / 6.3 );
    float factorY       = viewHeight / ( 360.0 / 6.3 );

    float angleX        = gl_FragCoord.x / factorX;
    float angleY        = gl_FragCoord.y / factorY;

    float x             = offsetX + ( sin( angleX ) * radius );
    float y             = offsetY + ( cos( angleY ) * radius );
    float c             = x + y;

    gl_FragColor = vec4( c, c, c, 1.0 );
}         

Answer 1

请记住，此程序针对每个单独的片段单独运行。每个人只需要决定它是否进入或离开圆圈。这里不需要使用sin和cos，只需测量距视口中心的距离，以查看片段是否在圆圈中。

这是一张更简单的光盘：http://glslsandbox.com/e#28997.0

uniform vec2 resolution;

void main( void ) {

    vec2 position = ( gl_FragCoord.xy / resolution.xy ) - 0.5;
    position.x *= resolution.x / resolution.y;

    float circle = 1.0 - smoothstep(0.2, 0.21, length(position));

    gl_FragColor = vec4( vec3( circle ), 1.0 );

}

这是一个圆圈，通过稍微调整光盘来制作：http://glslsandbox.com/e#28997.1

uniform vec2 resolution;

void main( void ) {

    vec2 position = ( gl_FragCoord.xy / resolution.xy ) - 0.5;
    position.x *= resolution.x / resolution.y;

    float circle = 1.0 - smoothstep(0.003, 0.005, abs(length(position) - 0.2));

    gl_FragColor = vec4( vec3( circle ), 1.0 );

}