Sunset Experiment by Dr. Rami Zarife

An interactive 3D sunset experience with day-night cycle, weather effects, underwater reef life, dynamic camera moments, and real-time elements using advanced shaders, GPU simulations, and physics-inspired animation. This project is a work in progress and continues to evolve with new features, visual refinements, and performance improvements.

Features & Ongoing Development

• Living Ocean Scene: Animated water, sunset lighting, boat movement, birds, fish schools, coral reefs, weather, stars, comets, and underwater elements are combined into one continuous real-time environment.
• Dynamic Experience: Time-based scheduling, camera paths, day-night transitions, storm moments, underwater views, and adaptive visibility systems keep the scene moving and responsive.
• AI-assisted Optimization: The project was further refined with AI assistance (GPT-5.5), especially around performance tuning, asset loading, shader integration, code organization, and overall runtime flow.

3D Models - Most models modified & optimized by me

• Flamingos/Birds: Strongly modified, based on the Three.js GPGPU Birds example by xeolabs.
• Boat Model: Optimized for performance with custom animations and a cloth shader for the sail. Purchased through Blender-Kit Pro - model: Small Sailboat by Mauro Casalino.
• Fish & Coral Models: Purchased through CGTrader and used under a purchased CGTrader license. Models were optimized and integrated for the underwater scene.
• Island Environment, Rocks, Wood, Palm Trees: Added shaders and optimized for the scene. Based on "Tropical Island" by Elin, licensed under CC Attribution.
• Lighthouse: Optimized for performance with an added light shader and cone. Based on "LightHouse" (https://sketchfab.com/3d-models/lighthouse-0c58bdf80b5b4f1cb858dd12fad416c3) by DoobiDooba (https://sketchfab.com/DoobiDooba), licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/).

Libraries & Components

• Three.js: JavaScript 3D library - https://threejs.org/
• SPE (Shader Particle Engine) - Modified & optimized: Used for particle effects such as clouds, stars, and weather. Based on https://github.com/squarefeet/ShaderParticleEngine.
• Sky & Water: Based on Three.js Ocean example - Modified & optimized. Based on https://threejs.org/examples/?q=ocean#webgl_shaders_ocean
  Gerstner Waves reference: Sean Bradley Gerstner Wave Example
• Custom Boat Navigation: Custom-built path animation system for boat movement with Bezier curve interpolation.
• Fish School Simulation: Custom GPU-based implementation using WebGL shaders, following the same principles as the bird flocking system but optimized for underwater movement and behavior.
• Rainbow Effect: Custom shader implementation with dynamic color blending and atmospheric scattering simulation.
• Comet System: Heavily modified and enhanced. Based on Shane Brumback's Three.js comet example but completely rewritten with custom behavior, explosion mechanics, fragment trails, and advanced particle systems. Features include dynamic splitting, realistic physics, custom shaders, and performance optimizations.

Weather & Effects

• Constellation System: Custom-built implementation based on real star constellations with dynamic visibility and shader effects.
• Lightning & Storm Effects: Strongly optimized. Based on the Three.js Lightning Strike example.
• Day/Night Cycle: Custom-built implementation with realistic sun position calculations and time-based events.
• Moon Texture: NASA Visible Earth - Blue Marble Project
• Skybox Textures: Modified from ESO/S. Brunier - ESO Milky Way Panorama

Performance

• Draco Mesh Compression: Advanced mesh optimization for faster loading times.
• Basis Universal (KTX2): GPU-native texture compression to reduce graphics memory usage.
• Intelligent Asset Management: Specialized loader libraries for efficient caching and asset loading.
• Adaptive Performance: Dynamic rendering-quality adjustments based on device capabilities.
• Display Detection: Optimized presentation on modern displays.

Special Thanks

Thanks to all the open source contributors who make projects like this possible, especially the Three.js community for their excellent examples and documentation.