Vertex цвет артефактов интерполяции

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

Трубки низкого разрешения с материалом "Normals" показывают различные артефакты

Трубка с высоким разрешением скрывает артефакты: