WebGL / Box2D绘图问题：机构之间的差距

Question

我仍然是图形编程新手，并且认为以下问题仅仅是配置错误。

我正在使用webgl创建一个游戏用于图形，而box2dweb用于物理创建。遗憾的是，绘图显示了物理实体之间的间隙（左边是我的实际渲染，右边是使用box2dweb在另一个画布中调试绘图的渲染）：

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

显然我不能只调整图形或物理大小。如果我把图形做得更大，那么绿色框会重叠，如果物理尺寸变小，那么就会出现物理空白。

这是另一个例子：

另外，有时候，就像下面一样没有间隙（只是将物理体移到右边）

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

非常感谢您的帮助

[更新]

这是一个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在主体之间有间隙以避免隧道。虽然这不是完整的解释。我看了一下debug-draw-code - 它没有调整任何东西。我进行了一些测试，放大了webgl和调试绘图，结果如下：

具有10倍变焦的

都具有相同的间隙，但在“正常”缩放中，webgl比画布2d绘制更大的间隙。可能是什么解释？我的猜测是抗锯齿，这是为canvas 2d启用的，但不适用于webgl（我正在使用firefox - 我猜我今天晚些时候会进行Chrome测试，看看会发生什么）

Answer 1

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

Answer 2

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

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);

这样你的640 * 480画布将具有[-320，-240]到[320 * 240]的范围，总共可以获得640 * 480个单位。请注意，这可能不会完全消除这些差距，因为不好的zeppelin指出box2d故意将它们放在那里，但它应该使它们不那么明显。

减少可见间隙的另一个选择是将几何图形从物理表示中略微缩放，以便在边缘周围显示一个或多个像素。可能发生的最糟糕的情况是，几何体可能看起来只是略微重叠，但是由您来确定这是否是比间隙更令人讨厌的伪像。