Procedural Landscapes Threejs

Procedural Landscapes — Three.js Skill

A Claude Code skill for generating procedural 3D terrain in Three.js, emphasizing **WebGPU with WebGL fallback**.

Part of the **Teaching Three.js** skill series.

What This Skill Does

When installed, this skill teaches Claude Code how to generate procedural landscapes including:

• Heightmap generation via FBM, ridged multifractal, and domain warping noise
• WebGPU-first rendering with automatic WebGL2 fallback
• Chunked LOD terrain with distance-based level of detail
• Slope + height materials using custom shaders (GLSL) and TSL node materials (WebGPU)
• Procedural water with animated wave displacement
• Atmospheric sky dome with gradient and sun disc
• Instanced vegetation scattered by height/slope/noise constraints
• GPU compute shaders (WGSL) for real-time heightmap generation and hydraulic erosion

Installation

Claude Code (CLI)

claude install-skill path/to/procedural-landscapes

Or copy the `procedural-landscapes/` folder into your Claude Code skills directory.

Manual Usage

You can also reference the skill files directly in conversations with Claude. The key files are:

File	Purpose
SKILL.md	Main skill — terrain pipeline, materials, vegetation, full scene assembly
references/wgsl-shaders.md	WGSL compute shaders for GPU heightmap gen, erosion, normals
references/noise-algorithms.md	Advanced noise variants, composition recipes, seed management

Quick Start Prompts

Try these with Claude after installing:

"Create a procedural island landscape with mountains and a water plane"

"Build a chunked terrain system with LOD that loads as the camera moves"

"Generate a terrain with ridged multifractal noise and slope-based texturing"

"Create a WebGPU terrain with compute shader heightmap generation"

Requirements

• Three.js r170+ (for WebGPU support and TSL node materials)
• A modern browser with W