javascript - 更新网格或从场景中删除和添加哪个更经济有效？

Question

我有一个小型 Web 应用程序，用于在 Three.js 中查看海底测深数据。基本上，我使用加载器将挤压测深的 JSON 模型引入场景中，并允许用户旋转模型或单击“下一步”加载海底的新部分。

我的所有模型都具有相同的 2D 足迹，因此在二维上是相同的，只有模型之间的高程和纹理发生变化。

我的问题是:更新模型最经济有效的方法是什么？

1. 使用scene.remove(mesh);，然后再次调用我的加载器来加载新模型，然后使用scene.add(mesh);<将其添加到场景中。

2. 通过调用我的加载程序引入 Material 和几何图形，然后调用 mesh.geometry = Geometry;、mesh.material =material 和然后mesh.geometry.needsUpdate;。

我听说从计算的 Angular 来看更新是相当密集的，但是我读过的所有关于这方面的文章都表明这两种方法几乎相同。此信息正确吗？在这种情况下有更好的方法来处理我的代码吗？

我考虑过的另一种选择是跳过创建模型(在 Blender 中)的步骤，而是使用位移贴图来更新顶点的 y 坐标。然后，为了更新，我可以在替换 Material 之前将新顶点推送到现有的平面几何体上。这是一个合理的方法吗？至少我认为位移图的加载文件比 .JSON 文件要小。我什至可以通过加载 GUI 元素来优化显示，将网格划分为更多或更少的部分，以实现高质量或低质量的渲染...

Answer 1

我根本不知道幕后到底发生了什么，但根据我的内存，我认为这两者是完全相同的事情。

您没有更新现有的网格。网格从 Object3D 延伸而来，因此它只是坐在那里，连接一些几何体和一些 Material 。

mesh.geometry = Geometry 没有“更新网格”，或者确实“更新了网格”，但是使用了新的几何图形(这可能是您实际上称为网格的东西)。

换句话说，您始终拥有自己的容器，但是当您通过执行 =geometry 替换几何图形时，您可以在接下来的 THREE.WebGLRenderer.render() 中为各种 GL 调用设置它打电话。

新几何体附加到的位置，无论是现有网格还是新网格，根本不重要。几何图形将触发低级 webgl 调用，例如 gl.bufferData()。

//upload two geometries to the gpu on first render()
var meshA = new THREE.Mesh( new THREE.BoxGeometry(1,1,1) );

var meshB = new THREE.Mesh( new THREE.BoxGeometry(1,1,1) ); 

//upload one geometry to the gpu on first render()
var bg = new THREE.BoxGeometry()

var meshA = new THREE.Mesh( bg );
var meshB = new THREE.Mesh( bg );

for ( var i = 0 ; i < someBigNumber ; i ++ ){
  var meshTemp = new THREE.Mesh( bg );
}
//doesnt matter that you have X meshes, you only have one geometry

//1 mesh two geometries / "computations"

var meshA = new THREE.Mesh( new THREE.BoxGeometry() ); //first computation - compute box geometry
scene.add(meshA);
renderer.render( scene , camera ); //upload box to the gpu

meshA.geometry = new THREE.SphereGeometry();
renderer.render( scene , camera); //upload sphere to the gpu

THREE.Mesh 似乎是 Three.js 中最令人困惑的概念。