Terrain 3d
Procedurally improve browser 3D islands—heightmaps, biomes, caves, LOD, and performance—in a Three.js survival-style world.
Overview
terrain-3d is an agent skill for the Build phase that guides Three.js/WebGL procedural terrain—heightmaps, biomes, caves, LOD, and optimization—for browser games.
Install
npx skills add https://github.com/markkampstra/fp-survival --skill terrain-3dWhat is this skill?
- Expert guidance for Three.js + WebGL procedural terrain (references/terrain-techniques.md)
- Aligned to fp-survival stack: 500×500 PlaneGeometry, 256×256 segments, FBM 6 octaves
- Biome vertex colors, radial island falloff, height fog, and getHeightAt bilinear sampling
- Triggers on caves, cliffs, erosion, splatmaps, chunk LOD, and “make terrain look better”
- Performance and mesh-resolution tradeoffs for 65K-vertex terrain
- 500×500 PlaneGeometry with 256×256 segments (~65K vertices)
- FBM noise: 6 octaves, persistence 0.5, lacunarity 2.0, scale 0.005
- Radial falloff radius 200, max height 40 units
Adoption & trust: 1 installs on skills.sh; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
Your browser game island looks flat or generic and you lack a structured path to upgrade noise, biomes, caves, and performance on a large segmented mesh.
Who is it for?
Solo builders extending markkampstra/fp-survival or similar Three.js world code who want terrain edits grounded in existing FBM and biome hooks.
Skip if: Unity/Unreal terrain pipelines, server-side world generation only, or 2D tilemap games with no heightmesh.
When should I use this skill?
Creating or modifying terrain, heightmaps, islands, biomes, erosion, LOD, caves, cliffs, splatmaps, or when user says make the terrain look better or bigger island.
What do I get? / Deliverables
You get concrete terrain.ts-aligned changes—shape, materials, height sampling, and perf tactics—so the world reads as a playable, performant island.
- Updated terrain generation code (noise, falloff, biomes)
- Height sampling and collider-friendly getHeightAt behavior
Recommended Skills
Journey fit
How it compares
Use instead of generic “add Perlin noise” chat when you need fp-survival file paths, segment counts, and WebGL-specific LOD guidance.
Common Questions / FAQ
Who is terrain-3d for?
Indie devs building WebGL browser games with Three.js who own terrain.ts-style modules and want expert procedural landscape edits.
When should I use terrain-3d?
During Build frontend work when creating or modifying heightmaps, biomes, caves, splatmaps, erosion, LOD chunks, colliders, or when the user says make the terrain look better.
Is terrain-3d safe to install?
It is documentation and coding guidance; review the Security Audits panel on this page before letting an agent modify large world files in your repo.
SKILL.md
READMESKILL.md - Terrain 3d
# 3D Terrain Generation Expert You are an expert in real-time procedural terrain generation for browser-based 3D games using Three.js + WebGL. Read the detailed reference file when you need specific technique details: ``` references/terrain-techniques.md ``` ## Current Project Terrain **File:** `src/world/terrain.ts` - 500x500 unit PlaneGeometry with 256x256 segments (65K vertices) - FBM noise (6 octaves, persistence 0.5, lacunarity 2.0, scale 0.005) - Radial falloff (radius 200) creates island silhouette - Max height 40 units - Biome colors from `src/world/biome.ts`: beach (0-2.5), jungle (2.5-15), highlands (15+) - `getHeightAt(x, z)` — bilinear interpolation for camera/object ground-following - Height fog shader patched into material (denser at low altitude) ## Core Principles 1. **Heightmap first, details second.** Get the silhouette right (island shape, mountain placement) before adding detail noise or erosion. A good silhouette at 64x64 resolution beats a bad one at 1024x1024. 2. **Layer noise, don't just add octaves.** Use domain warping (feed noise output back as UV offset) for organic shapes. Combine noise types: FBM for rolling hills, ridged noise for mountain peaks, Worley for rocky crags. 3. **Biomes drive everything.** Height alone isn't enough — use moisture/temperature maps (or just distance from water + height) to determine biome. Biome then drives vertex color, vegetation density, resource spawns, and creature habitats. 4. **Performance = vertex count × shader complexity.** A 256x256 heightmap (65K vertices) is fine for a single island. Beyond that, use LOD (geomorphing between resolution levels) or chunked terrain. Never go above 512x512 without LOD. ## Noise Function Toolkit ### Available in this project - **FBM** (`src/utils/noise.ts`): Standard fractal Brownian motion using simplex-noise. Good for smooth rolling terrain. - **Simplex 2D** (via `simplex-noise` package): Base noise, already installed. ### Techniques to add when needed **Ridged FBM** — for mountain ridges and peaks: ```typescript function ridgedFbm(x: number, z: number, octaves: number, scale: number): number { let value = 0, amplitude = 0.5, frequency = scale; for (let i = 0; i < octaves; i++) { const n = 1 - Math.abs(noise2D(x * frequency, z * frequency)); value += n * n * amplitude; // square for sharper ridges amplitude *= 0.5; frequency *= 2.0; } return value; } ``` **Domain Warping** — for organic, river-like shapes: ```typescript function warpedNoise(x: number, z: number, scale: number): number { const wx = fbm(x + 5.2, z + 1.3, 4, 0.5, 2.0, scale) * 20; const wz = fbm(x + 9.7, z + 6.8, 4, 0.5, 2.0, scale) * 20; return fbm(x + wx, z + wz, 6, 0.5, 2.0, scale); } ``` **Worley/Voronoi Noise** — for rocky, cellular terrain: ```typescript function worley(x: number, z: number): number { const ix = Math.floor(x), iz = Math.floor(z); let minDist = 1; for (let dx = -1; dx <= 1; dx++) { for (let dz = -1; dz <= 1; dz++) { const cx = ix + dx + hash(ix + dx, iz + dz); const cz = iz + dz + hash(ix + dx + 31, iz + dz + 17); const d = Math.sqrt((x - cx) ** 2 + (z - cz) ** 2); minDist = Math.min(minDist, d); } } return minDist; } ``` ##