gpt4 book ai didi

android - 如何在 fragment 着色器中将径向渐变叠加在线性渐变上?

转载 作者:行者123 更新时间:2023-11-29 17:32:53 24 4
gpt4 key购买 nike

我被 fragment 着色器困住了。我设法从上到下显示线性渐变(左图)。目标是将径向白色渐变叠加到此线性渐变上(左图中的黑色虚线所示 => 右图说明了目标)。

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

有人可以帮我提示一下吗?

enter image description here

这是给出左图结果的当前着色器(取决于颜色制服):

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

最佳答案

这里有一些代码可以满足您的需要:

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

关于android - 如何在 fragment 着色器中将径向渐变叠加在线性渐变上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31992903/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com