Sky & Volumetrics Demo

Physically-based atmospheric scattering with dynamic day/night cycle, stars, volumetric clouds, and god rays.

Live Demo

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

Features Demonstrated

Atmospheric Scattering Day/Night Cycle Dynamic Stars Moon Phases Volumetric Fog God Rays

• Atmospheric Scattering — Rayleigh and Mie scattering for realistic sky colors
• Day/Night Cycle — Sun position affects all lighting and atmosphere
• Dynamic Stars — Stars visible at night with twinkle effect
• Moon Phases — Accurate moon phase rendering
• Volumetric Fog — Height-based atmospheric fog with depth
• God Rays — Volumetric light shafts through the atmosphere

Code Example

import { Canvas } from '@react-three/fiber';
import {
  ProceduralSky,
  VolumetricFogMesh,
  createTimeOfDay,
} from 'strata-game-library/core';
import { OrbitControls } from '@react-three/drei';
import { useState, useEffect } from 'react';

function SkyDemo() {
  const [hour, setHour] = useState(14);

  // Animate time of day
  useEffect(() => {
    const interval = setInterval(() => {
      setHour(h => (h + 0.02) % 24);
    }, 50);
    return () => clearInterval(interval);
  }, []);

  return (
    <Canvas camera={{ position: [0, 10, 30], fov: 60 }}>
      <ProceduralSky
        timeOfDay={createTimeOfDay(hour, 0)}
        stars
        moon
        moonPhase={0.5}
      />

      <VolumetricFogMesh
        density={0.015}
        color="#8899aa"
      />

      <ambientLight intensity={0.2} />
      <OrbitControls />
    </Canvas>
  );
}

Interactive Controls

Key Parameters

Time of Day Presets

Performance Notes

• Sky shader is very efficient
• Stars can be disabled on mobile
• Volumetric fog uses ray marching (more expensive)
• God rays require additional render pass

Related

• Sky System Documentation
• Sky Shaders
• Volumetrics
• Cloud Shaders