There’s one thing about isometric projections that evokes a comfy, nostalgic feeling. Most probably, the offender is the wave of ’90s pixel-art basic video games that etched the aesthetic into our collective reminiscence, from Populous to Transport Tycoon.
On this article, we’ll discover how one can recreate that very same attraction with fashionable CSS. Extra particularly, we’ll look below the hood of the newly launched Layoutit Terrain Generator to find out how stacked grids and 3D transforms will be mixed to create a completely addressable 3D house within the browser.
(If you wish to dive deeper into how the grid 3D construction works below the hood, the CSS Voxel Editor article explores it intimately.)
Behold! A 3D terrain constructed solely with stacked grids and reworked HTML parts: no canvas, no WebGL, simply CSS doing its magic.
Setting the scene
After wrapping up the CSS Voxel Editor, I needed a brand new problem, one thing that pushed the bounds of the stacked grid approach. That’s how I landed on a terrain generator, particularly as a result of it means increasing the form grammar: to make it doable, we’ll have to construct angles and slopes. However earlier than all that may occur, we now have to set the stage correctly.
The .scene factor acts as our digicam mount: it’s the place depth begins with the perspective property. By assigning a beneficiant worth (of 8000px) we get an almost-isometric look with a slight, pure distortion. Each baby of this guardian container inherits transform-style: preserve-3d, which principally ensures that the 3D transforms work as anticipated.
The .flooring factor defines the world’s tilt. By making use of remodel: rotateX(65deg) rotate(45deg), we angle your entire house into view, establishing the digicam’s orientation. On prime of this base, a number of .z parts are stacked vertically with translateZ(25px * stage). That approach, every layer acts as a grid slice at a particular top (a novel Z stage) whereas the rows and columns outline the X and Y coordinates.
Inspecting the stacked grids in devtools highlights the coordinate system that powers our 3D structure.
Collectively, these parts create the 3D grid the place we’ll place our shapes. From this basis, our terrain can begin to rise!
.scene { perspective: 8000px; }
.scene * { transform-style: preserve-3d; }
.flooring { remodel: rotateX(65deg) rotate(45deg); }
.z {
show: grid;
grid-template-columns: repeat(32, 50px);
grid-template-rows: repeat(32, 50px);
}Increasing the form grammar
Past easy cubes, our world requires new primitives: we name them flats, ramps, wedges, and spikes, and they're the minimal items of our terrain technology.
Every form tilts one or two planes to outline its type. They observe a 2:1 dimetric system, the place each unit of top equals two items of depth. In apply, this ends in cells measuring 50×50×25px. The widespread face tilt of arctan(0.5) ≈ 26.565° retains geometry constant throughout tiles, guaranteeing clear shading transitions and seamless slopes between neighboring cells.
Let’s take a more in-depth take a look at how every form comes collectively:
Flat form
Flat stays horizontal; it is just a airplane translated within the Z dimension by 25px, and rotated to match its cardinal orientation.
.tile.flat {
remodel: translateZ(25px) rotate(0deg);
}Ramp form
Ramp reuses the identical flat container, however provides one rectangular face pseudo factor tilted 26.565° to create the slope.
.tile.ramp {
remodel: translateZ(25px) rotate(0deg);
}
.tile.ramp::earlier than {
content material: "";
place: absolute;
inset: 0;
transform-origin: prime left;
remodel: rotateY(26.565deg);
}Wedge form
Wedge combines the ramp’s sloped face with a mirrored one turned 90 levels, making a concave junction between them.
.tile.wedge {
remodel: translateZ(25px) rotate(0deg);
}
.tile.wedge::earlier than,
.tile.wedge::after {
content material: "";
place: absolute;
inset: 0;
transform-origin: prime left;
}
.tile.wedge::earlier than {
remodel: rotateY(26.565deg);
}
.tile.wedge::after {
remodel: rotate(-90deg) scaleX(-1) rotateY(26.565deg);
}Spike form
Spike mirrors the ramp to type a peak. It combines two opposing slopes: the entrance ramp leans inward, and a mirrored one rises till they meet in a convex ridge.
.tile.spike {
remodel: translateZ(25px) rotate(0deg);
}
.tile.spike::earlier than,
.tile.spike::after {
content material: "";
place: absolute;
inset: 0;
transform-origin: prime left;
}
.tile.spike::earlier than {
remodel: rotateY(26.565deg);
transform-origin: backside left;
}
.tile.spike::after {
remodel: translateZ(-25px) rotateX(26.565deg);
}Textures and lighting
Since our shapes are simply regular DOM parts, we are able to fashion them simply with CSS. On this case, utilizing background-image or background-color is the only option, as that doesn’t add new nodes (like would). As a center floor, including inline SVGs to pick out shapes could make sense when animations or interactions are wanted.
Lighting on this engine is directional and baked into the textures. We repair a light-weight supply to the west (180°) and classify every seen face into one in every of 4 brightness bands primarily based on its angle to that gentle. Every form receives a light-level class (.l-1 to .l-4) primarily based on its orientation to the sunshine supply. The result's plausible shading that continues to be constant even because the scene rotates.
A more in-depth take a look at Layoutit Terra’s sprites for various shapes, biomes and lighting ranges.
Making some noise
A terrain is a heightmap: a set of 2D arrays of elevation values constructed from noise and formed right into a tough landmass. The preliminary uncooked discipline comes from a library like simplex-noise, adopted by many refinement passes. This smooths out speckles, terraces steep areas, and limits how a lot steepness can range. One of many golden guidelines of this world is that tiles can’t differ by a couple of top stage, which retains slopes constant and prevents cliffs from forming.
On the person facet, two principal knobs are uncovered: landmass protection, which controls the share of water that fills the map, and terrain sort, which units the ceiling for elevation within the scene.
A uncooked take a look at the heightmap array, the place dots mark water and numbers land elevation.
As soon as the heightmap is constructed, a classifier decides which form matches every cell. Tiles can have as much as eight doable neighbors, every with 4 rotation states, which rapidly provides as much as lots of of mixtures. To deal with all that complexity, a rulebook defines how shapes ought to meet at each cardinal level. And when these guidelines nonetheless fall quick (like on sharp intersections or excessive slopes) a set of manually curated overrides steps in to wash issues up and preserve the terrain secure.
Efficiency notes
One of many principal bottlenecks with stacked grids is what number of DOM parts they will maintain. Each tile, face, and layer provides up, and by the point we render a big terrain, the browser is already juggling 1000's of nodes. A 32×32×12 grid is roughly the protected restrict for many fashionable programs; past that, rendering turns into unpredictable, body charges drop, and tiles could flicker or disappear altogether.
The Rendering panel in DevTools can reveal layer borders, paint flashing and body rendering stats, a useful toolkit for engaged on 3D CSS scenes.
The actual ache level got here from utilizing clip-path to attract the triangular faces for wedges and spikes. It seemed clear and purely CSS, however it pressured the browser to repaint each time the scene rotated, dragging efficiency down. The repair was to modify to pre-cut PNG sprites with clear backgrounds. Till browsers correctly optimize clip-path in 3D contexts, sprites stay essentially the most dependable selection.
Subsequent steps
Past being an awesome technical problem, this challenge proved that the stacked grid approach can go far past cubes. Including slopes and angles opens up a brand new type of depth: 3D volumes that really really feel formed by gentle and type, though every part continues to be simply CSS.
Swapping a single class on the .scene container immediately modifications the biome, updating the background-image textures throughout each voxel form.
From right here, there are many paths to discover. Isometric internet video games are an apparent one, but in addition light-weight, interactive experiences that stay proper within the browser. The objective isn’t to switch WebGL, however to discover a special approach of constructing 3D tasks that keep easy, readable, and inspectable.
As for my subsequent 3D grid challenge, it might contain turning the terrain inside out: mirroring two vertical grids, utilizing duplicate heightmaps to type a single steady quantity. Perhaps that’s how we attain a real CSS sphere.
