最小化 Three.js 抽奖次数

我正在为我的项目测试 Three.js 的使用（http://agentscript.org http://agentscript.org）并且第一个测试似乎很慢：

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

（注意：该网站可能需要一段时间，在一段时间不使用后它会“休眠”）

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

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

我该怎么做？

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

您希望减少代理模拟中的绘制调用数量，并让某些东西相对轻松地工作。您可以通过将您的代理集合表示为来做到这一点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/ http://jsfiddle.net/730ffn4x/

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

InstancedBufferGeometry如果每个代理必须代表一个Mesh. 这是一个很好的例子 http://codepen.io/usefulthink/full/YNrvpY作者：@MartinSchuhfuß，这与您想要做的类似。

对于激烈的模拟，您可以使用 GPGPU。请参阅 Three.js 示例 https://threejs.org/examples/?q=GPGPU。在 GPGPU 中，模拟完全在 GPU 上运行，CPU 通常执行最少的工作。

三.js r.84