We are back in the mountain terrain. In the last post about it I was pretty confident with my approximation of its 3.5e visual style. However, “Theory and practice sometimes clash. And when that happens, theory loses. Every single time.” (L. Thorvalds, 2009). After trying out my design on more complex mountains, I found that tight turns of the flank geometry were rather common and caused notable fanning and self-intersections within the wide dotted flank lines. Even with significant manual optimization, the results were not really satisfactory. Drawing each flank line as an individual line object allows for more fine-grained control of the line placement at the cost of increasing the data size. Given that single mountains can contain hundreds of flank lines this increase might have some impact on the svg size, but at this point I do not see a way around it.

With that in mind, here are the new problems that need to be solved:

• Given an outline and a ridge, how can we place roughly evenly distributed lines between the two?
• How can we adjust these automatic lines to conform to the features on the drawn map?
• Come up with a way to annotate/generate the required data within an svg drawing software (i.e. Inkscape)

Connecting “Outer” and “Inner”

Going back to an uncomplicated example, a basic mountain is defined by an outline polygon and a polyline marking its ridge (We will ignore branching side ridges for now). Flank lines start at the outline, end at the ridge, and are placed roughly equidistant from each other while following the mountain’s shape. Notable exceptions are the ridge endpoints, where several flank lines join at (or at least very close to) the end of the polyline.

One way of simplifying this situation is to treat the ridge line as a polygon with no area. One side of this polygon follows the ridgeline from e.g. the upper endpoint to the lower one, and the other side follows the ridge in reverse, ending at the starting point. Now we have an outer and an inner polygon with the task to draw lines from one to the other. A naive approach would be to define a single flank line as starting point on the inner and outer polygons, then subdivide each polygon into the same number of pieces, and then draw the connections between these subdivisions.

It’s a decent start and, close to the starting flank, things seem to work. However, since the outer polygon does not perfectly follow the shape of the ridge, flank lines get out of sync the farther away they are from the defined starting point.

Instead of continuing to the automatic creation of mountain terrain shapes, I got sidetracked into approximating the visual style of the foothills that surround most mountain ranges of the map. While their style is relatively simple, hills are by far the most annoying type to trace due to their sheer number on the map (1681 to be exact) and their overlap with other terrain types. But let’s discuss the two visual elements of the style, outline and fill.

Outline

Hills are mostly defined by their dashed outline, which are effectively short versions of the flank lines of the mountains terrain. Together with the overall smooth round shapes of a majority of the hills, this means we can just use a wide line with an appropriatly spaced dash pattern to recreate the effect. Since the hill lines themselves have rounded ends in the original we have to apply a slight blur filter to achieve the same result in the svg style.

It is finally time to tackle the most visually complex terrain type of the 3e map, mountains. The peaks of Faerun are made up of three image components; the outline, which confines the mountains background color, the main ridge line(s), separating illuminated from shadowed sides of a mountain, and the (somewhat) orthogonal flank lines, which connect ridge and outline. It’s the latter that will be the most difficult to approximate, even for simple mountains.

This terrain has a few added twists that make things even harder. A mountain’s background color is influenced by the surrounding terrain, e.g. mountains in forests and jungles might have a greenish tint, while mountains on glaciers sport a white-gray palette. Tall mountains feature white snow areas around their main ridge lines, while volcanoes interrupt the ridge to indicate active craters. Finally, the main ridges may sometimes branch, creating entire side mountains. All of these are special cases that our svg style needs to handle (or at least roughly approximate).

As described in the previous post, we now have access to a programmable svg parser/generator, that we can use to automatically create intermediate features. I will use it to reduce the amount of vector information needed to create visual mountain representations. The idea is to only define outline and ridgeline (with some extra points), and use this data to automatically create all the finer details of the mountain. Before getting to this automatization stage, let’s go over the general concept with a manual example, specifically the Troll Mountains in the east of Amn. We start with the general outline of the mountain area and the branching ridgelines (slightly smooth-filtered to fit with the rest of the map styles):

This representation looks obviously completely flat, compared to the original image which uses different color and line features to separate illuminated flanks of the mountain from shadowed ones. The “sun” is located in northeast of the map, so we need to shadow any flanks facing in south and west direction. Branching ridges and steep turns can sometimes introduce a change of lighting within a continuous mountain flank, the Troll Mountains would be split into 6 coloring regions:

While Scalable Vector Graphics (SVGs) are very powerful when it comes to creating 2D image and map representations, they are not the first choice for encoding geospatial data. Many of the fancier graphics options are simply not needed in a file format to store accurate geographic information. Surveying in the real world mainly deals with straight lines between known latitude-longitude coordinates, so curve options are often omitted. This is one reason why I currently rely on filters to smooth the otherwise edgy shapes on my 3e WIP map. But… since why deal with geospatial formats in the first place? There are a few good reasons to keep them in mind early on:

• Global frame of reference Unlike svgs, geographical data formats usually operate on a latitude-longitude coordinate system. This makes it easier to align different map artifacts with each other on the common globe map. Any scale or orientation differences are directly stored in the shape coordinates.

• Framework support While map visualizations apps, like openlayers, often support svgs as map input, they are typically treated as images and not native vector features. This means that a lot of the functionality around vector shapes, e.g. the ability to edit them on the maps, is unavailable.

• Data convertibility Using a standardized format also enables the conversion of data into forms readable by general geographic information system (GIS) applications. This allows users to edit the data with the software of their choice (or whatever they have access to).

Ideally we want to be able to switch between formats to take advantage of svg editing apps and high-quality rendering, and the platform support of geospatial data formats. To that end, I have decided to write my own (Inkscape) svg to geojson converter in javascript. Let’s take a quick look at the differences between these formats.

The 3e map features three wetland terrain types that all share a few visual features, despite different overall coloring. All of them use a double outline that is broken at random intervals, swamps and marshes share some stylized tufts of grass placed in concentric alignment. Moors are instead colored gray with some grainy green patches.

Swamps

The biggest challenge was to create the concentric swamp/marsh grass rings, and after several different approaches, I have to concede that creating these shapes with filters and turbulence patterns alone is too complicated. But let’s start at the beginning with the swamp terrain. Smoothing the outline of the shape with a blur/threshold operation is a given at this point. We can use the resulting rounded shape and some morphological filters to create two parallel outlines:

Now that we have some of the basic terrain types covered, it is also time to think about how to combine data sources and view them efficiently. On the data end, I have started to trace terrain types from the 2001 3e map to gain complete paths for oceans, lakes, plains/grasslands, and jungles/forests. This map is limited to the continent of Faerun and since a full world map is a goal down the line we need to place it on the globe. Fortunately, Toril is about the same size as Earth (see Dragon Magazine #161, pg 89) so current geoinformation systems can help us out. D&D 5e did not include a complete world map, so the best base map is, to my knowledge, still the one published in the Forgotten Realms Interactive Atlas. The 2D map of the atlas is not complete in the north and south directions and omits latitude and longitude lines, but it does come with an interactive globe that we can use to place it on the right spot:

Marked are two critical spots I picked to line up the map’s latitudes: the island north of Icewind Dale at 60° North and the Corsair Domain islands at the Equator. Many adventures play on the sword coast, so getting this part of the map “correctly” placed seems sensible. Even within the interactive atlas, some map regions don’t line up. Along the equator, for example, on the globe, Maztica is placed further south than on the 2D map and has a different size (though since those regions are hardly explored, poor maps are to be expected). With that information, we can attempt to add a lat/long graticule to the 2d map:

With the most basic terrains (oceans and plains) out of the way, it’s time to tackle the more complex overland styles. Forests and jungles are visually very similar styles. Jungles are slightly more complex so we will focus on approximating its style first and then adjust the style to fit the forest coloring.

Shape

We’ll start with the “self-imposed”, but still importent problem of area shapes. So far we have smoothed the outlines of jagged svg paths to get a more pleasing shape at different zoom levels. In the case of jungles and forests, we actively want to deviate from smooth curves by adding some blubous protrusions. By adding these outline details with a filter, we will be able to add outline freatures at higher zoom levels without having to change the svg path. A simple way of achieving the effect is to add a turbulence pattern to the blurred outline before thresholding with a color matrix filter:

“Cleared/Mix” (which i like to call “plains” for simplicity) is the default style for land areas on the Faerun map. Only some of the smallest islands avoid using this style, though arguably it is still present below the native terrain of e.g. the frozen isles of the Sea of Moving Ice. Visually, plains are made up of two main elements: the beige background with its faint darker-colored blots and the randomly placed dots covering the area. “Grasslands” use the same style with a light green tint.

Background Blots

Let’s start from the simple land style with smoothed path outlines and a coastline (i.e. the results of the oceans - deep dive post). Plains are filled with a light beige (#fbefdf) background color, with the other two features displayed on top.

One problem that I have so far brushed aside is that of map continuity between the editions of D&D (thanks to everyone contributing to the reddit discussion). While there are always some changes due to in-world events and the passing of realmtime, some editions introduced unexplained geographic shifts. Third edition is especially notable, as it reduced the map size and reshaped landmasses, presumably to make the continent less boring by bringing interesting places closer together (and more compact for editing/printing). Ignoring the cataclysmic changed of 4E, 5E reshaped the realms back to their second edition form, but not necessary to the same size. Instead of retreading topics that have already been discussed, I’ll redirect you to some excellent blog posts about the map history by the authors of ninelizardsblog and spriggan’s den.

Since I am a player of D&D 3.5e this introduces a dilemma. Should I create a map that only serves the community of an older edition or adopt the more canoical correct map layout?

Let’s start from the bottom with the “oceans” style, which contains all large bodies of water. From a visual perspective, this style is relatively simple and made up of four different elements that we need to replicate with SVG styles: Dark blue deep sea, transitioning over a lighter blue Continental shelf to an even brighter area of coastal waters before reaching the solid blue shoreline.

Deep sea

The lowest layer of the map, geographically and also in the svg. It can be represented by a solid blue (#c2d6ed) background area.

To start, we can group the different area types shown on the map based on similarities of their drawing styles. The legend of the map is a helpful indicator which styles need to be covered (though it does not include every style present on the map).

Oceans

Oceans form the bottom layer of the map and are fortunately not a very coomplicated style. They start at a solid blue coastline, being light blue very close to the coast, slightly darker blue on a continental shelf and dark blue in the deep sea. Coastal water regions can be generated based on the outline path of the continent, but the continental shelf will require a separate path due to it’s varying distance from the coastline. Fortunately, the gradient from coastal to shelf waters is wide, so it can be approximated with a coarser path and then smoothed over.

Plains and Grasslands

Plains (or “Cleared Land” in the legend) are the beige-colored default style for land masses on the map. Visually, it is a mix of random dark-beige blots on a beige background and some random tiny dots. Both of these effects can be generated by applying turbulence/fractal noise filters of svg objects. While the random dots could also be created as svg objects, using a variation of the “starry sky” effect is more space efficient.

Grasslands are a slight color variation of plains with a wide and smooth color transition. The effect can be generated by adding a color overlay with blurred edges.

Swamps, Marshes and Moors

Swamps and marshes feature a single colored backgroud, while moors have a random 2-color pattern similar to the ones found in the plains style. What unites these styles are the double outlines with random breaks. While this could be solved with two offset outline paths with dashed-lines, ideally we would want a filter to generate the effect on purely the original area path. Similarily, we have to find a way to randomly generate the grass bushles in the swamp and marsh styles.

I have decided that a small blog is a better way to keep track of progress than the repo’s wiki page. So, welcome to my hobby project to create a vector map of Faerun (possibly extended to Toril) during the time of D&D 3.5e (~1376 DR). The idea is to approximate the iconic drawing style of the official 2001 map using a combination of svg path generation scripts and filters and then apply them on an svg map, containing only the outlines of geographic regions/features.

Ideally this should have the following benefits:

• Simple Editing: Changing existing features of the map or adding new ones can be done in an SVG editor.
• Small Filesize: With some clever encoding of the visual map style even high detail maps should keep a small filesize.
• High Quality Zoom: SVG enables creation of detail maps without getting pixelated results.
• Merging of Different Sources: Detail maps of specific regions exist and the vector format should aid in the combination of different map sources.
• GeoJson, TopoJson output: Vector data can be used in online map interfaces like Open Layers