顶点颜色插值伪像

Question

我显示一个“弯曲管”，并根据其与曲线所在平面的距离为其顶点着色。

它在大多数情况下都很好，但是，当我降低显像管的分辨率时，伪像开始出现在显像管颜色中。

这些伪影似乎取决于相机的位置。如果我四处移动相机，有时伪像会消失。不确定是否有意义。

实时演示：http://jsfiddle.net/gz1wu369/15/

我不知道插值中是否确实存在问题，或者仅仅是“屏幕”伪像。

然后，将场景渲染为纹理，并从“顶部”对其进行查看。然后，它看起来像我在另一个着色器中使用的“变形”字段，因此需要连续的颜色。

设置顶点颜色时，我不知道这是预期的行为还是代码中存在问题。

使用THREEJS挤出工具代替管的几何形状可以解决我的问题吗？

const tubeGeo = new THREE.TubeBufferGeometry(closedSpline, steps, radius, curveSegments, false);

const count = tubeGeo.attributes.position.count;
tubeGeo.addAttribute('color', new THREE.BufferAttribute(new Float32Array(count * 3), 3));

const colors = tubeGeo.attributes.color;
const color = new THREE.Color();


 for (let i = 0; i < count; i++) {
  const pp = new THREE.Vector3(
    tubeGeo.attributes.position.array[3 * i],
    tubeGeo.attributes.position.array[3 * i + 1],
    tubeGeo.attributes.position.array[3 * i + 2]);
  const distance = plane.distanceToPoint(pp);
  const normalizedDist = Math.abs(distance) / radius;
  const t2 = Math.floor(i / (curveSegments + 1));
  color.setHSL(0.5 * t2 / steps, .8, .5);
  const green = 1 - Math.cos(Math.asin(Math.abs(normslizedDist)));
  colors.setXYZ(i, color.r, green, 0);
}

采用“法线”材料的低分辨率电子管显示出不同的伪像

高分辨率管隐藏了伪像：