着色器上的辉光似乎是错位的

Question

我想要一个渐变圆圈，中间有一个发光。使用我的代码中使用的方法。但是出了点问题。中间的发光部分没有完全居中。发光下方的底部比顶部大。检查油漆上的像素，以确保它不是一种视错觉 见图：

ASP.NET MVC “Ajax.BeginForm” executes OnSuccess even though model is not valid

为什么会这样？

代码：

componentIndex

Answer 1

您必须先进行平移，以便原点位于视口的中心。之后，您必须应用宽高比：

precision mediump float;

varying vec2 vertPos;
varying vec4 vertColor;
uniform vec2 u_resolution;

void main()
{
    vec2 c = gl_FragCoord.xy/u_resolution.xy;
    c = vec2(0.5, 0.5) - c;
    c.x *= u_resolution.x/u_resolution.y;

    float d = smoothstep(0.0, 1.572, 0.336 - length(c.xy));
    float glowsize = 30.712;
    gl_FragColor = vec4( vec3(/*0., .0,*/ d), 1.) * glowsize ;
}

请注意，如果纵横比为1/2并且vec2 c = vec2(0.5,0.5)（这是视图中心的片段），则结果为：

c = (0.5, 0.5)

c' = (0.5, 0.5) - c * (1.0/2.0, 1.0) 
c' = (0.25, 0.0)

如果您先翻译并在此之后乘以宽高比，则结果为：

c = (0.5, 0.5)

c' = [(0.5, 0.5) - c] * (1.0/2.0, 1.0) 
c' = (0.0, 0.0)

的更新：

使用以下着色器，您可以看到结果完全居中：

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

void main() {
    vec2 c = gl_FragCoord.xy/u_resolution.xy;
    c = vec2(0.5, 0.5) - c;
    c.x *= u_resolution.x/u_resolution.y;

    float d = smoothstep(0.0, 1.572, 0.336 - length(c.xy));
    float glowsize = 30.712;

    float dia = step(abs(abs(c.x)-abs(c.y)),0.005);
    gl_FragColor = vec4( mix( vec3(0.0, 0.0, d) * glowsize, vec3(1.0,1.0,0.0), dia), 1.0);
}

预览：