我在鼠标指针周围创建了圆圈，但问题是它在我的电脑中显示完美，当在笔记本电脑中测试时，它不在鼠标指针周围显示

Question

片段代码：

export const fragment = `varying vec2 vUv;
uniform vec2 viewport;
uniform vec2 uMouse;

float createCircle() {
    vec2 viewportUv = gl_FragCoord.xy / viewport;
    float viewportAspect = viewport.x / viewport.y;

    vec2 mousePoint = vec2(uMouse.x, 1.0 - uMouse.y);
    float circleRadius = max(0.0, 100.0 / viewport.x);

    vec2 shapeUv = viewportUv - mousePoint;
    shapeUv /= vec2(1.0, viewportAspect);
    shapeUv += mousePoint;

    // Debug: Output mouse position
    if (length(viewportUv - mousePoint) < 0.01) {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red for mouse position
    }

    // Debug: Output shape UV
    if (length(shapeUv - mousePoint) < 0.01) {
        gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0); // Blue for shape UV
    }

    float dist = distance(shapeUv, mousePoint);
    dist = smoothstep(circleRadius, circleRadius + 0.001, dist);

    return dist;
}

void main() {
    float circle = createCircle();
    float dist = length(gl_PointCoord - vec2(0.5));
    float disc = smoothstep(0.5, 0.45, dist);

    gl_FragColor = vec4(disc * circle); // Final color based on circle distance

    if (disc < 0.01) discard;
}`;

我的电脑视口（1920,932）和笔记本电脑（1280,593）现在当我 vec2 viewportUv = gl_FragCoord.xy / vec2(1920,932) 那样使用时，它在我的笔记本电脑中完美显示圆圈，但在再次调整大小时圆圈不显示事实上，即使当我调整大小时它在电脑上也能正常工作，然后还围绕指针创建圆圈；

我只想完美地围绕鼠标指针创建圆圈，即使我们改变屏幕尺寸或其他设备屏幕

Answer 1

最有可能的是，如果您检查

window.devicePixelRatio

，您最终会得到不同的结果。

视口“不匹配”表示“投影”（视口）的大小对应于画布大小乘以像素比。现在您可能已经猜到了异常情况。

当您调整窗口大小并传递新的视口大小时，它需要对应于窗口大小乘以 PixelRatio，而不仅仅是窗口大小（类似于 sample）。

或者，您可以将渲染器 PixelRatio 设置为 1（文档）。