Core Features

Core Features

The @strata-game-library/core package provides a comprehensive set of procedural 3D graphics features for React Three Fiber. This section covers all the core capabilities.

Feature Overview

Feature	Description	Components
🏔️ Terrain	Procedural terrain with biomes	Terrain, TerrainChunk
🌊 Water	Realistic water rendering	Water, AdvancedWater
🌿 Vegetation	GPU-instanced plants	GrassInstances, TreeInstances, RockInstances
☀️ Sky	Procedural atmosphere	ProceduralSky
🌫️ Volumetrics	Fog and effects	VolumetricFogMesh, UnderwaterOverlay
🎮 Characters	Animated characters	Character, IKChain
🎨 Ray Marching	SDF rendering	Raymarching
🐕 Fur System	Shell-based fur	FurMesh, createFurSystem
🔬 Molecular	Scientific visualization	MoleculeRenderer

Quick Import

import {
  // Terrain
  Terrain,

  // Water
  Water,
  AdvancedWater,

  // Vegetation
  GrassInstances,
  TreeInstances,
  RockInstances,
  GPUInstancedMesh,

  // Sky
  ProceduralSky,
  createTimeOfDay,

  // Volumetrics
  VolumetricEffects,
  VolumetricFogMesh,
  UnderwaterOverlay,
  EnhancedFog,

  // Characters
  Character,
  createWalkCycle,

  // Ray Marching
  Raymarching,

  // Core Functions
  marchingCubes,
  noise3D,
  fbm,
  sdSphere,
  sdBox,
  opUnion,
  opSmoothUnion,

  // Materials
  createWaterMaterial,
  createSkyMaterial,
  createRaymarchingMaterial,
} from '@strata-game-library/core';

Complete Scene Example

Here’s how to combine all features into a complete scene:

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import {
  ProceduralSky,
  Water,
  GrassInstances,
  TreeInstances,
  RockInstances,
  VolumetricFogMesh
} from '@strata-game-library/core';

function CompleteScene() {
  return (
    <Canvas camera={{ position: [0, 30, 60], fov: 60 }} shadows>
      {/* Lighting */}
      <ambientLight intensity={0.4} />
      <directionalLight
        position={[50, 100, 50]}
        intensity={1.2}
        castShadow
        shadow-mapSize={[2048, 2048]}
      />

      {/* Background Layer */}
      <ProceduralSky sunPosition={[100, 50, 100]} />

      {/* Midground Layer */}
      <Water size={300} depth={30} position={[0, -2, 0]} />

      {/* Foreground Layer */}
      <GrassInstances count={15000} spread={120} />
      <TreeInstances count={800} spread={180} minHeight={4} maxHeight={12} />
      <RockInstances count={300} spread={150} />

      {/* Atmosphere */}
      <VolumetricFogMesh density={0.01} color="#9ab" />

      {/* Controls */}
      <OrbitControls
        maxPolarAngle={Math.PI / 2.1}
        minDistance={15}
        maxDistance={300}
      />
    </Canvas>
  );
}

Performance Guidelines

Vegetation Counts

Quality	Grass	Trees	Rocks	Target FPS
Mobile	5,000	200	100	30
Desktop	15,000	800	300	60
High-end	50,000	2,000	500	60+

Water Quality

Quality	Reflections	Caustics	Foam	Performance
Low	❌	❌	❌	Fastest
Medium	✅	❌	✅	Balanced
High	✅	✅	✅	Best visual

Volumetric Settings

Quality	Density	Steps	Performance
Low	0.005	16	Fastest
Medium	0.015	32	Balanced
High	0.03	64	Best visual

Core Algorithm APIs

Beyond components, Strata exposes core algorithms for advanced use cases:

SDF Operations

import { sdSphere, sdBox, opSmoothUnion } from '@strata-game-library/core';

function customTerrain(point: [number, number, number]): number {
  const sphere = sdSphere(point, [0, 0, 0], 10);
  const box = sdBox(point, [5, 5, 5], [3, 3, 3]);
  return opSmoothUnion(sphere, box, 0.5);
}

Noise Generation

import { noise3D, fbm } from '@strata-game-library/core';

function generateHeight(x: number, z: number): number {
  return fbm(x * 0.02, 0, z * 0.02, {
    octaves: 6,
    persistence: 0.5,
    lacunarity: 2.0
  }) * 50;
}

Marching Cubes

import { marchingCubes, createGeometryFromMarchingCubes } from '@strata-game-library/core';

const geometry = createGeometryFromMarchingCubes({
  bounds: { min: [-50, -50, -50], max: [50, 50, 50] },
  resolution: 64,
  sdf: customTerrain
});

Next Steps

Dive deeper into each feature:

• 🏔️ Terrain - Procedural terrain generation
• 🌊 Water - Water rendering systems
• 🌿 Vegetation - GPU-instanced vegetation
• ☀️ Sky - Procedural sky and atmosphere
• 🌫️ Volumetrics - Fog and atmospheric effects
• 🎮 Characters - Character animation system