Vegetation Demo

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

Live Demo

Interactive — drag to rotate

View Source Code

Get Started with Vegetation

Features Demonstrated

GPU InstancingWind AnimationHeight VariationColor VariationTerrain FollowingLevel of Detail

GPU Instancing — Render thousands of instances efficiently with InstancedMesh
Wind Animation — Procedural wind affecting all vegetation in vertex shader
Height Variation — Natural size variation for organic appearance
Color Variation — Subtle color differences across instances
Terrain Following — Vegetation placed on terrain surface
Level of Detail — Reduced complexity at distance

Code Example

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

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

      <GrassInstances
        count={15000}
        spread={100}
        windSpeed={1.5}
        windStrength={0.3}
      />

      <TreeInstances
        count={500}
        spread={150}
        minHeight={4}
        maxHeight={12}
      />

      <RockInstances
        count={200}
        spread={120}
        moss
      />

      <OrbitControls />
    </Canvas>
  );
}

Interactive Controls

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

Key Parameters

Parameter	Effect
`count`	Number of instances
`spread`	Distribution radius
`windSpeed`	Wind animation speed
`windStrength`	Amount of wind bending
`heightVariation`	Range of height differences
`colorVariation`	Range of color differences

Instance Counts by Platform

Platform	Grass	Trees	Rocks
Mobile	5,000	200	100
Desktop	15,000	500	200
High-end	50,000	2,000	500

Performance Notes

Uses InstancedMesh for efficient rendering
All animation calculated in vertex shader
No CPU overhead per instance
Demo maintains 60fps with 15,000+ instances