array buffers for javascript webgl rendering for tile (8,137,83)

README.md

zum rendern brauche ich die vertices mit den pixel koordinaten (siehe vertex_array in arrays.js) und die entsprechenden indices für den draw call (siehe index_array in arrays.js).

um epsg:4326 oder epsg:3857 in pixel koordinaten zu convertieren habe ich dir die rechnung in conversions.js gepackt.

ich habe eine tile mit zoom=8, x=137 und y=83 als rohdaten in geojson unter tile_8_137_83.json abgelegt. die konvertierten und vorberechneten arrays sind in arrays.js.

tl;dr ich brauch ein vertex und ein index array im gltf. falls das format relevant ist, für die vertices nutze ich ein Float32Array und für die indices Uint16Array

arrays.js

var vertex_size = 2; /* size of coordinate pairs, here: x, y => 2 */

/* array buffer of vertices (x,y) of pixel coordinates on 256px raster */
var vertex_array = [
  137.43807983398438, 83.96937561035156, 
  137.5054168701172,  83.95816040039062, 
  137.5241241455078,  83.91197967529297, 
  137.5322265625,     83.90998840332031, 
  137.53721618652344, 83.897705078125, 
  137.52597045898438, 83.87815856933594, 
  137.5297393798828,  83.84432220458984, 
  137.50228881835938, 83.80120849609375, 
  137.479248046875,   83.78889465332031, 
  137.46424865722656, 83.76520538330078, 
  137.4443359375,     83.74971771240234, 
  137.673095703125,   83.77037048339844, 
  137.65753173828125, 83.80636596679688, 
  137.00003051757812, 83.76614379882812, 
  137.04185485839844, 83.79299926757812, 
  137.1394805908203,  83.82616424560547, 
  137.2039794921875,  83.88810729980469, 
  137.2374725341797,  83.9061279296875, 
  137.40103149414062, 83.95429992675781, 
  137.44882202148438, 83.95372009277344, 
  137.53948974609375, 83.96038055419922, 
  137.79107666015625, 83.95862579345703, 
  137.79107666015625, 83.95862579345703,
  138,                83.96260070800781, 
  137.39028930664062, 83.71286010742188, 
  137.39100646972656, 83.69242858886719, 
  137.4111328125,     83.64306640625, 
  137.41952514648438, 83.59942626953125, 
  137.3735809326172,  83.51768493652344, 
  137.3546600341797,  83.45588684082031, 
  137.35537719726562, 83.41255187988281, 
  137.3818359375,     83.35511779785156, 
  137.38710021972656, 83.31903839111328, 
  137.3612060546875,  83.2017593383789, 
  137.33746337890625, 83.0462646484375, 
  137.32388305664062, 82.99996948242188, 
  137.5040740966797,  83.9999771118164, 
  137.47555541992188, 83.98607635498047, 
  137.44732666015625, 83.958740234375, 
  137.44363403320312, 83.97930145263672, 
  137.43182373046875, 83.9999771118164, 
  137.39442443847656, 83.71861267089844, 
  137.3883056640625,  83.76004791259766, 
  137.39427185058594, 83.78502655029297, 
  137.41177368164062, 83.80999755859375, 
  137.45663452148438, 83.85228729248047, 
  137.47256469726562, 83.8829574584961, 
  137.4744110107422,  83.90694427490234, 
  137.44363403320312, 83.97930145263672, 
  137.9551239013672,  83.08622741699219, 
  137.9552001953125,  83.04972076416016, 
  137.94432067871094, 82.99996948242188, 
  137.95086669921875, 83.07920837402344,
  138,                83.04460144042969, 
  137.66905212402344, 83.82511138916016, 
  137.66635131835938, 83.7764663696289, 
  137.64622497558594, 83.69853210449219, 
  137.65084838867188, 83.66669464111328, 
  137.67559814453125, 83.62789154052734, 
  137.75758361816406, 83.54125213623047, 
  137.80238342285156, 83.47653198242188, 
  137.82229614257812, 83.42341613769531, 
  137.84689331054688, 83.30803680419922, 
  137.87989807128906, 83.19428253173828, 
  137.91197204589844, 83.12816619873047, 
  137.9322967529297,  83.10286712646484, 
  137.9551239013672,  83.08622741699219, 
  137.27679443359375, 83.7213134765625, 
  137.22482299804688, 83.7065200805664, 
  137.13734436035156, 83.66822052001953, 
  137.113525390625,   83.64835357666016, 
  137.09617614746094, 83.61554718017578, 
  137.0707244873047,  83.51026153564453, 
  137.05201721191406, 83.47959899902344, 
  137.00003051757812, 83.41963958740234, 
  137.79917907714844, 83.9999771118164, 
  137.78631591796875, 83.96014404296875, 
  137.7035369873047,  83.85134887695312, 
  137.67495727539062, 83.83097076416016, 
  137.60092163085938, 83.81222534179688, 
  137.55291748046875, 83.75582122802734, 
  137.52532958984375, 83.73587036132812, 
  137.46539306640625, 83.71955108642578, 
  137.2969970703125,  83.71614837646484, 
  137.2758026123047,  83.721435546875, 
  137.26577758789062, 83.73599243164062, 
  137.26414489746094, 83.8265151977539, 
  137.2293701171875,  83.90320587158203, 
  137.23199462890625, 83.95570373535156, 
  137.216064453125,   83.9999771118164
];

/* array buffer of indices, two for each edge */
var index_array = [
   0, 1,
   2, 3,
   3, 4,
   4, 5,
   5, 6,
   6, 7,
   7, 8,
   8, 9,
   9,10,
  11,12,
  13,14,
  14,15,
  15,16,
  16,17,
  17,18,
  18,19,
  20,21,
  22,23,
  24,25,
  25,26,
  26,27,
  27,28,
  28,29,
  29,30,
  30,31,
  31,32,
  32,33,
  33,34,
  34,35,
  36,37,
  37,38,
  39,40,
  41,42,
  42,43,
  43,44,
  44,45,
  45,46,
  46,47,
  47,48,
  49,50,
  50,51,
  52,53,
  54,55,
  55,56,
  56,57,
  57,58,
  58,59,
  59,60,
  60,61,
  61,62,
  62,63,
  63,64,
  64,65,
  65,66,
  67,68,
  68,69,
  69,70,
  70,71,
  71,72,
  72,73,
  73,74,
  75,76,
  76,77,
  77,78,
  78,79,
  79,80,
  80,81,
  81,82,
  82,83,
  83,84,
  84,85,
  85,86,
  86,87,
  87,88,
  88,89
];

conversions.js

/**
 * Converts spherical web mercator to tile pixel X/Y at zoom level 0
 * for 256x256 tile size and inverts y coordinates. (EPSG: 3857)
 *
 * @param {L.point} p Leaflet point with web mercator coordinates
 * @return {L.point} Leaflet point with tile pixel x and y corrdinates
 */
function mercatorToPixels(p)  {
  var pixelX = (p.x + (EARTH_EQUATOR / 2.0)) / (EARTH_EQUATOR / TILE_SIZE);
  var pixelY = ((p.y - (EARTH_EQUATOR / 2.0)) / (EARTH_EQUATOR / -TILE_SIZE));
  return L.point(pixelX, pixelY);
}

/**
 * Converts latitude/longitude to tile pixel X/Y at zoom level 0
 * for 256x256 tile size and inverts y coordinates. (EPSG: 4326)
 *
 * @param {L.point} p Leaflet point in EPSG:3857
 * @return {L.point} Leaflet point with tile pixel x and y corrdinates
 */
function latLonToPixels(lat, lon) {
  var sinLat = Math.sin(lat * Math.PI / 180.0);
  var pixelX = ((lon + 180) / 360) * TILE_SIZE;
  var pixelY = (0.5 - Math.log((1 + sinLat) / (1 - sinLat)) / (Math.PI * 4)) * TILE_SIZE;
  return L.point(pixelX, pixelY);
}

tile_8_137_83.json