opengl-es - OpenGL ES 2.0 着色器 - 多边形中的 2D 径向渐变

Question

我正在尝试在多边形内绘制径向渐变。我的舞台是600x320 .我能够绘制渐变，但它“扭曲/拉伸(stretch)”。目标是像灯光一样产生渐变。
u_lightPosition作为 传递相对值(value) : {0.5, 0.5} .
当前未使用 lightPositionAbsolute以 的形式传入绝对值 {300.0, 160.0} .

我的片段着色器目前看起来像这样:

#ifdef GL_ES                            
precision lowp float;                   
#endif                                  
varying vec4 v_fragmentColor;   

uniform vec2 u_lightPosition;
uniform vec2 u_lightPositionAbsolute;
uniform vec4 u_outerColor;
uniform vec4 u_innerColor;
uniform float u_radius;

void main()                             
{
    vec2 resolution = vec2(600,320);
    vec2 position = ( gl_FragCoord.xy / resolution.xy );

    float distanceFromLight = length(position - u_lightPosition);

    gl_FragColor = mix(u_outerColor, u_innerColor, distanceFromLight);
}                                       

使用圆形多边形，这将导致:

Answer 1

好的，我找到了解决方案，现在它的工作原理很明显。我使用相对值而不是绝对值，这导致了拉伸(stretch)。着色器现在看起来像这样:

#ifdef GL_ES                            
precision lowp float;                   
#endif                                  
uniform vec2 u_lightPosition;
uniform float u_radius;

void main()                             
{
    float distance  = length( u_lightPosition - gl_FragCoord.xy );
    float intensity = 1.0 - min( distance, u_radius )/u_radius;

    gl_FragColor = vec4(intensity, intensity, intensity, 1.0);
}                                       

编辑:改变了“光”的衰减:

#ifdef GL_ES                            
precision lowp float;                   
#endif                                  
uniform vec2 u_lightPosition;
uniform float u_radius;

void main()                             
{
    float distance  = length( u_lightPosition - gl_FragCoord.xy );

    float maxDistance = pow( u_radius, 0.23);
    float quadDistance = pow( distance, 0.23);

    float quadIntensity = 1.0 - min( quadDistance, maxDistance )/maxDistance;

    gl_FragColor = vec4(quadIntensity, quadIntensity, quadIntensity, 1.0);
}