创建任意扭曲的2D网格

Question

我想根据点质量的位置扭曲2D网格。质量的存在，应该如下收缩网格：

但我想用网格上任意数量的粒子扭曲它。

这是因为我可以想象重力对空间的影响：扭曲存在大质量的空间。

到目前为止，我所尝试的是基于其内部的粒子数量迭代地调整单元格的边缘。具有许多颗粒的细胞应缩小其边缘。

然而，由此产生的视觉效果令人失望，并没有真正成为扭曲的2D空间。我认为因为变形应该具有全局效应，而不仅仅是对单个细胞的影响？

我可以使用什么算法来扭曲粒子质量的2D空间？

Answer 1

我将2d平面建模为由一些弹性材料制成，这样你可以使用模拟给定物体重量的力使其变形。

由于您想要想象一些物理效果，我认为基于物理的可视化可能是一个合适的选择。

模拟这种弹性行为的一种相对简单的方法是创建一个质量弹簧系统：

https://en.m.wikipedia.org/wiki/Soft-body_dynamics

然而，应用这种技术需要很好地理解Hookean物理，ODE，集成和更多相关的数学内容。

Answer 2

我创建了一个小提琴，每个粒子根据重力使用的平方规则影响每个网格交点。 https://jsfiddle.net/1nrjcsqa/2/

    dx = points[i][0] - x;
    dy = points[i][1] - y;
    d = Math.sqrt(dx * dx + dy * dy);
    f = gravity_force / Math.pow(d, falloff);

由于重力作为距离的平方落下，因此点仅对距离它们最近的网格具有可见效果。您可以通过减少衰减来使点对网格产生更远的影响，但这不会像重力那样。

您可能需要调整重力以使事情看起来适合您。

Answer 3

我现在会发布一些快速建议，然后在我可以的时候再跟进。

虽然您在帖子和评论中明确说过这将在CPU上处理，但在GPU上执行此操作并使用OpenGL进行显示可能会有很大帮助。处理60赫兹（每次通过约16毫秒）的数万个点的效果即使它有八个核心也要求很多CPU。

那说，一些准备性的想法：

• 正如用户指出的那样，重力作为距离的平方而下降。在某个距离，您可以忽略这些效果，特别是因为您的对象都具有相同的质量。
• 鉴于您将支持大量的群体，存在缩放问题，同时仍然保持良好的交互和平滑动画的更新速率。
• 您的目标是可视化，这意味着您可以采用快捷方式，严格解释数学可能会导致您。事实上，我认为至少有一些捷径是必要的，以便在接近你想要的速度的任何地方进行操作。
• 迭代质量和它们影响的所有网格线点可能不会导致以您想要的速度进行有吸引力的图形更新。
• 您需要考虑叠加和场矢量。 （我这里有一般意义，不是适当的术语。）每个质量都会对周围的所有空间产生影响。从空间的任何一点，都会有一些矢量指向那个质量，矢量的长度代表吸引力。在太空中的任何一点，你都会加起来。这可以产生“死角”，其中两个不同的身体以抵消的力拉动。
• 对于大量的质量，弯曲网格线的可视化可能变得如此复杂，它使用户感到困惑而不是启发。想象一下，有一个有弹性的橡胶板，上面附着着数千个钢制重物，有时将重量聚集在一起：表面形状看起来非常复杂。
• 正如Mauricio Cele Lopez Belon所写，您可以将表面建模为弹性材料 - 即直接实现“橡胶板”表面几何形状。如果没有在GPU上使用CUDA和OpenGL，我认为你不会让它工作。
• 主要障碍是计算时间。
• 为了最大限度地缩短计算时间，请尽可能预先计算。
• 请注意，由于您的质量相等，因此任何给定（dx，dy）偏移处的质量效应都是相同的。
• 虽然表示质量的点可能具有实值位置，例如（23.32342，-15.38963）或其他，但您可能（并且可能需要）计算对基于整数的网格的影响以简化计算。

考虑到所有这些，我想到了一种快速技术，它将每个质量的引力场定义为一块内存，它或多或少地与其他内存进行“或”运算，以产生最终的场向量图。

然后是绘制它的问题。再次，使用OpenGL创建一个真实的3D表示然后投影到2D显示器将是我的首选方式。 OpenGL可以在集成显卡上运行，这就是我推荐的方式。否则，将2D网格线修改为2D图形的计算可能会很复杂。

除此之外，可能会有额外的调整，作弊和变通方法来产生合理的东西，这将有助于用户可视化正在发生的事情，但不能像某些人那样准确地表示引力场。

从我编写的初始代码仅仅是为了显示解决问题的缓慢且不太理想的方法，这里是一个非常粗略的弯曲网格线样本，将它们视为可以单独拉向每个质量的点。这不是实际处理网格线的方法;代码也有一些错误。