two.js webgl对于许多对象来说太慢了

Question

我使用Two.js + Vue.js在webgl中显示我的svg以优化其渲染，但是渲染功能比通过Vue调用svg花费的时间更长

我尝试使用Pixi，但是路径上没有四舍五入

Two具有此功能，但在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