材质着色器两种颜色之间的平滑渐变

Question

我在threeJS中的自定义材质着色器中使用了以下着色器并应用于元球。每个元球的位置（在此示例中为2）将传递给数组allPos，并将它们与顶点法线进行距离比较以找到最接近的元素。其索引用于指定颜色blobColor，然后将其传递给片段着色器。

顶点着色器

uniform vec3 colChoice[2];
varying vec3 vNormal;
varying vec3 blobColor;
varying vec3 otherColor;
uniform vec3 allPos[2];
varying float mixScale;

void main() {
   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
   vNormal = normalize( normalMatrix * normal );
   float prevdist = 1000000000000000000000000000000.0;

   for(int i=0;i<2;i++){
      float distV = distance(allPos[i],normal.xyz);
      if(distV<prevdist){
         prevdist = distV;
         mixScale = distV;
         blobColor = colChoice[i];
         otherColor = colChoice[i-1];
      }
   }
   gl_Position = projectionMatrix * mvPosition;
}

片段着色器

"varying vec3 blobColor;",
"varying vec3 otherColor;",
"varying vec3 vNormal;",
"varying float mixScale;",

void main() {
    finalColor = (0.45*vNormal) + mix(otherColor,blobColor,mixScale);
    gl_FragColor = vec4( finalColor, 1.0 );
}

给我这样的东西：

现在有点粗糙，我想在它们之间应用点渐变 两种颜色。有什么建议吗？