Radiance Cascade

Real-Time Lighting with the Radiance Cascade Algorithm

Features

• Real-time radiance cascade lighting with multiple cascade levels
• Interactive light control - move your mouse to control the primary light source
• Dynamic shadows cast by obstacles with proper occlusion
• Particle effects for atmospheric enhancement
• Multiple light sources - click to add new lights with random colors
• Smooth animations with pulsing light intensities
• Responsive design that works on different screen sizes

Controls

• Mouse Movement: Control the primary light source position
• Mouse Click: Add new light sources at cursor position
• Spacebar: Toggle animation on/off

Getting Started

1. Clone this repository or download the files
2. Open index.html in your web browser
3. Move your mouse around to see the lighting effects
4. Click to add more lights and experiment!

Visual Effects

Radiance Cascade Technique

This implements a multi-level radiance cascade system:

• 4 cascade levels for smooth light falloff
• Screen blend mode for realistic light mixing
• Gradient-based illumination for smooth transitions
• Dynamic intensity modulation for breathing effects

Shadow Rendering

• Real-time shadow casting from rectangular obstacles
• Proper occlusion using canvas clipping and compositing
• Realistic shadow projection based on light position
• Soft shadow edges for enhanced realism

Particle System

• Floating particles that respond to lighting
• Alpha-based transparency for atmospheric effects
• Animated brightness synchronized with light pulsing

Technical Implementation

Core Technologies

• HTML5 Canvas for rendering
• JavaScript ES6+ for modern syntax and features
• Canvas 2D Context for graphics operations
• RequestAnimationFrame for smooth 60fps animation

Key Algorithms

• Radial Gradients for light distribution
• Geometric Shadow Calculation for realistic shadows
• Composite Operations for proper light blending
• Trigonometric Functions for smooth animations

Performance Optimizations

• Efficient gradient creation with minimal allocations
• Optimized shadow calculations using corner projection
• Selective rendering based on light radius
• Smooth animation curves using sine functions

Use Cases

This showcases techniques useful for:

• Game Development - 2D lighting systems
• Interactive Visualizations - Data presentation with lighting
• Educational Tools - Computer graphics learning
• Art Projects - Digital installations and experiences

Customization

Adding New Obstacles

this.obstacles.push({
    x: 300,           // X position
    y: 200,           // Y position
    width: 100,       // Width in pixels
    height: 80,       // Height in pixels
    color: '#4a4a4a'  // Color hex code
});

Modifying Light Properties

this.lights.push({
    x: 400,              // X position
    y: 300,              // Y position
    intensity: 150,      // Light intensity (0-255)
    color: '#ff6b6b',    // Color hex code
    radius: 200          // Light radius in pixels
});

Adjusting Animation Speed

// Modify the time increment multiplier
light.intensity = 100 + Math.sin(this.time * 0.02 + index) * 30;
//                                        ^^^^
//                                   Change this value

Color Palette

The uses a carefully selected color palette:

• Primary: #ff6b6b (Coral Red)
• Secondary: #4ecdc4 (Turquoise)
• Accent: #45b7d1 (Sky Blue)
• Complementary: #96ceb4 (Mint Green)
• Highlight: #ffeaa7 (Warm Yellow)

Browser Compatibility

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+
• ⚠️ Internet Explorer - Not supported (requires modern Canvas API)

Future Enhancements

• WebGL Implementation for GPU acceleration
• Normal Mapping for surface detail
• Volumetric Lighting for fog effects
• Color Temperature controls
• Save/Load Scenes functionality
• Mobile Touch Controls optimization

Learning Resources

• Canvas API Documentation
• Computer Graphics Principles
• Real-Time Rendering Techniques