Graphics WebGL/Box2D绘图问题：实体之间的间隙

我仍然是一个图形编程新手，我打赌下面的问题只是一个配置错误的问题

我正在创建一个游戏使用webgl的图形和box2dweb的物理。不幸的是，该图形显示了物理实体之间的间隙（左侧是我的实际渲染，右侧是在另一个画布中使用box2dweb的调试图形进行渲染）：

box2d和webgl对框使用相同的坐标系和尺寸。没有转换。红色框实际上是纹理，尽管这没有什么区别。红色框是动态体，绿色框是静态体

显然，我不能只调整图形或物理的大小。如果我把图形调大，绿色框就会重叠，如果把物理调小，就会有物理间隙

下面是另一个例子：

此外，有时，没有像下面那样的间隙（只是将physic Body稍微移到右侧）

黑框只是彩色绘制的（没有纹理）。看看前一张图片，我想它与将浮动世界坐标转换为屏幕像素坐标有关，但我不知道修复此问题的选项是什么

非常感谢你的帮助

[更新]

这是一个ortographic投影矩阵，我用以下方式初始化：

mat4.ortho(-this.vpWidth * this.zoom, this.vpWidth * this.zoom, -this.vpHeight * this.zoom, this.vpHeight * this.zoom, 0.1, 100.0, this.pMatrix);

vpWidth和vpHeight是画布尺寸（640*480）。投影矩阵将传递给顶点着色器，并与模型视图矩阵和顶点位置相乘。我玩了缩放因子。我放大的越多，差距就越大

[更新2]

好的。我对此进行了更多的调查。坏齐柏林飞艇有一个很好的暗示box2d在实体之间有间隙以避免隧道。虽然这不是完整的解释。我查看了调试绘图代码-它没有调整任何大小。我做了一个小测试，放大webgl和调试绘图，结果如下：

---

使用10倍缩放时，两者的间距相同，但在“正常”缩放中，webgl绘制的间距大于画布2d。原因是什么？我的猜测是抗锯齿，它是为canvas 2d启用的，但不是为webgl启用的（我正在使用firefox-我想今天晚些时候我会做一个chrome测试，看看会发生什么）

如果你检查，它在第4.2章中说box2d引擎会保持多边形稍微分开，以避免隧道。检查Box2d调试绘图代码，查看它们如何从Box2d转换为绘图坐标，这可能是一个好主意，您可以在应用程序中执行同样的操作。

使用您提供的矩阵，您将创建一个“虚拟大小”为画布尺寸两倍的视口。如果要尝试像素对像素匹配，请尝试以下操作（缩放比例为1.0）：

这样，您的640*480画布将具有[-320，-240]到[320*240]的范围，这将为您提供总计640*480个单位。请注意，这可能不会完全消除间隙，因为正如bad zeppelin指出的那样，box2d故意将间隙放在那里，但这会使间隙不那么明显

---

减少可见间隙的另一个选项是，从物理表示中仅放大一点绘制几何体，以便在边缘周围显示一个或两个额外的像素。可能发生的最糟糕情况是，几何体可能看起来只是有一点重叠，但这取决于您确定这是否是比间隙更令人反感的工件。

我认为我们需要更多的信息才能提供帮助。我的第一印象是，你有一个正交投影矩阵，它与你的画布尺寸不匹配。你能给我们介绍一下你的场景设置吗？我更新了一下帖子。这确实是一个正交投影。谢谢。非常好的提示！这是真的，尽管它并不能解开整个谜团。间隙大小取决于缩放级别。我用更多的信息更新了我的问题。谢谢！根据同一文档，多边形形状从shape类继承半径字段。这就造成了形状之间的差距。您可以使用此值并将图形绘制得稍大一些。

mat4.ortho(-(this.vpWidth/2) * this.zoom, (this.vpWidth/2) * this.zoom, -(this.vpHeight/2) * this.zoom, (this.vpHeight/2) * this.zoom, 0.1, 100.0, this.pMatrix);