# Mapmaking Discussion & Philosophy (WIP/Critique) > General and Miscellaneous Mapping >  Augmenting 2d maps for game engines

## ArtbyV

Does anymore on here have any experience with taking drawn 3d maps into an engine like Unreal or Unity and adding tessellation or normal maps to make them pop and look more 3d? I've checked on some of the major 3d sites and couldn't find anything. Was wondering if anyone here has any experience with it.

----------


## Robbie

Do you mean to make the map into a playable level?  If so, then that's what I'm doing for my challenge entry: https://cartographersguild.com/showthread.php?t=35001

I can explain my workflow for getting the walls extruded from the 2d map if you like?

Also, I moved your thread to the new level design subforum  :Wink:   Thanks for giving me a thread to make it not empty  :Wink:  I may need to do some moving around of things from the 3d modeling sub forum.

----------


## Redrobes

The way I am led to believe it works (or at least used to work) is that the terrain for 3D game engines is done with super high res textures and loads of texture maps to make it look great then they capture that set up and render out some maps which "bake" in most of the texturing into one map and at the same time the high definition 3D ness of it is extracted out and the underlying polygonal mesh is simplified and the normal maps are applied back to them so that it appears as tho the high resolution terrain is there again but this time with much less work on the graphics engine.

Some of the newer engines compute the terrain now on the fly using the graphics processor by having a huge and complex shader running. The shader takes data from textures as before but its not so much now about absolute colour maps and normal maps but data maps that are injected into the shader and used as a basis to generate the terrain. The one I am most familiar with for that is Outerra which is very cool and since free to play with go have a look. But the program to convert your 3D terrain into the data maps to drive its engine is not released and you would have to speak with Cameni over on the boards there.

I dont have personal experience with unity etc. I believe the avenue you need to head down is via Blender because I believe it has that normal map extraction built into it. Not 100% sure of that but I think so.

BTW: Robbie - if you click that link then your no longer logged in. We must fix the www issue.

----------


## ArtbyV

Sort of. I'm creating this for an actual game, but what I'm actually doing is trying to just take a flat 2d map and add some effects to it in a 3d engine so it looks more 3d.

I've seen it in a lot of games, but Fire Emblem is the only one I can currently think of. Here are a couple of screen shots:





The trees and such are either sprites or actual 3d models. What I'm most concerned with is getting the contours of the ground to pop up. Like the mountains and such.

I'm sure a lot of companies do this using tessellation. Do see what it is and what I mean, take a look at this video. Fast forward to 2:30 to see how it makes a smooth sphere "look" 3d. I want to take the same principal and use it on a flat 3d map to pull up hills, mountains, and such.

I'm fine on the 3d modeling end of things, thanks. If you need anyone to bounce ideas off of, I'm happy to help. Making a 3d model of your map actually wouldn't be that difficult.

----------


## Redrobes

I get what your asking about now. Thats the dynamic tessellation with displacement mapping from a texture. Actually getting the texture to make it do that job is going to be a challenge without a 3D object scanner. I have a 3D scanner and I did a map for one of the monthly challenges years and years ago (yikes Aug 2008 maybe...) where I just manually subdivided up a mesh and displacement mapped it. But this is where it looks at the displacement map and auto tessellates it based on the differences needed.

I'll see if I can get a link to my challenge map but your issue is going to be getting the displacement map I think.

EDIT: Ahh it was this one but not may pictures being loaded now...
https://www.cartographersguild.com/s...ead.php?t=3079

Yanked the old plasticene model photo from the backup drive...


Laser scanned into height map - grey values not correct until you click on it. Something about GIMP again...


Then you use that to displace a high res mesh. I think thats what your asking about. I think the guys who make games do a lot of great high detail 3D modelling and extract this height map from the model and apply it to a lower res poly model so its more dynamically displaced but thats not really necessary for what your requiring.

----------


## ArtbyV

Is the first pic a flat plane and the texture raises it up? If so, I didn't realize tessellation was around that long ago... But yeah, that's basically what I'm trying to do.

I've tried doing it in Crazybump to extract the height map, but it doesn't come out right. I would just manually make the height map using NDO in the Quixel Suite, but they don't make it for Mac.  :Frown:  Doing it manually is just a real pain. Plus, I need to finish my map style first so I have something to test it on more.

----------


## waldronate

If you're doing a tile-based system as shown in the example screenshots, you would presumably have a material map for the overall level that specifies which tile to use at each pixel of the material map. You could then use a similarly-sized height map to store the "up" coordinate offset to push the corner height values around. As long as you don't go too extreme in the offsets, you wouldn't need to worry about texture stretch too much. You can do a fetch and add in the vertex shader for the displacement of the tile geometry. You can even tessellate things if you don't just want straight polygonal tiles, but a nice bump map (used as a parallax bump map) or even a basic normal map can spice up the interiors without resorting to tessellation.

----------


## ArtbyV

It actually isn't tile based. They want hand drawn maps. There is a grid built into the game, but it is basically just an overlay. Tiles would definitely be easier, but I'm not the designer/programmer.

This thread popped up on Google search and was kinda what I was after: https://www.cartographersguild.com/s...ad.php?t=22049

The game is using a flat map with tokens on it and is in a 3/4 perspective so a normal map wasn't looking right. I should try with a parallax bump map.

Here's the flat map I did today quick that I'm doing some testing on.

----------


## ArtbyV

So I've done a lot of tessellation tests and I just couldn't get it to work right. I think I'm just going to stick with normal mapping. Here's the map "in game".



EDIT: Normally mapping here was just done quick with Crazy Bump which didn't produce great results. I need to do some more work there. I'm thinking the Quixel Suite–specifically NDO–would work good for this.

Here's a post on the game for anyone that is interested: http://knightmayorllc.tumblr.com

----------


## Katto

Sorry, but don't understand the problem and I've read the thread a few times. Call me stupid.
You just need to draw a heightmap of the map you want to use and add the trees as separate props.
I don't know Unity or Unreal engine, but from the linked video it seems like it is the same as with every other 3D package.
Here is a Wilbur heightmap quickie:

----------


## johnvanvliet

I use "shape form shading "  for photos 
an example from a different forum i posted a bit back 

textured and mesh only 
     

this is the original image
http://photojournal.jpl.nasa.gov/catalog/PIA19899

http://photojournal.jpl.nasa.gov/jpeg/PIA19899.jpg

but this dose not work well for most hand drawn things 

some can be done ,after a bit
https://www.cartographersguild.com/s...l=1#post262058


a dungeon type map ?

start with hand painting a displacement map 

there are some tools that ?? say ??? they can convert a image to a normal map ???
-- they DO NOT really work  well except for a few things 
like crazybump and "NormalmapGenerator" 
http://www.crazybump.com/   -- NON FREE 
http://crazybump.com/buy.html

https://github.com/Theverat/NormalmapGenerator

----------


## ArtbyV

So the problem is trying to get 3d elements on the map without using multiple meshes. To keep frame rate and such down, they just want to use a single plane as the mesh. So no separate meshes for trees, mountains, hills, or elevation. 

I tried Crazy Bump. I have the paid version and I use it for a lot of stuff and it works great. Just not that great for hand drawn maps. I'll have to look into Wilbur. Never heard of it before, but I've seen other people use it on here and they are getting good results. 


Sent from my iPhone using Tapatalk

----------


## Redrobes

> So the problem is trying to get 3d elements on the map without using multiple meshes. To keep frame rate and such down, they just want to use a single plane as the mesh.


If thats the reason then its crazy. If you want the frame rate high then your much better off having one tree as a mesh and reusing it rather than to send down one enormous tessellation with trees baked into it. The game images that your showing do not seem like the sort of thing that would cause an issue with the frame rate unless your using hardware that is very slow in which case thats even more of a case of not using a large mess for tessellation.

Regardless of what the mesh actually has on it have you tried some speed tests between rendering trees and one large mesh ? People generally use one large mesh for terrain when the terrain has a lot of detail in it. When the trees are all identical then thats when it makes no sense to make one mesh with virticees that are duplicated over it.

----------


## Katto

OK, I see.
This is a quick heightmap made from your posted map. Of course you need to add more gradients and variations to the shapes. You can then add an additional normal map for finer details. Creating organic shapes like trees is impossible with a heightmap, but you can add stylized ones using cones for example. Walls and houses should be possible. It all depends on the overall scale. Use a 16-bit greyscale map to avoid stairs effects.
I don't think the one mesh thing makes sense, but it would be interesting to see the results.
Hope it helps  :Smile:

----------


## ArtbyV

> If thats the reason then its crazy.


Well, to be fair, it isnt the only reason. The final game is supposed to look more like a boardgame. As you can see in the pics, the game pieces that represent units are 2d tokens. They are walking the line between boardgame and something slick with mock 3d elements.




> Regardless of what the mesh actually has on it have you tried some speed tests between rendering trees and one large mesh?


I have not done speed tests. I did suggest doing the ground as a single mesh and doing separate meshes for trees, but there was concern that adding those as 3d elements might make the game pieces look bad and there is no desire to replace those with character models. The other issue is how can a flat game token sit in an elevated wood. Its pre-alpha so this is all style experimentation.




> OK, I see. This is a quick heightmap made from your posted map. Of course you need to add more gradients and variations to the shapes. You can then add an additional normal map for finer details.


I appreciate you taking the time. Thanks man.

So do you just do edit the heightmap directly in Photoshop? I never tried editing heightmaps by hand. When I do, I get massive changes to the surface. Maybe Im too heavy handed, but I feel like I have no control over it.

Heres a test I did using tessellation in Unity.



Trees look decent, but the mountains are terrible. Still trying to figure out how mountains and hills are going to look. Mountains are impassable, so no problem with token placement, but trees and hills are elevated. Trying to decide if the pieces will break the 2d plane or not. Here is what I was thinking for the hills, but I'm not sure I like this.

----------


## johnvanvliet

as in post #14 

you can separate objects and make a pseudo heightmap 
the lighter the black and white tone the higher the pixel 

I am ASSUMING that the brown bit is a creak bed and not a road  
-- OR is it a road 

 

this can be rendered in any tool ( i use blender )

  


i used the Gmic plugin in gimp and the "local similarity mask "

----------


## ArtbyV

> you can separate objects and make a pseudo heightmap 
> the lighter the black and white tone the higher the pixel


That looks great! Much more what I am after. I appreciate you taking the time.

I _should_ just be doing this in Maya with a height map. I don't have the Unity files on my computer to test, and it would make a lot more sense to test this locally.  :Embarassed:  




> I am ASSUMING that the brown bit is a creak bed and not a road  
> -- OR is it a road


Kinda looks like a creek bed, but it is a road. I thinking of switching to bricks or some sort of cobblestone for clarity.




> i used the Gmic plugin in gimp and the "local similarity mask "


That plugin looks pretty slick. I'm using Photoshop CS6, but I might just download Gimp and give it a try. Thanks dude!

----------


## johnvanvliet

Gmic has come a LONG way in the last few years 

it is basically my "swiss army knife" tool

----------


## ArtbyV

So after tons of tests, it turns out that old school flat map is what worked out the best for the game. Though I did learn some techniques with both height maps and tessellation that could be used for another project at a later date. Here's the final map I did for the demo/proof of concept level.



It's not perfect by any means, but I think it works well enough.

Here's it is in game working with the movement, combat, and conversation systems.




It does get rather pixelated in the battle screen, so that will be something that needs to be addressed if the game ever makes it to full production.

----------

