从矢量 3 点数据在 3D 模型上创建热图

gpr*_*and 6 data-visualization heatmap point-clouds three.js

我正在尝试在从 OBJ(或 STL)加载的 3D 模型之上渲染平面、动态创建的热图。

我目前正在使用 Three.js 加载和渲染 OBJ。我有 Vector3 点,目前正在将其绘制为简单的红色立方体(下图)。这些数据点都被光线投射到我的 OBJ 网格上并且位于表面上。Vector3 点是从外部数据源加载的,并将根据正在查看/收集的数据而变化。

点

我想将我的 vector3 点数据渲染到 OBJ 表面的热图中。以下是一些示例,说明了我试图实现的视觉效果类型:

例子1

例子2

例子3

例子5

我觉得顶点着色是实现此目的的方法,但我的问题是我的 OBJ 模型没有足够的曲面细分来执行此操作。正如你所看到的,每张脸上都有许多红点。我正在努力寻找一种方法来在我的对象网格上绘制与我的红点数据完全相同的颜色。我假设我需要将随机向量 3 点转换为网格,但找不到方法来执行此操作。

我已经研究过生成纹理的可能性,但是 1)我没有 OBJ 的 UV 贴图,也没有找到以编程方式生成它们的方法,2)我对如何关联向量 3 点有点迷失数据到 UV 点。

我考虑过使用着色器,但我的 vector3 点数据对于使用着色器来说似乎太大了(可能有数十万个点)。我还觉得每帧渲染热图并不是正确的方法,而宁愿只在加载时渲染一次。

我研究了点云和行进立方体算法的等值面,但我认为这不是正确的方向,因为只有我的数据有点像点云,而且我不确定如何保持这种平滑沿着我的 OBJ 网格的表面。

虽然我更愿意将所有内容保留在 JavaScript 中以便在浏览器中查看,但我愿意使用 REST 以任何语言/程序进行服务器端处理,只要它可以在无需人工干预的情况下实现自动化,并推送回浏览器进行渲染。

任何建议或指导表示赞赏。

gma*_*man 3

我只是猜测,但似乎首先您需要有 UV 坐标,将每个三角形映射到纹理。我建议使用建模包,而不是手动执行此操作。大多数建模包都有一些自动、统一地将每个三角形映射到纹理的方法。例如在搅拌机中

接下来,通过计算哪些三角形受到每个点(光线投射)的影响,查找它们的纹理坐标,将该点投影到纹理空间中,然后将颜色放入纹理的该部分,将热图放入纹理中。我只是猜测您不仅需要做精确的点,而且可能需要考虑相邻的三角形,因为到达三角形边缘附近的一些热量信息需要渗入相邻的三角形,但该相邻的三角形可能完全使用纹理的不同部分。