Terrain Demo

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

Live Demo

[https://github.com/jbcom/strata-game-library/tree/main/apps/examples/basic-terrain]( View Source Code ) [/getting-started/quick-start/]( Get Started with Terrain )

Features Demonstrated

SDF-Based Terrain Marching Cubes Biome Blending Triplanar Texturing Height-Based Materials Dynamic 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

Key Parameters

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

Related

• Terrain System Documentation
• Terrain Shaders
• Terrain Presets