分析模型并以编程方式创建它的外壳/层答案

【问题标题】：Analyze a model and create outer shell/layer of it programmatically分析模型并以编程方式创建它的外壳/层
【发布时间】：2017-03-21 00:05:57
【问题描述】：

因此，我们创建了一个查看器，用于使用 WebGL 和 Three.js 查看 CAD 模型。目前我们正在尝试支持仅加载建筑物的外壳，以降低内存成本和查看多个大型建筑物的渲染速度。我们基本上想做的就是拿一个大建筑的模型，把建筑里面的所有东西都去掉，这样你就只能看到外墙、窗户和门了。

有没有人知道我该如何分析这个并创建模型的外壳？现在，每面墙、门、窗等都作为单独的对象加载，我当然可以访问顶点和面。

【问题讨论】：

这不是回答你的问题。只是出于好奇，您的模型有多大？我的意思是有多少个三角形？我们已经使用 threejs 加载了具有 4500 万个三角形的模型，并且没有使用实例，并且获得了 60+ fps。我认为您可以在不考虑 fps 的情况下加载更多内容。
我们有 100k - 300k 面的模型，并且看到这些模型的 fps 有所下降。我们将支持同时加载 10-20 个这些模型，或者至少让您可以看到模型的轮廓。你用什么技术来加载这么多三角形？请记住，我们模型中的每个对象都必须是独立且可选择的，因此合并具有相同材质的几何体将不适用于我们的选择。
我们必须将所有几何图形合并到一个几何图形中才能为 45M 三角形模型获得 90 fps。我们使用 body-vertex index map 管理选择和其他特征。即便如此，我认为 100K-300K 三角形的 10-20 个绘制调用不会将 fps 降低到 60 以下。10-20 个绘制调用应该没问题。我认为，一栋建筑有多个部分（drawcalls）。我认为您可以尝试将其减少为单个 drawcall。
是的，如果我可以合并几何图形与选择一起工作，那将是一个很大的改进！现在我有 200k 面孔的 10k drawcalls 所以把它减少到 10-100 个调用会有很大帮助。

标签： 3d three.js

【解决方案1】：

一种相对简单的方法是从挑选中汲取灵感。您从 4 到 6 面（左、右、前、后、上、下）渲染房子。在每次渲染中，您都会以不同的纯色（无照明）渲染房子的每一块。然后调用gl.readPixels 或THREE.js 等效项并扫描所有像素以找出哪些对象仍然可见。不可见的都在里面。

并发症是窗户。如果您有任何类型的半透明对象，则不需要绘制它们，否则它们会阻挡您应该能够看穿它们的东西。

另一个复杂因素是半模糊的整体。就像如果你有一个通风口，从某个角度你可以通过通风口看到里面的东西，但是从你的 6 个视图中看不到这个角度，那么里面的东西就不会显示为可见。

在伪代码中

 for (ndx = 0 to numObjects) {
     someMaterial.color = ndx;
 }
 visibleObjects = [];
 for each camera position {
     render scene
     read pixels
     for each pixel {
         visibleObjects[pixelValue] = true
     }
 }
 notVisibleObjects = [];
 for (ndx = 0 to numObjects) {
     if (!visibleObjects[ndx]) {
         notVisibleObjects[ndx] = true;
     }
 }

【讨论】：

是的，这是个好主意，但问题还在于建筑物从某个角度挡住了视线。就像一座有两座“塔”的建筑，所以每一座建筑都挡住了另一座建筑的一个表面。我认为windows的问题不是什么大问题。我们可以将它们设为实心而不是透明，因为我们仅使用此视图在远处查看模型。当您靠近实际建筑物时，我们会即时加载该建筑物的更多细节。