2017-11-22 11 views
1

중간에 광선이있는 그라디언트 원을 얻고 싶습니다. 내 코드에 사용 된 방법을 사용합니다. 그러나 뭔가 잘못되고 있습니다. 가운데에 빛나는 부분이 정확히 가운데에 있지 않습니다. 광선 아래 부분은 상단 부분보다 큽니다.쉐이더의 광선이 잘못 배치 된 것 같습니다.

왜 이런 일이 : 페인트의 픽셀은 그것은 착시 참조 이미지 아니었다 확인하기 위해 검사?

코드 :

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

    } 

답변

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

미리보기 : 답장을 보내

enter image description here

+0

감사합니다! 그러나 문제는 여전히 동일하게 유지되며 하단 부분은 더 크다 – RomeoTheWizard

+0

@RomeoTheWizard 캔버스 전체에 뷰포트가 있으며 뷰포트 전체에 그립니 까? gl_FragColor = vec4 (1.0, 0.0, 0.0, 1.0);을 할 경우 모두 빨간색으로 칠해집니다. – Rabbid76

+0

예 모두 빨간색으로 그려져 있습니다. – RomeoTheWizard