Android 如何在片段着色器中将径向渐变覆盖在线性渐变上？

我被碎片着色器卡住了。我设法显示了从上到下的线性渐变（cp.左图）。目标是将径向白色渐变叠加到该线性渐变上（如左图中的黑色虚线所示=>右图说明了目标）

我知道我必须以某种方式组合x和y坐标，但到目前为止所有的试验都失败了——我认为我的数学太差了：-/我也没有想出如何混合蓝色以获得白色阴影

有人能给我一个提示吗

这是作为结果给出左侧图像的当前着色器（取决于颜色）：

---

以下是一些代码，它们可以满足您的需要：

// Precision
precision highp float;
// Uniforms
uniform vec2 uResolution;
// Colors
uniform vec3 uColor1;
uniform vec3 uColor2;

// parameters of the radial gradient
uniform vec2  uRadialFxCenter; // this should be in [0-1], so normalized screen coords
uniform float uRadialFxRadius; // this should be in [0-1], so normalized screen coords
uniform vec3 uRadialFxColor;    // should be white
uniform float uRadialFxOpacity; // between [0-1]

void main(void) {
    vec2 position = gl_FragCoord.xy/uResolution;
    vec3 color = vec3(uColor2.x+(uColor1.x-uColor2.x)*position.y, 
                      uColor2.y+(uColor1.y-uColor2.y)*position.y, 
                      uColor2.z+(uColor1.z-uColor2.z)*position.y);

    // compute radial fx opacity => alpha
    vec2 posToRadialFxCenter = uRadialFxCenter - position;
    float distToCenterNormalized = min((length(posToRadialFxCenter)/uRadialFxRadius), 1.0);
    float alpha = (1.0-distToCenterNormalized) * uRadialFxOpacity;

    // alpha blending radialFxColor / color 
    color = color * (1.0-alpha) + uRadialFxColor * alpha;

    //
    gl_FragColor = vec4(color.x, color.y, color.z, 1.);
}

您还可以通过添加以下内容来控制径向渐变淡入的“坡度”：

distToCenterNormalized = pow(distToCenterNormalized, slope);

---

哇-非常非常感谢你！我没想到会有一个完整的解决方案：-D太棒了-你的代码运行得完美无缺！！！这正是我需要的。很高兴知道这一点！如果你需要更多的“数学”解释，我很乐意帮助你，只要告诉我你不理解的地方。谢谢你的提议。目前没有更多的数学问题，我仍在试验你的非常酷的着色器：-）但我看到你是一名OpenGL ES专家-也许你可以帮助我解决另一个我正在解决的OpenGL问题：

distToCenterNormalized = pow(distToCenterNormalized, slope);