シェーダ上の輝きが間違っているようだ

Question

真ん中に輝きを持つグラデーションの円を取得したい。私のコードで使用されているメソッドを使用します。しかし何かが間違っている。真ん中の輝く部分が正確に中央に収まらない。グローの下の底部は上部よりも大きい。ただそれは錯覚 参照イメージではなかったことを確認する塗料上の画素をチェック：

なぜこの出来事はありますか？

コード：

// Author @patriciogv - 2015 
    // http://patriciogonzalezvivo.com 

    #ifdef GL_ES 
    precision mediump float; 
    #endif 

    #define PI 3.14159265359 
    #define TWO_PI 6.28318530718 


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



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

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

    } 

Answer 1

原点がビューポートの中央にあるように、あなたは、最初の変換を行う必要があります。アスペクト比が1/2とvec2 c = vec2(0.5,0.5)は（これはフラグメントそのビューポートの中心である）、そして、あなたの結果がであるかどう、

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 ; 
} 

注：その後、あなたは、アスペクト比を適用する必要があります。

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); 
} 

プレビュー：