Isometric Render of a Minecraft Map in Avoyd Voxel Editor

Doug Binks - Juliette Foucaut - 30 Mar 2022

We recently released a video tutorial on how to make an isometric render of a Minecraft map in the Avoyd Voxel Editor, and thought it would be useful for those of you who prefer text over video to write up a short overview of the process here.

This tutorial covers: how to make an isometric render of a Minecraft map in Avoyd, using the arcball camera, tweaking the atmosphere and lighting, tips for using the voxel editor, graphics quality and user interface customisation.

Open the voxel editor

0:05 video timestamp

Start Avoyd and select 'Voxel Editor' in the main menu

TIP - If you want to use only the voxel editor in Avoyd: set Settings > System > Start As = 'Voxel Editor' to skip the start menu and open the voxel editor directly. 0:20

Import a Minecraft map

0:32

Go to menu File > Import > Minecraft Map (*.mca)
Select the directory where you saved the Minecraft map. In our example we downloaded Greenfield City from PlanetMinecraft
Click Open

Once the Minecraft map has been imported, you can close the materials window. You're looking down at the map. When you right-click (and hold) with the mouse and move it, you can look around the scene. 1:04

Set the Graphics Quality

1:13

Under menu Settings > Graphics > Graphics Quality, there are different options for the graphics quality: Very Low, Low, Medium (default), High, Very High and Custom. For a low end PC you may want to use 'Very Low', whereas for a powerful machine you can select 'Very High'.

You can check the performance by activating 'Show Performance'. It will show the framerate. Any value above 30 FPS (frames per second) is satisfactory.

Configure the Isometric Camera

1:37

To get the isometric camera, you must activate the Arcball Camera and the Orthographic Projection.

Open the Camera window: click the Camera icon in the toolbar or menu Tools > Camera
In the Arcball Camera and Orthographic Projection section, select 'Use Arcball Camera'
TIP - You can also right-click to open the quick menu and select 'Arcball Camera' > 'Use Arcball Camera'
Tick 'Orthographic Projection'. This is because the isometric camera is a specific kind of orthographic projection.

Yaw and Pitch Isometric Angles

2:03

Rotate around the vertical 'y' axis (default) using the Yaw value or the yaw presets (left/right arrows) to reach 45 degrees for an isometric view.'

Use the Pitch value (or preset arrows) to go down/up. The isometric angle is 35.264 degrees.

Distance from the Scene

2:24

In the video you'll notice at the bottom of the screen that the map's underground is showing. This is because the distance (the camera is) from the scene is such that it's clipping into the lower layer. To fix this, increase the Distance to Centre (the arcball camera centre) value.

Orthographic Width: Zooming In and Out

2:49

The 'amount of view' in the scene is controlled by the orthographic width value. Increasing it effectively zooms out.

Tweak the Atmosphere

3:02

You'll notice that increasing the distance between the camera and the map has caused the scenery to take on a slight blue hue. This is because there is an atmosphere and the default is, like in the real world, slightly blue.

To tweak the atmosphere:

Open the Light and Atmosphere window: click the Light and Atmosphere icon in the toolbar or open menu Tools > Light and Atmosphere.
To reduce the blue tinge, increase the atmosphere Half Length distance (the distance at which the atmosphere removes half of the value of a colour)

Move the Arcball Camera Centre to get the best Isometric Viewpoint

3:41

To change the position of the Arcball Camera centre:

Left click the map where you want to centre to move to, right-click to open the context menu, and choose Arcball Camera > Centre Here.
Alternatively in the Camera window, you can scroll the map along each of the axes by changing the coordinates of the arcball camera 'Centre' x, y, or z values.

Light: Change the Sun Angle

4:25

In the Light and Atmosphere window:

edit the Light Elevation Angle to move the sun angle up or down (longer/shorter shadows).
Use the Azimuth angle to make the sun rotate around the vertical axis (rotate the shadows).

Once you're satisfied with the scene framing and lighting, you can close the tool windows and hide the UI with Ctrl+M to get an idea of what the render will cover (press Ctrl+M again to get the UI back) and move on to rendering. 5:28

Render

5:41

Open menu Render.

TIP - you can enable dragging sub-windows outside the main viewport by ticking 'External Viewports' in Settings > Display. 5:52

Quick Preview

6:15

Do a quick preview by clicking the Preview button. This is a fairly low resolution, fast render of the scene. You can click Denoise Image which can be useful when you want to quickly look at the lighting (especially from local emissive materials).

Raytrace Scene

6:29

Click the Do Raytrace Scene button to do one pass at four samples per pixel (this takes longer than the preview). You need around 1000 samples per pixels to get an extremely good render (although using denoising can use less). I find that when you have a large amount of water or other transparent materials, the denoising works less well. To do a simple render at 1000 samples/pixel, you need to accumulate 250 times at 4 samples/pixel. Set the accumulation Max value to 250 and tick Continuous. This will accumulate rendering until it reaches 250*4=1000. 7:02

Image File Auto Save

7:30

When Auto Save is on (bottom of the render window), the rendered image output is saved at the end of each accumulation. In case a long render is interrupted, this guarantees the work done so far is saved.

You can open the saved directory to view the result.

TIP - The render is saved as a PNG by default. You can set it to save as a JPEG with custom quality, or both PNG and JPEG in Settings > System. 8:23

Set the Image Size

8:42

At the top of the render screen you can define custom image sizes independent of the display settings. Uncheck 'Use Display Settings' and pick a predefined image size from the drop-down, or enter it manually. Any image size is possible, including 4k and above.

Final Render Result:

Isometric render of Minecraft map Greenfield city v0.5.3, imported and rendered in Avoyd voxel editor.

Other News

We're still concentrating our work on the voxel editor. The latest version of Avoyd came out earlier this month, details about this and previous releases available in our forum and the full change log.

If you use Avoyd to import Minecraft maps: make sure you download and install the latest version of Avoyd and import your maps again to update the block materials and apply all the latest fixes.

We reworked the www.avoyd.com website with a new layout and gallery of images, and put the documentation online. La version française du tutoriel d'introduction est disponible, le reste de la documentation est en cours de traduction.

We started a subreddit, r/Avoyd and a Discord server in English et en français to make it easier to ask us questions, and we put Avoyd on Planet Minecraft. We look forward to seeing you there and in our official forums.

› Python Google App Engine debugging with PyCharm CE
› Lighting voxel octrees and procedural texturing
› Patterns and spheres
› Python Google App Engine debugging with PyTools
› Interview
› Domain masking using Google App Engine
› Octree streaming - part 4
› Black triangles and nervous_testpilot
› Presskit for Google App Engine
› Octree streaming - part 3
› Octree streaming - part 2
› Octree streaming