WebGL - 如何使用基于每个点的得分值的颜色插值在片段着色器中绘制点？

Question

我在2d坐标中有几个点，每个点都有一个分数。我想在着色器上绘制点，并且点的颜色应该都是红色，但重量需要基于分数。

它应该是这样的，例如，左上角得分为0.8，右上角和左下角得分为0.9，右下角得分为0.7。

（不能在这里粘贴一些图像道歉。这是我的第一个问题，我没有足够的声誉....）

https://jsfiddle.net/p19uc825/

我现在的公式是计算每个点的中心和2d坐标之间的距离。下面是我用来获取每个位置颜色的方法。

我的坐标：

const coordinates = [
    0.2,0.8,
    0.2,0.2,
    0.8,0.8,
    0.8,0.2,
];  

成绩：

const scores = [
    0.8,0.9,0.9,0.7
];  

片段着色器源的一部分：

vec3 get_pos_color(in vec2 st, in vec2 normalizedPosition, in float score)
{               
    float mult = 1.4;
    float pct = 0.0;
    pct = ( 
         distance(
             vec3(normalizedPosition.x, normalizedPosition.y, score), 
             vec3(st.x,st.y,score)
         ) * mult - score);

    vec3 color = vec3(pct, pct, pct) + vec3(1,1,1);
    return color;
}    

这适用于4个坐标，如上面jsfiddle所示。

但是，如果我用坐标[0.8,0.5]添加另一个点，并将其分配给0.1，它看起来像这样 -

https://jsfiddle.net/nqy3az1b/

似乎新点的重量比那两个0.9点更重，而它应该具有非常浅的颜色，因为这个新点的得分最低。我认为有两个原因 - 1.当着色器插入这个新点时，它会考虑靠近它的2个点，右上角和右下角。 2.新点可能会添加更多的权重，因为它最接近中心，因为在上面的片段着色器代码中，我正在计算点和中心之间的距离。

我真正想要实现的是，每个点的颜色权重仅由分数决定，无论其位置如何。

我知道片段源中的距离（）不是用于内插像素的正确公式，因此对我可以尝试的任何建议都将非常感激。