Two.js webgl слишком медленный для многих объектов

Question

Я использую Two.js + Vue.js для отображения svg в webgl для оптимизации его рендеринга, но функция рендеринга занимает больше времени, чем вызов svg через Vue

Я пытался использовать Pixi, но это не таку него есть округление по путям

У двух это есть, но в режиме webgl из-за обилия объектов, которые он рисует в течение длительного времени, а также имеет ограничения для клипа

var two = new Two({
  type: Two.Types.webgl,
  width: 1024,
  height: 1024
})

var morph = (first, second, range) => {
  return first + (second - first) * range
}

var animate = () => {

  // elem getting from code

  // anchors1 and anchors2 are arrays for interpolation with content [{ anchors: ..., x: ..., y: ... }, ...]

  var verts = elem.vertices;

  for (var i = 0, len = verts.length; i < len; i++) {
    v = verts[i];

    v.x += morph(anchors1[i].x, anchors2[i].x, range) - v.x;
    v.y += morph(anchors1[i].y, anchors2[i].y, range) - v.y;

    c1 = anchors1[i].controls;
    c2 = anchors2[i].controls;

    v.controls.left.x += morph(c1.left.x, c2.left.x, range) - v.controls.left.x;
    v.controls.left.y += morph(c1.left.y, c2.left.y, range) - v.controls.left.y;

    v.controls.right.x += morph(c1.right.x, c2.right.x, range) - v.controls.right.x;
    v.controls.right.y += morph(c1.right.y, c2.right.y, range) - v.controls.right.y;
  }
}

// Maximum canvas size ~800px

two.appendTo(document.getElementById("testCanvas"));
two.bind('update', animate).play();

Vue.js(не смотрите на большие функции (анимация, волосы и т. д.), это исправлено)

Two.js