在 THREEJS 中以 60FPS 显示 25000 行答案

【问题标题】：Display 25000 lines at 60FPS in THREEJS在 THREEJS 中以 60FPS 显示 25000 行
【发布时间】：2017-09-06 15:46:38
【问题描述】：

我在 THREEJS 中显示 25000 行，性能很差。 (

我遵循“最简单”的方法，每条线创建 1 个网格并将其添加到场景中：

  // trks is an array that contains 25000 geometries
  var trks = ...;

  var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });

  for(var i = 0; i<trks.length; i++) {
    var line = new THREE.Line( trks[i].geometry, material);
    scene.add( line );
  }

我生成常规几何图形（与缓冲区几何图形相比）：

var geometry = new THREE.Geometry();
...
// push n vertices
geometry.vertices.push(new THREE.Vector3(track.points[k][0], track.points[k][1], track.points[k][2]));
...
// push n colors
geometry.colors.push(new THREE.Color(diff[0], diff[1], diff[2]));

直播 JSFiddle：http://jsfiddle.net/16fnyb8k/34/

几何创建：https://github.com/FNNDSC/ami/blob/dev/src/loaders/loaders.trk.js#L328-L408

我应该以某种方式将所有几何图形合并在一起吗？改用缓冲区几何形状（这会对性能产生任何影响）吗？两者都有？

=== 更新 ===

我用 N BufferGeometries 做了一个虚拟测试，但它似乎并没有真正产生任何影响：

  for(var i = 0; i<trks.length; i++) {

    // create buffer geometry per track
    var bufferGeometry = new THREE.BufferGeometry();
    var vertices = [];
    for(var j=0; j<trks[i].geometry.vertices.length; j++) {
      vertices.push(trks[i].geometry.vertices[j].x);
      vertices.push(trks[i].geometry.vertices[j].y);
      vertices.push(trks[i].geometry.vertices[j].z);
     }
     var fvertices = new Float32Array(vertices);
     bufferGeometry.addAttribute( 'position', new THREE.BufferAttribute( fvertices, 3 ) );

    // create mesh
    var line = new THREE.Line( bufferGeometry, material);
    line.applyMatrix(series[0].stack[0].ijk2LPS);
    scene.add( line );
  }

现场小提琴：http://jsfiddle.net/16fnyb8k/51/

=== 更新 2 ===

使用缓冲区几何图形并将所有线条合并在一起使其更加平滑，但现在所有线条都已连接：

var bufferGeometry = new THREE.BufferGeometry();
var vertices = [];
var colors = [];

for(var i = 0; i<trks.length; i++) {

  for(var j=0; j<trks[i].geometry.vertices.length; j++) {

    vertices.push(trks[i].geometry.vertices[j].x);
    vertices.push(trks[i].geometry.vertices[j].y);
    vertices.push(trks[i].geometry.vertices[j].z);

    colors.push(trks[i].geometry.colors[j].r);
    colors.push(trks[i].geometry.colors[j].g);
    colors.push(trks[i].geometry.colors[j].b);

  }

}

var fvertices = new Float32Array(vertices);
var fcolors = new Float32Array(colors);
bufferGeometry.addAttribute( 'position', new THREE.BufferAttribute( fvertices, 3 ) );
bufferGeometry.addAttribute( 'color', new THREE.BufferAttribute( fcolors, 3 ) );

var line = new THREE.Line( bufferGeometry, material);
line.applyMatrix(series[0].stack[0].ijk2LPS);
scene.add( line );

JS 小提琴：http://jsfiddle.net/16fnyb8k/59/

谢谢

【问题讨论】：

查看THREE.InstancedBufferGeometry
感谢@pailhead 的建议，但不幸的是它似乎没有影响（请参阅编辑） - FPS 仍然非常低
其实已经更好了，但我希望能有更多的收获
你按照我的建议做了 7 分钟？
@duhaime 要发布/接受您自己的答案，您必须等待几天 - 所以我忘了它

标签： performance three.js line buffer-geometry

【解决方案1】：

从缓冲区几何体创建线段。

现场演示：http://jsfiddle.net/16fnyb8k/61/

var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
var bufferGeometry = new THREE.BufferGeometry();

var vertices = [];
var colors = [];

for(var i = 0; i<trks.length; i++) {
  for(var j=0; j<trks[i].geometry.vertices.length; j++) {

    vertices.push(trks[i].geometry.vertices[j].x);
    vertices.push(trks[i].geometry.vertices[j].y);
    vertices.push(trks[i].geometry.vertices[j].z);

    colors.push(trks[i].geometry.colors[j].r);
    colors.push(trks[i].geometry.colors[j].g);
    colors.push(trks[i].geometry.colors[j].b);

    if(j > 0 && j<trks[i].geometry.vertices.length - 1) {
      vertices.push(trks[i].geometry.vertices[j].x);
      vertices.push(trks[i].geometry.vertices[j].y);
      vertices.push(trks[i].geometry.vertices[j].z);

      colors.push(trks[i].geometry.colors[j].r);
      colors.push(trks[i].geometry.colors[j].g);
      colors.push(trks[i].geometry.colors[j].b);
    }
  }

}

var fvertices = new Float32Array(vertices);
var fcolors = new Float32Array(colors);
// itemSize = 3 because there are 3 values (components) per vertex
bufferGeometry.addAttribute( 'position', new THREE.BufferAttribute( fvertices, 3 ) );
bufferGeometry.addAttribute( 'color', new THREE.BufferAttribute( fcolors, 3 ) );
var line = new THREE.LineSegments( bufferGeometry, material);
line.applyMatrix(series[0].stack[0].ijk2LPS);
scene.add( line );

【讨论】：