title: WebGL / Box2D drawing issue: gap between bodies
body: <p>I'm still a graphics programming novice and bet the following problem is just a matter of wrong configuration.</p>
  
  <p>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):</p>
  
  <p><img src="https://i.stack.imgur.com/NrX2I.jpg" alt="enter image description here"></p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>here is another example:</p>
  
  <p><img src="https://i.stack.imgur.com/9xpKZ.jpg" alt="enter image description here"></p>
  
  <p>also, sometimes, there there is no gap  just like in the following (just moved the physic-bodies a little on the right)</p>
  
  <p><img src="https://i.stack.imgur.com/2hsUs.jpg" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>Thanks a lot for the help</p>
  
  <p><strong>[Update]</strong></p>
  
  <p>It is an ortographic projection matrix, that I am initializing in the following way:</p>
  
  <pre><code>mat4.ortho(-this.vpWidth * this.zoom, this.vpWidth * this.zoom, -this.vpHeight * this.zoom, this.vpHeight * this.zoom, 0.1, 100.0, this.pMatrix);
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>[Update 2]</strong></p>
  
  <p>okay. i investigated this a little more. bad zeppelin had a good hint. <strong>box2d has gaps between bodies to avoid tunneling</strong>. 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:</p>
  
  <p><img src="https://i.stack.imgur.com/yvmFN.jpg" alt="enter image description here"></p>
  
  <p>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 <strong>anti-aliasing</strong>, 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)</p>