Terrain Demo

Procedural terrain generation using Signed Distance Functions (SDFs) and the Marching Cubes algorithm with triplanar texturing and multi-biome blending.

Live Demo

Interactive — drag to rotate

View Source Code

Get Started with Terrain

Features Demonstrated

SDF-Based TerrainMarching CubesBiome BlendingTriplanar TexturingHeight-Based MaterialsDynamic LOD

SDF-Based Terrain — Mathematically defined terrain allowing caves and overhangs
Marching Cubes — Efficient mesh generation from signed distance fields
Biome Blending — Smooth transitions between terrain types (water, sand, grass, rock, snow)
Triplanar Texturing — No texture stretching on steep surfaces
Height-Based Materials — Different textures at different elevations
Dynamic LOD — Level of detail based on camera distance

Code Example

import { Canvas } from '@react-three/fiber';
import { Terrain } from '@strata-game-library/core';
import { OrbitControls } from '@react-three/drei';

function TerrainDemo() {
  return (
    <Canvas camera={{ position: [0, 50, 100], fov: 60 }}>
      <ambientLight intensity={0.4} />
      <directionalLight position={[50, 100, 50]} intensity={1} castShadow />

      <Terrain
        biomes={['grassland', 'mountain', 'snow']}
        amplitude={80}
        frequency={0.01}
        resolution={64}
        size={500}
      />

      <OrbitControls />
    </Canvas>
  );
}

Interactive Controls

Control	Action
Left Click + Drag	Rotate camera
Right Click + Drag	Pan camera
Scroll	Zoom in/out

Key Parameters

Parameter	Effect
`amplitude`	Height of terrain features
`frequency`	Scale of terrain features
`octaves`	Level of detail in noise
`biomes`	Types of terrain to generate
`resolution`	Mesh quality

Performance Notes

The demo uses dynamic LOD to maintain 60fps
Distant terrain uses lower resolution meshes
Nearby terrain has full detail
GPU tessellation is used where available