GLSL 中的圆被绘制在错误的位置

Question

所以，我在 glsl 中有一个应该围绕鼠标绘制的圆圈。生成的圆绘制在错误的位置。

我画圆的步长是距离st的距离和统一鼠标的vector2。

我不知道为什么会这样。

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;
    float pct = 0.0;
    vec2 brightness = vec2(0.0);
    
    pct = step(distance(st,vec2(u_mouse/100.0)),0.5);

    vec3 color = vec3(0.);
    color = vec3(pct);
    
    brightness = vec2(1.0);

    gl_FragColor = vec4(color,brightness);
}

    #ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;
    float pct = 0.0;
    vec2 brightness = vec2(0.0);
    
    pct = step(distance(st,vec2(u_mouse/100.0)),0.5);

    vec3 color = vec3(0.);
    color = vec3(pct);
    
    brightness = vec2(1.0);

    gl_FragColor = vec4(color,brightness);
}

Answer 1

代码是否被意外复制？我会检查您是否传递了您期望的鼠标和分辨率值，并考虑您的 window 是否全屏。

Answer 2

这是一个使用 Shadertoy 的示例，可以轻松地适应您的 OpenGL/GLSL 代码。

该代码来自 Shadertoy 上关于如何围绕屏幕中心绘制圆的基本 2D 教程，方法是根据像素是否位于距屏幕中心的给定笛卡尔距离（即半径）内为像素着色。中心。然后修改为围绕鼠标指针绘制圆圈：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2  m  = (iMouse.xy / iResolution.xy);
    vec2  uv = (fragCoord.xy / iResolution.xy);
    uv.x *= iResolution.x/iResolution.y;
    m.x *= iResolution.x/iResolution.y;
    float radius = 0.25;
    
    vec3 pixel;
    if( (uv.x-m.x)*(uv.x-m.x) + (uv.y-m.y)*(uv.y-m.y) < radius*radius ) {
        pixel = vec3(0.3, 0.3, 1.0);
    } else {
        pixel = vec3(1.0, 0.3, 0.2);   
    }

    fragColor = vec4(pixel, 1.0);
}

演示：

GLSL 中的圆被绘制在错误的位置

Circle in GLSL is being drawn in the wrong location

opengl

shader

glsl

shapes

fragment-shader