Home
A hobby project to create a vector map of Faerun (possibly extended to Toril) during the D&D 3.5e (~1376 DR). My approach 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.
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.
- High Quality Zoom: SVG enables creation of detail maps without getting pixelated results.
- Merging of Different Sources: Detail maps of specific maps 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
- 03 2024: Started with the two most common area types, ocean and plain lands.
- 03 2024: Investigated rendering differences of svg filters between Chrome and Firefox (some Gaussian filters will need to be changed to get the desired result in Firefox)
The first step is to recreate the drawing style of various map regions in svg format. A side objective here is to be efficient and use filters rather than additional geometry wherever possible, to keep the file-size small and the data close to geo/topoJson format.
This is a breakdown of the main region types we need to cover, with examples of the original map and the current svg style where available:
Basically the lowest layer of the map made up of 4 sublayers:
- A single color dark blue for deep ocean
- A lighter blue continental shelf region extending from the coastline (varying shelf width, so a separate shelf outline will likely be needed).
- A second color plateau close the the coast (minor width variations, can be generated from coastline path)
- A narrow blue line denoting the actual coastline (currently handled in the plain land, possibly a separate object on top of other land types later on)
Current Results (original png, svg approximation, svg input shapes/background):
Default layer of continent/island shapes:
- Minor random color variation between 2 brown tones (recreated with a turbulence filter and a color transfer function)
- Brown dots randomly distributed over the area (to avoid geometry, this is also be created with turbulence and color matrix filters, but needs separate filter settings to work in Firefox)
- Input should ideally be polygon paths with hard edges, but the coastline can be smoothed using a Gaussian blur and color threshold filter.
- The blue coastline is currently drawn as part of this object, but might need to be moved to a separate layer later one (to interact properly with other land types)
Current Results (original png, svg approximation, svg input shapes/background):
A color variation of plain lands:
- Semi-transparent and blurred area placed over plain land.
Current Results (original png, svg approximation, svg input shapes/background):
Jungles and forests use two different shades of green but otherwise have the same style features:
- A meandering brown/gray shape outline (this can either be modeled in the data or created using turbulence patterns from a simplified outline)
- A brown/green inner border region tightly speckled with brown dots (can be created using methods similar to continental shelf (border) and plain lands (dots))
- Green fill with varying green tones and dots with slightly higher density than plains.
Current Forest Results (original png):
Current Jungle Results (original png):
The difference between sandy and rocky is denoted by different yellow/brown tones
- Smooth sharp color boundary with very sparse dashed outline (dash array with wide gaps)
- Narrow band of dots and inner border with slightly darker color (similar to forest, but maybe additional randomization to group dots?
- Random groups of dots and in rocky deserts also larger circular shapes with outlines and fill. (can probably be done with combinations of multiple turbulence patterns)
Current Results (original png):
Similar to rocky deserts but with some extra features:
- Double outline with many breaks on the inner line (inner line might need separate geometry, but there might be tricks to reuse the original outline with a different dash pattern and offset it using filters)
- Several very smalls hill markers (will probably need geometry)
Current Results (original png):
- Round (mostly) brown shapes with some shading to give a 3D impression (can use lighting filters)
- Radial lines along the flanks (can be realized as thick outline with narrow dashes and some filters)
Current Results (original png):
- Narrow brown bands with a strong cliff line on one side (area and cliff line need to be separate objects)
- Slightly distorted lines down the flank (possibly created by reusing the cliff line with flank patterns from the hills style, but might need smoother line in the middle of the cliff area.)
Current Results (original png):
Two every similar styles differentiated by blue/green color tones
- smooth outline with sharp edges and single color fill
- Double outlines similar to the barrens/badlands style
- Inner grass patches (can be realized with lines and very sparse stroke patterns, but a geometry free method would be better)
Current Results (original png):
Similar to marsh swamp but without the inner line features
- random gray/green color pattern (can be realized like the plain lands color variation)
Current Results (original png):
Another set of complex styles that will require multiple layers
- Brown area with a ridge line splitting it into two sides of shading.
- The darker side has continuous flank lines, while the brighter one has sparse short lines near the ridge and outlines.
- High mountains have white shading close to the ridge.
- Forking mountain ridges will need to be handled as separate mountain areas. Depth ordering will be important.
- Volcano craters can be created as round shapes with an inner color gradient and an attached cloud.
Current Results (original png):
Ice areas are uncommon, but might have a slight whit blue color variation. Glaciers work similar to cliffs.
Current Results (original png):
Rivers will be difficult to deal with for various reasons:
- Rivers and lakes intersect with other styles and will need to fit in with most of them (there is a light glow around them to increase contrast)
- The estuary area has to blend with the continents coastline, which probably requires the river geometry to extend into the ocean area, with clipping at the coast.
- Svg lines do not support varying widths in a single linesegment, so rivers either need to be modeled as shapes or shown as multiple line segments with decreasing width.
Current Results (original png):
These are relatively simple from a graphical perspective and overlays to the map, so we'll deal with this later.