OpenGL ES 2.0着色器-多边形中的2D径向渐变 [英] OpenGL ES 2.0 Shader - 2D Radial Gradient in Polygon

问题描述

我正在尝试在多边形内部绘制径向渐变.我的舞台是600x320.我可以绘制渐变，但是它会变形/拉伸".目标是像光一样产生渐变.

I am trying to paint a radial gradient inside a Polygon. My Stage is 600x320. I am able to draw a gradient but it`s 'distorted/streched'. The goal is a gradient like a light would produce.

u_lightPosition作为相对值:{0.5, 0.5}.
当前未使用的lightPositionAbsolute作为绝对值 {300.0, 160.0}传递.

u_lightPosition is passed as a relative value: {0.5, 0.5}.
Currently unused lightPositionAbsolute is passed in as absolute value {300.0, 160.0}.

我的片段着色器当前如下所示:

My fragment-shader currently looks like this:

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

使用圆形多边形可以得到:

With a circle Polygon this results in:

推荐答案

好吧，我发现现在可以正常工作的解决方案非常安静.我使用相对值而不是绝对值来进行拉伸.着色器现在看起来像这样:

Ok i found the solution which now that it works is quiet obvious. I worked with relative values opposed to absolute ones which resulted in the stretching. The shader now looks like this:

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

这篇关于OpenGL ES 2.0着色器-多边形中的2D径向渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！