LunaVision: Lunar Surface Mapping Website

• 

  Luna vision

Inspiration Inspired by ISRO’s Chandrayaan missions, we wanted to bridge the gap between 2D lunar imagery and 3D spatial understanding. Our goal was to create a platform that showcases how Shape-from-Shading (SfS) can turn flat satellite photos into high-resolution Digital Elevation Models (DEMs), making lunar topography exploration more intuitive and accessible.

What it does LunaVision serves as a high-fidelity showcase for an ISRO Hackathon project. It visualizes the technical pipeline of lunar mapping—explaining how variations in surface shadows can be mathematically translated into height data. The website features interactive sections for the SfS concept, 5-step processing pipelines, and potential applications in future moon landings.

How we built it To ensure maximum performance and a sleek "Space-Tech" feel, we built the entire site using:

Core: Semantic HTML5 and modern CSS3 (Custom properties, Flexbox, and Grid).

Logic: Vanilla JavaScript for all UI interactions and data handling.

Visuals: Particles.js for the celestial background and AOS.js for smooth, scroll-triggered reveal animations.

Design: A "Glassmorphism" aesthetic with a dark lunar color palette.

Challenges we ran into Cross-Browser Consistency: Ensuring the complex CSS glass filters and animations rendered identically across different rendering engines.

Data Visualization: Converting the highly technical 5-step SfS pipeline into a visual format that is easy for a general audience to digest without losing scientific accuracy.

Responsive Complexity: Maintaining the intricate layout of the "Unique Selling Points" flip cards on smaller mobile screens while keeping the text legible.

Accomplishments that we're proud of Performance: Achieving a high-performance, smooth scrolling experience without using heavy frameworks like React or Vue.

Immersive Design: Successfully creating a professional "ISRO-style" atmosphere using specific typography (Orbitron) and deep-space color schemes.

Interactivity: Building a single-page application (SPA) flow that feels dynamic through the use of tabbed interfaces and animated budget counters.

What we learned We gained deep insights into the physics of Shape-from-Shading and how light intensity impacts 3D reconstruction. From a development standpoint, we sharpened our skills in Vanilla JS DOM manipulation and learned how to optimize CSS animations for low-

Built With

• sfs
• spa