WebGL / Box2D 绘图问题：主体之间的间隙
我仍然是图形编程新手，我敢打赌以下问题只是错误配置的问题。
我正在创建一个游戏，使用 webgl 进行图形处理，使用 box2dweb 进行物理处理。不幸的是，绘图显示了物理实体之间的间隙（左边是我的实际渲染，右边是在另一个画布中使用 box2dweb 的调试绘图进行的渲染）：
box2d 和 webgl 都使用相同的坐标系和盒子大小。没有转换。红色框实际上是纹理，尽管这没有什么区别。红色框是动态物体，绿色框是静态物体。
显然我不能只调整图形或物理的大小。如果我将图形变大，绿色框就会重叠，如果将物理变小，就会出现物理间隙。
这是另一个示例：
另外，有时，没有间隙，如下所示（刚刚移动物理主体在右侧一点）
黑框只是彩色绘制的（无纹理） 。看看上一张图片，我想这与将浮动世界坐标转换为屏幕像素坐标有关，但我不知道修复此问题的选项是什么。
非常感谢您的帮助
[更新]
它是一个正交投影矩阵，我通过以下方式初始化：
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 并进行调试绘制，结果如下：
图像描述">
I'm still a graphics programming novice and bet the following problem is just a matter of wrong configuration.
i am creating a game using webgl for graphics and box2dweb for physics. unfortunately the drawing shows gaps between the physical bodies (left is my actual rendering, right is a rendering using box2dweb's debug-drawing in another canvas):
both box2d and webgl use the same coordinate-system and sizes for the boxes. there is no conversion. the red boxes are actually textures, though this doesn't make a difference. the red boxes are dynamic bodies, the green boxes are static bodies.
obviously i can't just resize graphics or physics. if i made the graphics bigger, the green boxes would overlap, if made physics smaller there will be physics-gaps.
here is another example:
also, sometimes, there there is no gap just like in the following (just moved the physic-bodies a little on the right)
the black boxes are just color-drawn (no textures). looking at the previous image, i guess it has to do with converting the floating-world-coordinates to screen-pixel-coordinates, but i have no idea what the option for fixing this would be.
Thanks a lot for the help
[Update]
It is an ortographic projection matrix, that I am initializing in the following way:
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 and vpHeight are the canvas-dimensions (640 * 480). the projection matrix is passed to the vertex-shader and multiplied with the model-view-matrix and the vertex-position. i played around with the zoom-factor. the more i zoom in the bigger the gaps are.
[Update 2]
okay. i investigated this a little more. bad zeppelin had a good hint. box2d has gaps between bodies to avoid tunneling. though this is not the complete explanation. i looked at the debug-draw-code - it is not resizing anything. i made a little test, zooming in both in webgl and for the debug draw with the following result:
with 10-times-zoom both have the same gap, but in "normal" zoom webgl is drawing bigger gaps than canvas 2d. what could be the explanation? my guess is anti-aliasing, which is enabled for canvas 2d, but not for webgl (i am using firefox - guess i'll make a chrome test later today to see what happens)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果你查看box2d手册，它在第4.2章中说box2d引擎使多边形稍微分开以避免隧道效应。检查 Box2d 调试绘图代码以了解它们如何从 box2d 转换为绘制坐标可能是一个好主意，可以了解如何在应用程序中执行相同的操作。
If you check the box2d manual, it says on the chapter 4.2 that the box2d engine keeps the polygons slightly separated to avoid tunneling. Checking the Box2d debug drawing code to see how they translate from box2d to draw coordinates might be a good idea to see how you could do the same in your app.
使用您提供的矩阵，您将创建一个“虚拟大小”为画布尺寸两倍的视口。如果您正在尝试逐像素匹配，请尝试以下操作（缩放为 1.0）：
这样您的 640*480 画布将具有 [-320,-240] 到 [320*240] 的范围，这给出总共 640*480 个单位。请注意，这可能不会完全消除间隙，因为正如 bad zeppelin 指出的那样，box2d 故意将它们放在那里，但它应该使它们不那么明显。
减少可见间隙的另一个选择是从物理表示中稍微放大一点绘制几何图形，以便它在边缘周围显示一个或两个额外的像素。可能发生的最糟糕的情况是几何图形可能看起来只是有一点重叠，但这取决于您来确定这是否是比间隙更令人反感的工件。
With the matrix you provided, you'll be creating a viewport that has a "virtual size" of twice your canvas dimensions. If you are trying for a pixel-for-pixel match, try this (with a zoom of 1.0):
That way your 640*480 canvas will have extents of [-320,-240] to [320*240], which gives you 640*480 units total. Note that this will probably not eliminate the gaps entirely, since as bad zeppelin noted box2d puts them there intentionally, but it should make them less visible.
Another option to reduce the visible gaps is to draw your geometry scaled up just a bit from the physical representation, so that it displays with an extra pixel or two around the edges. The worst that may happen is that the geometry might appear to overlap just a bit, but it's up to you to determine if that's a more objectionable artifact than the gaps.