使用WebGL渲染时，为什么Box2D正文的线条变形，不清晰且不直？

Question

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

在Box2D中，我的身体尺寸大约为1.0，地面大约为5.0。 我只是使用翻译和旋转（使用从 GetPosition（）和 GetAngle（）获得的值，使用WebGL绘制它们）功能）。我使用与这些函数相同的值。 也就是说，我使用大约1.0的值绘制对象，并使用大约5.0的值。

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

Here是一张图片：

正如您所看到的，一些侧线和底线不直。他们看起来很扭曲。 为什么会发生这种情况？

总结一下，我步骤世界，存储改变位置和角度，并使用 WebGL 我转换为点并旋转使用WebGL在屏幕上调用并绘制正文。

[编辑] 最后为更大的物体休息的角度是：-3.1379659302514917！它没有归结为一个完整的-PI。也许这就是为什么它被看到的方式。有没有办法解决它？

Answer 1

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

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

你也可以在假设接近多个π/ 2实际上是精确的情况下调整旋转值，但这会在翻滚体中产生明显的小故障。

Answer 2

我发现它发生的原因是我使用透视投影而不是正交投影来绘制2D内容。

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