Build Stunning 3D Worlds
From procedural terrain to animated characters, Strata provides every layer you need.
🌅 Background Layer
- Procedural sky with day/night cycle
- Dynamic weather and stars
- Atmospheric scattering
- Volumetric fog and clouds
🏞️ Midground Layer
- Marching cubes terrain
- Advanced water with reflections
- GPU-instanced vegetation
- Biome-based placement
🎮 Foreground Layer
- Articulated characters
- Shell-based fur rendering
- Particle systems
- Decals and billboards
Interactive Demos
Explore feature demonstrations with visual previews
Procedural Terrain
SDF-based terrain with marching cubes, triplanar texturing, and biome blending.
Advanced Water
Gerstner waves, fresnel reflections, caustics, and underwater effects.
GPU Vegetation
Thousands of grass, trees, and rocks with wind animation and LOD.
Procedural Sky
Day/night cycle, atmospheric scattering, stars, and weather effects.
Volumetric Effects
Fog, god rays, dust particles, and underwater overlays.
Characters & Fur
Articulated characters with shell-based fur and procedural animation.
Comprehensive Examples
Full React Three Fiber examples with interactive controls
Vegetation Showcase
Interactive demo with up to 20,000 GPU-instanced vegetation elements.
examples/vegetation-showcase/
Sky & Volumetrics
Dynamic day/night cycle with atmospheric effects and weather presets.
examples/sky-volumetrics/
Basic Terrain
Simple terrain generation example showing heightmap-based procedural terrain.
examples/basic-terrain/
Water Scene
Advanced water rendering with animated waves, fresnel effects, and caustics.
examples/water-scene/
Quick Start
// Install pnpm install @jbcom/strata // Use in your React Three Fiber app import { ProceduralSky, Water, GrassInstances } from '@jbcom/strata'; function Scene() { return ( <> {/* Background */} <ProceduralSky timeOfDay={{ sunAngle: 45 }} /> {/* Midground */} <Water size={100} color="#006994" /> <GrassInstances count={10000} areaSize={50} /> </> ); }