更新网格或从场景中删除和添加哪个更具成本效益？答案

【问题标题】：What is more cost effective updating a mesh or removing and adding from the scene?更新网格或从场景中删除和添加哪个更具成本效益？
【发布时间】：2016-08-14 16:31:35
【问题描述】：

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

我所有的模型都具有相同的 2D 足迹，因此在两个维度上都是相同的，只有高程和纹理因模型而异。

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

使用scene.remove(mesh); 然后再次调用我的加载程序来加载一个新模型，然后使用scene.add(mesh); 将其添加到场景中。
通过调用我的加载程序来更新现有网格，以引入材质和几何图形，然后调用mesh.geometry = geometry;、mesh.material = material，然后调用mesh.geometry.needsUpdate;。

我听说从计算的角度来看更新是相当密集的，但我读过的所有文章都指出这两种方法几乎相同。这些信息正确吗？在这种情况下，有没有更好的方法来处理我的代码？

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

【问题讨论】：

我认为这可能是题外话，因为答案可能完全基于意见。
我明白你的意思，我在最后有一点顿悟。使用置换贴图比加载新模型更有效。我的问题仍然存在。哪种方法更好，用新的纹理和几何图形更新现有网格，还是简单地从场景中删除和添加？
您最好在 3D 建模论坛上问这个问题？我会认为 SO 上的大多数 JS 用户都是网络开发人员......

标签： javascript 3d three.js mesh

【解决方案1】：

我不知道引擎盖下到底发生了什么，但据我所知，我认为这两者是完全相同的。

您没有更新现有的网格。网格从 Object3D 延伸出来，所以它就坐在那里，连接一些几何体和一些材料。

换句话说，您始终拥有自己的容器，但是当您通过执行 =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 中最令人困惑的概念。

【讨论】：