Intresting task.

Lets try to simplify it - lets resolve this concrete case

Solution

Working version is here: https://github.com/amuzalevskiy/perlin-landscape (changes https://github.com/jorgt/perlin-landscape/pull/1 )

Explanation

First what came into mind is:

Just two steps:

• find an vertical column, which matches some set of tiles
• iterate tiles in set from bottom to top, checking if cursor is placed lower than top line

Step 1

We need two functions here:

Detects column:

function getColumn(mouseX, firstTileXShiftAtScreen, columnWidth) {  return (mouseX - firstTileXShiftAtScreen) / columnWidth;}

Function which extracts an array of tiles which correspond to this column.

Rotate image 45 deg in mind. The red numbers are columnNo. 3 column is highlighted. X axis is horizontal

function tileExists(x, y, width, height) {  return x >= 0 & y >= 0 & x < width & y < height; }function getTilesInColumn(columnNo, width, height) {  let startTileX = 0, startTileY = 0;  let xShift = true;  for (let i = 0; i < columnNo; i++) {    if (tileExists(startTileX + 1, startTileY, width, height)) {      startTileX++;    } else {      if (xShift) {        xShift = false;      } else {        startTileY++;      }    }  }  let tilesInColumn = [];  while(tileExists(startTileX, startTileY, width, height)) {    tilesInColumn.push({x: startTileX, y: startTileY, isLeft: xShift});    if (xShift) {      startTileX--;    } else {      startTileY++;    }    xShift = !xShift;  }  return tilesInColumn;}

Step 2

A list of tiles to check is ready. Now for each tile we need to find a top line. Also we have two types of tiles: left and right. We already stored this info during building matching tiles set.

function getTileYIncrementByTileZ(tileZ) {    // implement here    return 0;}function findExactTile(mouseX, mouseY, tilesInColumn, tiles2d,                       firstTileXShiftAtScreen, firstTileYShiftAtScreenAt0Height,                       tileWidth, tileHeight) {    // we built a set of tiles where bottom ones come first    // iterate tiles from bottom to top    for(var i = 0; i < tilesInColumn; i++) {        let tileInfo = tilesInColumn[i];        let lineAB = findABForTopLineOfTile(tileInfo.x, tileInfo.y, tiles2d[tileInfo.x][tileInfo.y],                                             tileInfo.isLeft, tileWidth, tileHeight);        if ((mouseY - firstTileYShiftAtScreenAt0Height) >            (mouseX - firstTileXShiftAtScreen)*lineAB.a + lineAB.b) {            // WOHOO !!!            return tileInfo;        }    }}function findABForTopLineOfTile(tileX, tileY, tileZ, isLeftTopLine, tileWidth, tileHeight) {    // find a top line ~~~ a,b    // y = a * x + b;    let a = tileWidth / tileHeight;     if (isLeftTopLine) {      a = -a;    }    let b = isLeftTopLine ?        tileY * 2 * tileHeight :       - (tileX + 1) * 2 * tileHeight;    b -= getTileYIncrementByTileZ(tileZ);    return {a: a, b: b};}

Please don't judge me as I am not posting any code. I am just suggesting an algorithm that can solve it without high memory usage.

The Algorithm:

Actually to determine which tile is on mouse hover we don't need to check all the tiles. At first we think the surface is 2D and find which tile the mouse pointer goes over with the formula OP posted. This is the farthest probable tile mouse cursor can point at this cursor position.

This tile can receive mouse pointer if it's at 0 height, by checking it's current height we can verify if this is really at the height to receive pointer, we mark it and move forward.

Then we find the next probable tile which is closer to the screen by incrementing or decrementing x,y grid values depending on the cursor position.

Then we keep on moving forward in a zigzag fashion until we reach a tile which cannot receive pointer even if it is at it's maximum height.

When we reach this point the last tile found that were at a height to receive pointer is the tile that we are looking for.

In this case we only checked 8 tiles to determine which tile is currently receiving pointer. This is very memory efficient in comparison to checking all the tiles present in the grid and yields faster result.

One way to solve this would be to follow the ray that goes from the clicked pixel on the screen into the map. For that, just determine the camera position in relation to the map and the direction it is looking at:

 const camPos = {x: -5, y: -5, z: -5} const camDirection = { x: 1, y:1, z:1}

The next step is to get the touch Position in the 3D world. In this certain perspective that is quite simple:

 const touchPos = {   x: camPos.x + touch.x / Math.sqrt(2),   y: camPos.y - touch.x / Math.sqrt(2),   z: camPos.z - touch.y / Math.sqrt(2) };

Now you just need to follow the ray into the layer (scale the directions so that they are smaller than one of your tiles dimensions):

 for(let delta = 0; delta < 100; delta++){   const x = touchPos.x + camDirection.x * delta;   const y = touchPos.y + camDirection.y * delta;   const z = touchPos.z + camDirection.z * delta;

Now just take the tile at xz and check if y is smaller than its height;

 const absX = ~~( x / 24 ); const absZ = ~~( z / 24 );   if(tiles[absX][absZ].height >= y){    // hanfle the over event   }