彩色点云渲染 JavaScript 算法答案

【问题标题】：Coloured PointCloud rendering JavaScript algorithm彩色点云渲染 JavaScript 算法
【发布时间】：2015-12-20 17:47:10
【问题描述】：

我刚刚用 JS 制作了一个 3D pointcloud 渲染应用。该应用程序能够以 40 FPS 的速度渲染 +200 000 个 3D 黑/白点，用于浓密的云层。不过，我现在正在尝试实现 colors，并且在开发这个新功能时，我意识到在屏幕上绘制点的顺序非常重要。

我制作了另一个文件，其中我为每个点选择了一种颜色。例如，点 0 为红色，点 1 为绿色，点 2 为蓝色；所以颜色是预先计算好的。

我的意思是，离用户较远的点应该先渲染，离用户较近的点应该稍后渲染。使用这种技术，如果两点重叠，则更近的点将出现在屏幕上。

我做了一个自定义算法 [O(n^2) 我知道很慢]，它对与用户位置的距离的所有点（超过 200 000 个）进行排序（首先是更多点）。但是，我需要大约 7 秒才能将它们按正确的顺序排列，因为应用程序本来应该是实时的，我不得不采取一种解决方法来防止浏览器显示“此页面没有响应”弹出窗口.

还有其他方法可以渲染在屏幕上重叠的 3D 彩色点吗？别担心，我不是要一段代码，我只是想知道是否有另一种更快的方法来实现这一点，如果可能的话，用伪代码。

我已经知道我可以减少编写更高效算法的时间，但这仍然太慢了。每个有效的答案都将获得支持！

这就是我到目前为止所得到的

这就是我想要的

【问题讨论】：

【解决方案1】：

尚不清楚您为什么提出O(n^2) 时间复杂度。

您有 200k 点的数组。您有一些必须计算距离的点。这是在O(n) 中完成的。在我的机器上，它是在42.142ms 中完成的。

现在你必须根据这个距离对你的点进行排序，并在我的机器上完成122.358ms。您的排序算法在O(n*log(n)) 中运行。现在您从最远到最接近绘制点，它也在O(n) 中运行。

所以我不确定您是如何以 O(n^2) 结束的，以及为什么它会在 7 秒内运行。

【讨论】：

我目前正在使用一种基于选择排序算法 (en.wikipedia.org/wiki/Selection_sort) 的方法，它似乎是 O(n^2)。
它执行以下操作：
2.考虑到先前的信息对每个点进行排序，以便进一步的点是第一个点（选择排序）：O(n^2)
@BrainOverflow 你为什么要这样做？您有 1 个3d 点和许多其他点。您需要计算sqrt((x - x1)^2 +(y - y1)^2 +(z - z1)^2)，这是您的距离。将其作为附加参数添加到点数组中的每个点。然后使用本机排序功能对其进行排序。不要重新发明轮子，尤其是当轮子变得不那么圆的时候:-)。
你说得对，xD。该评论值得再次投票

【解决方案2】：

您可以在渲染过程中记住渲染的位置/距离，而不是排序。如果您发现要渲染的新点比已渲染的重叠点更远，则跳过新点。

【讨论】：

这很好！但是，大多数情况下，点不会 100% 重叠，因此仍然可以看到后面的点的一部分。不过，这似乎是最好的主意，因此您获得了 +1！
如果你想要实时渲染，我认为你必须走捷径，在速度和准确性之间找到平衡。 500ms/帧对你来说够快了吗？
完全没有 xD。它最终必须以 30FPS 的速度运行，所以这相距甚远。为了增强用户体验，我决定仅在用户静止时才对点云进行排序，并且持续了大约 100 毫秒。据推测，他们将环顾地图，并且应用程序将有足够的时间在用户再次移动之前完成整个过程。 如果您有任何建议，请告诉我:)
嗯，首先有一个简单的优化：不要对距离进行平方，它不会改变排序。顺便说一句，分析渲染以查看排序成本和距离计算成本会很有趣。
> 点不重叠 100% 你的“点”有多大？如果您的点由多个像素组成，您可以通过将屏幕坐标四舍五入为网格来创建离散坐标系，以便给定的 x,y 最多包含一个点。这会大大增加渲染时间，因为如果云很密集，您可以避免渲染很多点。