Introduction to Strata

Strata is a comprehensive procedural 3D graphics library for React Three Fiber. It provides everything you need to build high-quality 3D games and experiences—from terrain generation to character animation—all optimized for performance across mobile, web, and desktop.

What is Strata?

The name Strata comes from geology: layers of rock or soil with internally consistent characteristics that distinguish them from contiguous layers. This perfectly embodies our framework:

Geological Metaphor: Building worlds layer by layer, from terrain foundations to atmospheric effects
Framework Architecture: From core algorithms → React components → Game framework
Technical Precision: Deliberate, structured, scientifically grounded

Core Features

🏔️ Procedural Terrain

SDF-based terrain generation using marching cubes algorithm with triplanar texturing and multi-biome blending.

import { Terrain } from '@strata-game-library/core';

<Terrain
  biomes={['grassland', 'mountain', 'desert']}
  resolution={128}
  size={1000}
/>

🌊 Advanced Water

Realistic water rendering with Gerstner wave simulation, Fresnel-based reflections, procedural foam, and underwater caustics.

import { Water, AdvancedWater } from '@strata-game-library/core';

<Water size={200} depth={20} />
<AdvancedWater size={200} waveHeight={2} reflections caustics />

🌿 GPU Vegetation

GPU-accelerated instancing capable of rendering 10,000+ instances at 60fps with procedural wind animation.

import { GrassInstances, TreeInstances, RockInstances } from '@strata-game-library/core';

<GrassInstances count={10000} spread={100} />
<TreeInstances count={500} spread={200} />
<RockInstances count={200} spread={150} />

☀️ Procedural Sky

Physically-based atmospheric scattering with dynamic day/night cycle, stars, and sun/moon positioning.

import { ProceduralSky, createTimeOfDay } from '@strata-game-library/core';

<ProceduralSky timeOfDay={createTimeOfDay(14, 30)} />

🌫️ Volumetric Effects

God rays, volumetric fog, underwater overlays, and atmospheric effects.

import { VolumetricFogMesh, UnderwaterOverlay, EnhancedFog } from '@strata-game-library/core';

<VolumetricFogMesh density={0.02} color="#8899aa" />
<UnderwaterOverlay depth={10} />

🎮 Character System

Articulated character system with IK chains, procedural walk cycles, and physics integration.

import { Character, createWalkCycle } from '@strata-game-library/core';

<Character
  model={characterModel}
  animation={createWalkCycle({ speed: 1.5 })}
/>

Package Ecosystem

Strata is organized into several focused packages:

Package	Description	NPM
`@strata-game-library/core`	Core library with all features
`@strata-game-library/shaders`	Standalone GLSL shader collection
`@strata-game-library/presets`	Ready-to-use configurations
`@strata-game-library/react-native-plugin`	React Native mobile plugin
`@strata-game-library/capacitor-plugin`	Capacitor mobile plugin