I'm making a map viewer where you can specify where tiles go in a map and then see it on the screen, translate it, and zoom in and out.
Here's a picture showing the tiles used to make my example map
Here's the tiles connected together, more or less my desired result.
The problem is that at particular combinations of translations and zoom levels the spacing is off. Here's an example picture of the problem.
In order to arrange the tiles I'm using a Perspective projection matrix parametrized by the zoom level, a camera matrix which just translates the scene based the camera's 2d position, and finally each tile is translated using another matrix derived from its x and y position.
tile * camera * projection
How can I avoid this weird spacing issue at particular positions? I'm guessing this is some kind of floating point precision issue, but I'm not sure.
(for those interested, the tiles I'm using are from this collection)
I was using the following parameters for the standard openGL perspective projection matrix:
let near = 0.5; let far = 1024.0; let scale = zoom * near; let top = scale; let bottom = -top; let right = aspect_ratio * scale; let left = -right;
aspect_ratio is the window width divided by the window height, (in pixels,) and
zoom in the error case above was set to
8.0. I read some more on perspective projection and floating point errors but couldn't find anything sensible to change so I resorted to adjusting the parameters. Specifically I tried setting
1.0 and now I can't replicate the weird spacing. So I guess my problem is solved?
But this is a mysterious and unsatisfying answer, so I would still appreciate it if someone could explain what went wrong, and how I can avoid it in the future without fiddling with numbers until it "magically" works!
EDIT responding to amitp
Here's a screenshot from the same version as above (with
near still set to 0.5), with the background set to red as suggested. This seems to indicate that it's something wrong with the tile layout, not image bleed.