I've been trying to use map tile images from services like OpenStreetMap to create a globe, and I've mostly succeeded. The problem is that when I compare my globe to one using the same image source made with Cesium.js, mine looks weird and stretched.
Here's the one that Cesium.js makes
As you can see, the one that I've made fits all the images together properly, but they seem slightly too large.
What could be causing this?
My methodology for texturing the globe is as follows
- Get the latitude and longitude of the vertex
- Project lat/lng to a x/y value in tile-space using leaflet.js
- Use that x,y coordinate to sample the image and put it on my sphere
Those three steps seem pretty straightforward to me, but I'm clearly doing something wrong and I'm not sure what it is.