OpenGL新手求助：如何用片段着色器实现带颜色热点的渐变效果

嘿，很高兴看到你已经搞定了两色线性渐变，这可是个很棒的起点！你说的这种“多硬编码颜色源的渐变”，核心其实是多源颜色插值，混合径向渐变是其中一种可行思路，但不是唯一的，甚至不是最灵活的。下面给你拆解几种适合新手的实现方法：

1. 基于距离的加权混合（最易上手） #

这个逻辑非常直观，完全可以基于你现有的OpenGL基础快速实现：

• 先把所有颜色源的位置和对应颜色硬编码好，比如在GLSL里定义一个数组
• 对每个像素，计算它到每个颜色源的距离
• 给每个颜色源分配一个与距离成反比的权重（比如用平方反比，能让近的颜色源影响更大，过渡更自然）
• 把所有颜色源的颜色乘以各自权重，再归一化（除以所有权重之和），就能得到最终的像素颜色

给你一段简化的GLSL片段着色器示例：

uniform vec2 u_resolution;
// 硬编码颜色源：前两个值是屏幕归一化位置(x,y)，后三个是RGB颜色
const int numSources = 3;
const vec5 sources[numSources] = vec5[](
    vec5(0.2, 0.3, 0.0, 0.5, 1.0),   // 蓝色源
    vec5(0.7, 0.5, 1.0, 1.0, 0.0),   // 黄色源
    vec5(0.4, 0.8, 1.0, 0.0, 0.0)    // 红色源
);

void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution;
    vec3 finalColor = vec3(0.0);
    float totalWeight = 0.0;
    
    for(int i = 0; i < numSources; i++) {
        vec2 sourcePos = sources[i].xy;
        vec3 sourceColor = sources[i].zww; // 提取RGB颜色
        float dist = distance(uv, sourcePos);
        
        // 用平方反比计算权重，加个小值避免除以0
        float weight = 1.0 / (dist * dist + 0.005);
        finalColor += sourceColor * weight;
        totalWeight += weight;
    }
    
    // 归一化权重，防止颜色过饱和
    finalColor /= totalWeight;
    gl_FragColor = vec4(finalColor, 1.0);
}

你还可以给每个颜色源加个影响半径，比如超过半径就把权重设为0，这样能精准控制每个颜色源的作用范围。

2. 混合多个径向渐变（你提到的思路） #

这也是一种可行的方式，本质是把每个颜色源当成一个径向渐变的中心，然后用透明度叠加所有渐变：

• 每个径向渐变的透明度从中心向边缘平滑衰减（可以用smoothstep函数实现自然过渡）
• 依次把每个径向渐变的颜色混合到最终颜色里

这种方式适合你已经熟悉径向渐变实现的情况，视觉效果和加权混合类似，但更偏向“图层叠加”的思路，需要注意叠加顺序或者用预乘alpha避免颜色偏差。

3. 进阶：三角剖分+重心坐标插值（适合不规则分布） #

如果你的颜色源是不规则排列的点，想要更精确的平滑过渡，可以试试这个方法：

• 先在CPU端用Delaunay三角剖分把所有颜色源点分割成三角形网格
• 把每个三角形的顶点位置和颜色传给GPU
• 在着色器里计算当前像素所在三角形的重心坐标，用重心坐标做线性插值得到颜色

这种方式的渐变完全平滑，没有距离加权那种“模糊”的边缘，但实现起来稍微复杂一点，适合需要高精度过渡的场景。

• 新手优先选基于距离的加权混合，代码易写，效果可调，能快速扩展到N个颜色源
• 如果你已经熟悉径向渐变，混合多个径向渐变是快速验证想法的方式
• 追求精准过渡可以研究三角剖分+重心插值

你可以试试调整权重的计算方式（比如加个指数），或者给每个颜色源单独设置影响半径，能调出很多不同的渐变效果哦～

内容的提问来源于stack exchange，提问作者urSus