如何在片段着色器內的線性漸變上疊加徑向漸變？

Question

我被卡住了片段着色器。我設法從上到下顯示一個線性漸變（cp。左圖）。目標是將徑向白色漸變疊加到此線性漸變上（如左圖所示的黑色虛線=>右圖所示爲目標）。

我知道我必須以某種方式組合x和y座標，但是迄今爲止所有的試驗都失敗了 - 我覺得數學太糟糕了 - /我也沒有想出如何混合藍色以實現白色陰影。

有人能幫我一個提示嗎？

這是當前着色器，讓左圖像結果（取決於顏色的制服）：

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

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); 
    gl_FragColor = vec4(color.x, color.y, color.z, 1.); 
} 

Answer 1

下面是一些代碼，應該做你需要的東西：

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