为什么使用 WebGL 渲染时 Box2D 身体的线条扭曲、不清晰、不直？答案

【问题标题】：Why is Box2D body's line, distorted , unclear and not straight when rendered using WebGL?为什么使用 WebGL 渲染时 Box2D 身体的线条扭曲、不清晰、不直？
【发布时间】：2012-10-13 19:01:36
【问题描述】：

我正在使用带有 javascript 和 WebGL 的 Box2DWeb。

在 Box2D 中，我的身体尺寸约为 1.0，地面约为 5.0。我只是使用 WebGL 使用 translate 和 rotate 绘制它们（使用从 GetPosition() 和 GetAngle() 获得的值功能）。我使用从这些函数中获得的相同值。即，我使用大约 1.0 的值来绘制对象，使用大约 5.0 的值绘制地面。

问题是当发生旋转时（例如当 2 个物体发生碰撞时），物体旋转并平移直到平衡，最终绘制的位置不清楚。即使物体只是躺在地上，线条也不是直的。没有旋转，身体看起来就好了。

Here 是一张图片：

如您所见，有些侧线和底线并不直。它们看起来是扭曲的。为什么会发生这种情况？

总而言之，我踏世界，存储改变的位置和角度某处，并使用 WebGL 我翻译到点并使用旋转WebGL 调用并在屏幕上绘制主体。

[编辑] 更大的物体最终静止时的角度是：-3.1379659302514917！它没有归结为完整的 -PI 。也许这就是为什么它被这样看待。有什么办法可以解决吗？

【问题讨论】：

身体的行为是否正常？在这种情况下，您得到的 GetAngle 的确切值是多少？
身体表现得非常逼真。更大的物体最终静止时的角度是：-3.1379659302514917！它没有归结为完整的 -PI 。也许这就是为什么它被这样看待。有什么办法可以解决吗？

标签： javascript box2d webgl

【解决方案1】：

通用物理引擎不可避免地会产生不精确的结果。您可以通过设置更严格的阈值来停止模拟几乎静止的物体（显然 Box2D 将其称为“睡眠”），从而将其调整为更接近的近似值。

您还可以通过使用抗锯齿图形使其在屏幕上不那么明显，这样轻微的旋转不会在线条中产生一个像素的扭结，而是会产生更平缓的斜率。

您还可以在接近倍数 π/2 实际上是精确的假设下调整旋转值，但这会在翻滚的身体中产生明显的故障。

【讨论】：

网络上有大量的 Box2D 演示/应用程序。它们不像我的那样容易出错。您知道您提到的这些方法中的哪些通常被其他开发人员使用吗？
关于第一种方法，您能否解释一下，为停止模拟几乎静止的物体设置“更严格的阈值”是什么意思？即使我要发现一个身体在休息，我也不能确定它是在一个平坦的表面上。实际上可能有轻微的 0.01 弧度倾斜。我看不出这会有什么帮助。我的意思是，仅仅因为它是静止的，它会近似于一个身体的角度有多正确？这可能会产生错误的结果，就像你的第三种方法一样。我完全错过了什么吗？
这并不是说你应该寻找不动的物体——而是 Box2D 已经在这样做了。如果您通过设置较小的速度阈值将其更改为更长的模拟时间，它们可能会稳定下来。我从来没有特别使用过 Box2D，所以我无能为力。

【解决方案2】：

我发现这是因为我使用透视投影而不是正交投影来绘制 2D 东西。

我还必须将图像保持在 0.5 m 到 5 m 的范围内，并使用 30.0 的比例在屏幕像素和 Box2D 米之间进行转换。

【讨论】：