Hi,

Don't want to flood forum but " Isometric Terrain (2D) generation " would be misleading for this question. Thanks to responses at other question, seems viable option for terrain (at a browser game) is generating 3D terrain on serverside (as fallback, might also implement 3D terrain via webGL in future) then integrate elements like buildings, trees etc as prerendered 2D assets.

So the current plan is something like (took image from another site but explains the situation)

Doubt can achieve such quality but as style I aim for something like at SimCity 4

According to my search, if I am not mistaken there are two approaches, one is using mouse maps (seems to apply for limited number of slopes) and raycasting (for fully 3D terrain)

But the problem is 3D prerendered terrain is none of these, so I am not sure how to handle mouse picking problem

So I'd appreciate some help. I will not start from map itself to build game (its browser game after all) but need to clarify data structure before.

If all you have is the 2D image of that 3D rendered terrain then you have lost information and it is impossible to work out which cell the mouse is over just using maths.

You would need at a minimum the positions of the vertices of each cell in order to work out which cell the mouse is over. Look at the shapes of the cells in your second screenshot. There is no way to mouse pick on those without information about each cell position since in 2D they follow no pattern you can replicate without the additional dimension's data.

If all you have is the 2D image of that 3D rendered terrain then you have lost information and it is impossible to work out which cell the mouse is over just using maths.

You would need at a minimum the positions of the vertices of each cell in order to work out which cell the mouse is over. Look at the shapes of the cells in your second screenshot. There is no way to mouse pick on those without information about each cell position since in 2D they follow no pattern you can replicate without the additional dimension's data.

Indeed, it is not possible to get that solely from an 2D image, and as maps are generated only once (by me) have no problem with having any data related to geometry.

If I am not mistaken, projection of vertices will always be a grid so only their elevation differs. In that case all I need is height value of each vertice (isn't it?)

So I also need to get positions ( x , y ) of each vertices at 2D image? (like drawn grid at screenshot #2)

If so, I am not sure what's next.

If you generate the 2D images from 3D data, you could bake out an additional image or channel (e.g. the alpha channel, if it isn't used in your current image) with height information during the 3D -> 2D process. This would have to be quantized (e.g. to 256 values if using a single 32 bit channel), but it should work well enough, I'd think.

If your creating this height information, it can have be pixel perfect, or it can be further quantized (with some sort of interpolation between points) if smaller sizes are needed.

If you don't generate the 2D images from 3D data, you'll have to create the height information some other way, e.g. manually creating something that seems to fit the landscape. This will probably include quite a bit of adjusting and iterations to get right in all places, and sounds quite tedious.

If you generate the 2D images from 3D data, you could bake out an additional image or channel (e.g. the alpha channel, if it isn't used in your current image) with height information during the 3D -> 2D process. This would have to be quantized (e.g. to 256 values if using a single 32 bit channel), but it should work well enough, I'd think.

If your creating this height information, it can have be pixel perfect, or it can be further quantized (with some sort of interpolation between points) if smaller sizes are needed.

If you don't generate the 2D images from 3D data, you'll have to create the height information some other way, e.g. manually creating something that seems to fit the landscape. This will probably include quite a bit of adjusting and iterations to get right in all places, and sounds quite tedious.

Thanks for response, will dig out three.js for canvas and software renderer options as well, maybe can implement a height layer and raycasting on canvas.

At the moment (of design phase), all I need to know was if it is doable (seems so) and can be done solely by height data.

As each tile is same sized on projection like shown below

Then no problem at data structure apparently.

Just not sure how to implement transition graphics when assets are adjacent like moss wall between Sphinx and train station at Simcity 4

but its not about terrain but texture layer on top terrain, so will figure out somehow.

I think that lactose is on the right track. Try to render the surface id to an additional texture channel or best to an additional texture. I use this technique in my rendering engine for picking. The quality and ease of the picking depends on how much resources you want to sacrify. Eg. if you only want to use the 8-bit alpha channel, then you will have a hard time, if you use eg. an additional 32 bit texture, you could use an generous encoding like this:

8 bits: type (terrain,tree,building)
if type==terrain then
  12 bit: x coord of tile
  12 bit: y coord of tile
elseif type==building then
  24 bit unique id, lookup in hashmap
elseif type==tree then
  -- generic tree, ignore
end

If you want to pick an object, sample this texture around the mouse position (eg 3x3 or 5x5 samples), use a weighted rating, and take the best rated id to avoid selection-flickering (more advanced: remember the last picked id and add a bonus to the rating).

An additional tip:

If you only transfer the image, you can use the png format and add an additional chunk for the hidden id information. Every browser will be able to display the image and you could extract extra information if necessary.

PS:

You could go so far to even highlight the ids in the displayed image, this way you don't even render a single 2d asset in the browser (maybe only dynamic one).

I think that lactose is on the right track. Try to render the surface id to an additional texture channel or best to an additional texture. I use this technique in my rendering engine for picking. The quality and ease of the picking depends on how much resources you want to sacrify. Eg. if you only want to use the 8-bit alpha channel, then you will have a hard time, if you use eg. an additional 32 bit texture, you could use an generous encoding like this:

8 bits: type (terrain,tree,building)
if type==terrain then
  12 bit: x coord of tile
  12 bit: y coord of tile
elseif type==building then
  24 bit unique id, lookup in hashmap
elseif type==tree then
  -- generic tree, ignore
end

If you want to pick an object, sample this texture around the mouse position (eg 3x3 or 5x5 samples), use a weighted rating, and take the best rated id to avoid selection-flickering (more advanced: remember the last picked id and add a bonus to the rating).

An additional tip:

If you only transfer the image, you can use the png format and add an additional chunk for the hidden id information. Every browser will be able to display the image and you could extract extra information if necessary.

PS:

You could go so far to even highlight the ids in the displayed image, this way you don't even render a single 2d asset in the browser (maybe only dynamic one).

Sorry for no earlier response, thanks for reply. Let me see how these fits into three.js

Maybe I switch to a solution, canvas or even DOM fallback for just viewing, but mandatory webGL for more.

For now, I am happy with knowing what I need. Thanks again.