Generate isometric tiles from flat textures - iteration

Question

Is there a simple tool (or code) to generate isometric tiles (cubes format) from using 1 or 2 (side/top) textures:
For example taking Minecraft grass top and side texture:
And generating a isometric result as:
I have a folder containing all blocks textures (top and side if needed, blocks can be top/side identicals)
I want to iterate and generate all isometrics blocks from this input, saving them as .png files, but I don't know how to join textures and generate this.
Is there an existing software, api, cli tool that I would be able to call from my iteration script ?

Answer 1

For a simple 3D cube like this, you can follow the ImageMagick documentation:
convert \
\( tile_top.png -alpha set -virtual-pixel transparent \
+distort Affine '0,512 0,0 0,0 -87,-50 512,512 87,-50' \) \
\( tile_left.png -alpha set -virtual-pixel transparent \
+distort Affine '512,0 0,0 0,0 -87,-50 512,512 0,100' \) \
\( tile_right.jpg -alpha set -virtual-pixel transparent \
+distort Affine ' 0,0 0,0 0,320 0,100 320,0 87,-50' \) \
\
-background none -compose plus -layers merge +repage \
-compose over isometric_cube.png

Answer 2

If you don't care if your source image turns into a blurry mess, then sure, use whatever 2d scaling/transform method you want. Try rotating a low res texture a non-multiple-of-90 degrees and see what happens -- it's ugly.
If you want the result to look pixel perfect, then you need to use a (decent enough) 3d renderer for the projection -- and disable antialiasing.
I'm willing to bet Blender could do it and that would be free, although I haven't tried doing it in Blender. There's probably a way to do it any 3d renderer that lets you adjust a camera completely.
You put the source square texture on a square flat 2d surface, then render it with a created camera set to orthographic (not perspective) and angled appropriately -- in your case, since the tiles look dimetric to me, rotated to either side 45 degrees and also 30 degrees down. That'll give you a pixel perfect render that you can just save to file or copy to clipboard for editing in whatever image software you want -- you'll still need to add an alpha channel to it, for example.
If you get the camera angles right, you just need to play with the camera distance a bit to get your source object+texture to fit in the render window, and the height to center it -- but it's not a lengthy or difficult process since you already know what size you want it to be and centering isn't hard either. Even with the distance too far, it'll still look mostly right -- just too small. So then you simply move the camera closer to the target object (in local coordinates so the angles don't change) and re-render and repeat as necessary. You only have to do this step once by hand, after that you load the saved scene in Blender/3ds Max/Maya/Whatever and swap the texture.
Here's a good online tutorial for doing exactly what you want in 3dsmax, but again I think it would pretty much work in any actual 3d renderer that gives you complete control over the camera:
http://www.pixelpilot.dk/isometric.htm
Note that if your tile has height above the 0 plane (your example does), then you'd have to take that into account -- might want to start with something simpler and get that working and understand it first before tackling height.
This really truly is the only way to do it right and get consistently good results. The only alternatives are: a) be a gifted artist and just hand draw your sprites b) have sprites so low in resolution that it doesn't require any noteworthy level of skill.
Otherwise, like the rest of us, you model it in 3d first and then render it to get a projection, then touching it up in an image editor by hand after the heavy lifting is done.
Hope that helps.