Three.js实例等同-Java 学习之路

我最近开始玩three.js . 注意到即使有几千个简单的立方体，性能也开始下降 .

所以这带来了我的主要问题：有没有办法使用three.js？我很确定这种性能下降与drawcalls有关，因此如果以某种方式使用three.js进行实例化，它可以帮助支持性能 .

我知道缓冲区但是在这一点上我不可能创建一个几何缓冲区，它可以让我在运行时修改单个对象 . 如果有一个库来处理所有这些，这也算作一个解决方案 .

不久，我正在寻找一个相当于three.js的 object instancing . 任何建议表示赞赏 .

3 回答

4
在尝试绘制成千上万的球体时，我有同样的经历 .

经过一些研究，我使用PointCloud对象获得了更好的性能（高达一百万个项目） . 基本上，您可以从几何体创建PointCloud对象（可以在此示例中使用raw创建，也可以使用Three.js中现有的一个）和PointCloudMaterial，您可以在其中修改每个项目的属性 .

一个例子如下（增加10分）
```
var geo = new THREE.Geometry();
var mat = new THREE.PointCloudMaterial({size: 1, color:0xff0000});

//assign different positions to the points
for (var i=0 ; i<10 ; i++){
  var point = new THREE.Vector3(3*i,0,0);
  geo.vertices.push(point);
}

system = new THREE.PointCloud(geo, mat);
scene.add(system);
```
要修改外观，可以使用PointCloudMaterial属性，或加载纹理，以便每个点都获得所需的形状（在您的情况下为立方体） .

如果您分享更多细节（例如，为什么需要多维数据集）或某些代码，我可能会更有帮助
回复于 2024-04-24T17:46:29+08:00
2

我知道实例化可以用着色器模拟/重新实现 . 我不确定，但没有尝试过 .

这个旧的演示在GPU上有150k个单独的动画立方体，但是源码被缩小，所以很难看到发生了什么 . 也许不是一个适用于任何网格的适当的实例解决方案，我不确定，甚至可能 . http://alteredqualia.com/three/examples/webgl_cubes.html

我会一直睁大眼睛，因为我们也需要它...（现在已经在演示中添加了树木的vizicities）

回复于 2024-04-24T17:46:29+08:00

我只想到了一个解决方案，还没有尝试过 . 我想实例化非常复杂的网格，并使用骨架对它们进行动画处理 . 似乎JSON加载器只加载为Geometry G.我想转换为BufferGeometry BG1，而不是生成另一个BufferGeometry BG2 . 然后将BG2的顶点属性等参考分配给BG1

//load mesh
...
var mesh = loadMesh();

//convert to buffer geometry
var BG1 = new BufferGeometry();
BG1.fromGeometry(mesh);

var BG2 = new BufferGeometry();
BG2.addAttribute('position', G1.attributes['position']);
BG2.addAttribute('normal', G1.attributes['normal']);
BG2.addAttribute('uv', G1.attributes['uv']);
BG2.addAttribute('color', G1.attributes['color']);

BG2.drawcalls = BG1.drawcalls;
BG2.boundingBox = BG1.boundingBox;
BG2.boundingSphere = BG1.boundingSphere;

我的理解是webgl将共享这些缓冲区而不是复制VRAM中使用的内存 . 欢迎任何评论 .

回复于 2024-04-24T17:46:29+08:00

Three.js实例等同

3 回答

相关问题