performance - 最小化 Three.js 绘制的次数

Question

我正在为我的项目 ( http://agentscript.org ) 测试 Three.js 的使用，第一个测试似乎很慢:

https://asx-vqnhxlahpe.now.sh/test.html?three0

(注意:该站点可能需要一段时间，它会在一段时间不使用后“休眠”)

这显然是由于我使用了太多的平局，每个代理一个。
renderer.info.render
Object {calls: 10002, vertices: 60090, faces: 20000, points: 0}

我相信使用 BufferGeometry 可以解决这个问题，但我不知道如何使用一个并且仍然能够访问每个单独的代理，以便我的 step/animate 函数可以修改(移动、旋转)它们。

我该怎么做？

我意识到我可以简单地使用我自己的着色器，并计划这样做，但我更喜欢先有一个或两个中间解决方案。

Answer 1

您希望减少代理模拟中的绘制调用次数，并使某些工作相对轻松。您可以通过将您的代理集合表示为 THREE.Points 来做到这一点。

// geometry
var geometry = new THREE.BufferGeometry();

// attributes
var positions = new Float32Array( numAgents * 3 ); // 3 values per vertex
var rotations = new Float32Array( numAgents * 1 ); // 1 values per vertex

for ( var i = 0; i < numAgents; i ++ ) {

    positions[ i ] = 0;
    positions[ i + 1 ] = 0;
    positions[ i + 2 ] = 0;
    rotations[ i ] = 2 * Math.PI * Math.random();

}

geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'rotation', new THREE.BufferAttribute( rotations, 1 ) );

// material
var material = new THREE.PointsMaterial( {

    color: 0xff0000,
    size: 4,
    map: null

} );

// points
points = new THREE.Points( geometry, material );
scene.add( points );

这将在单个绘制调用中呈现，您可以更新 CPU 上的位置并将数据每帧推送到 GPU。您应该能够轻松渲染 100,000 个代理。

fiddle : http://jsfiddle.net/730ffn4x/

如果要将点表示为带方向的箭头，则需要提供带有箭头图像的纹理和自定义 ShaderMaterial 以旋转每个点。

如果每个代理都必须表示为 InstancedBufferGeometry ，则 Mesh 是合适的。 @MartinSchuhfuß 的 Here is a fine example 与您想要做的类似。

对于激烈的模拟，您将使用 GPGPU。 See the three.js examples 。在 GPGPU 中，模拟完全在 GPU 上运行，而 CPU 通常只做最少的工作。

三.js r.84