Contour Bands
Line width divided by the height gradient per pixel, so the lines crowd on steep ground without ever changing thickness.
The scene in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
"use client";
import * as React from "react";
import * as THREE from "three";
/**
* Contour Bands — the lines are where a surface crosses a level.
*About this effect
For something spatial — a coverage map, a region summary, a survey panel — where reading the backdrop as terrain does work rather than being scenery. A contour is not a thing that exists on a map: it is the set of points at one particular height, and a topographic sheet looks the way it does because the lines crowd where the ground is steep and spread where it is flat. Nothing chose that spacing. Which is exactly what makes the naive version fail visibly: take the fractional part of a height field and threshold it, and the line comes out thin where the ground is steep and fat where it is flat, which is the opposite of a drawn contour — and on a moving field it shimmers, because a line one pixel wide in one place and eight in another aliases everywhere. The fix is a single call. Dividing the distance to the level by how fast the height changes across one pixel, which fwidth reports directly, converts a distance measured in height into one measured in pixels: constant width, no shimmer, and all the crowding preserved, because crowding is the spacing of the lines and never the width of them.
Related effects
- Aurora CurtainRays that arrive where a sampled sheet folds end-on, so no line of code decides where a ray belongs.
- Fog BankSlabs composited back to front, each dimming what is behind it, so the bank has an inside rather than a surface.
- Plasma BloomThree fields multiplied rather than added, so light appears only where all three agree and most of the frame stays dark.