Inspiration

The main motivation for this project stems from NASA's Eyes of Exoplanets project. That project made those far-off worlds so much more accessible via those stunning visualizations. But we wanted to go one step further. Instead of just looking at those planets, we wanted to change those planets. We wanted to tweak their properties to make them more habitable. We wanted to explore how little changes can make them more Earth-like.

That's exactly what ExoCosmos lets you do.

What it does

ExoCosmos is like having your own personal laboratory for exploring alien worlds. Here's what you can do in this project:

Pick Your Planet: Choose from a collection of real exoplanets that astronomers have discovered. These selections range from gas giants like Dimidium to potentially terrestrial planets like Proxima Centauri B.

See It in 3D: Once you've chosen your planet, we'll show you a detailed 3D model of both the planet and its host star. You can rotate, zoom, and explore these distant worlds as if you were there.

Become a Planet Engineer: Here's where the magic happens. You can adjust four key properties of you chosen planet:

  • Planet Mass
  • Planet Radius
  • Star Mass
  • Distance from star

You can vary these properties from a set of sliders we have given. As you move the sliders, you'll see the planet transform before your eyes. You can see the planet and star getting big and small in front of your eyes as you change the properties. More importantly, we calculate something called the Earth Similarity Index (ESI) - basically a score that tells you how Earth-like your modified planet is.

We wanted ExoCosmos to be an educational tool as well. So, each planet comes with:

  • Information about the planet
  • Fascinating facts that make each world unique
  • Explanations of why certain conditions make life more or less likely

The goal is to see how close you can get to creating the perfect conditions for life.

How we built it

Building ExoCosmos was a very unique experience. We learned and worked we technologies we had never worked with before. But we were determined to bring these alien world to life.

Bringing Planets to Life

We used Three.js (a 3D graphics library) to create realistic-looking planets. This meant diving deep into some pretty complex visual effects and 3D rendering effects like:

  • Fresnel effects for realistic light reflection at glancing angles
  • Ray marching to simulate light passing through volumes like clouds
  • Seed-based and procedural cloud generation, instead of using pre-made cloud images, we wrote code that generates unique cloud patterns for each planet
  • Volumetric clouds with layered depth and movement. We created clouds that look three-dimensional and move naturally.
  • Noise techniques like Worley Noise and Fractal Brownian Motion (FBM) for surface and atmospheric detail
  • Dynamic detail: As you zoom in on a planet, the clouds fade away to reveal the surface below, just like you'd see from a real spacecraft

Using our knowledge of shaders, we designed a Level of Detail (LoD) system where clouds dynamically disperse as the user zooms in, revealing detailed planetary terrains. We applied various maps — displacement, normal, ambient occlusion, and diffuse — to give the planet a rich, lifelike feel. The 3D scene was built through well-structured, modular components for scalability and clean integration.

The Website Experience

The frontend was built using Next.js and styled with TailwindCSS, keeping performance and design in mind. We created:

  • A dynamic landing page that explains the purpose of ExoCosmos.
  • An interactive planet catalogue where you can browse and and select different exoplanets.
  • A dedicated exploration page for each exoplanet where the 3D planet is rendered and the user is given detailed information about the exoplanet.

We also used component libraries like Aceternity UI and shadcn/ui to improve our UI and give the website a modern feel. Special care was taken to write modular, reusable code so the project could evolve easily in the future.

The Science Behind the Scenes

Making this scientifically accurate required serious research. We studied different methods that scientists use to measure how Earth-like a planet might be. These methods include ESI, RSI, BSI, PHI, and SEPHI. After comparing various approaches, we chose an enhanced version of the Earth Similarity Index because it's both scientifically sound and easy to understand.

In ESI also, we provide users only four sliders. This score is calculated as you change the parameters to provide real time feedback to the user.

Users can manipulate these four key parameters via sliders:

  • Planetary Mass
  • Planetary Radius
  • Star Mass
  • Distance from Star

When you adjust those four sliders, our system calculates six different factors that affect habitability, then combines them into a single score on a 0-1 scale. Thanks to stateful component design, any change in slider input instantly updates the ESI score and reflects in the 3D model in real time.

We also crafted an about page for each planet consisting of fascinating facts about the planet, as well as the reasons why it is probably not habitable. All this ensures that ExoCosmos isn’t just a visual experience — it’s an informative journey through the possibilities of life beyond Earth.

Challenges We Ran Into

Building ExoCosmos was both exciting and demanding, and we encountered several technical, scientific, and design challenges along the way:

Performance & Rendering

Rendering 3D graphics was a very terrifying task for use. We had never dealt with any 3D projects before this, leave aside a 3D project as complex as this. We had to take care of rendering 3D planetary scenes - complete with volumetric clouds, dynamic lighting, and real time updates which pushed our limits. We had to carefull optimize shader computations, manage rendering layers, and implement Level of Detail (LoD) to balance beauty with performance.

️ State Management

Ensuring real time updates between UI interactions and 3D scene required state management. React state management was really helpful for this and we ended having a much deeper understanding of stateful interactions then before. The challenge of keeping all slider values, ESI calculations, and 3D model tranformations in perfect sync while maintaining smoothness and unnecessary re-renders was a really fun and challenging task for us. Stateful modular components helped us overcome this challenge.

Condensing Habitability

The most intellectually challenging part of the whole project as translating complex models of habitability into something user-friendly and interesting. We went through many scientific papers on different metrics like:

  • Earth Similarity Index (ESI)
  • RSI (Rock Similarity Index)
  • BSI (Biological Similarity Index)
  • PHI (Planetary Habitability Index)
  • SEPHI (Statistical-likelihood Exo-Planetary Habitability Index)

Many of these models involved complex, multi-variable math that were either too abstract or computationally heavy for real-time interaction. Many of them required details of the planet which are just avaiable to us. After reading numerous papers, we eventually settled on the Earth Similarity Index. We condensed the habitability calculation into four sliders that adjust six core factors behind the scenes, allowing users to explore complex ideas without being overwhelmed.

Deriving a Practical ESI Formula

The original ESI formula required tuning and simplification to work within an interactive frontend. We tried to balance scientific accuracy with user experience, refining equations and adapting constants based on real planetary data while ensuring that the habitability score remained user friendly and meaningful. We eventually settled on using 4 user friendly metrics to determine the ESI score.

These challenges improved our technical knowledge and understanding. It pushed us to find interdisciplinary solutions at the intersection of computer graphics and astrophysics.

Accomplishments that we're proud of

Building ExoCosmos was a very big undertaking for us. We're incredibly proud of what we have achieved over this hackathon:

Created a Complete 3D Planet Simulator: We built an entire interactive exoplanet simulator from the ground up using Three.js. This allows anyone to explore planets in real-time, rotating and zooming in for an immersive experience right in their web browser.

Integrated Real Science: We successfully incorporated the Earth Similarity Index (ESI) formula. This means as you change planet parameters, you get dynamic feedback based on actual astrobiology, connecting our simulation to real scientific concepts.

Designed an Easy-to-Use Interface: Our slider-based system makes complex scientific experimentation user friendly, perfect for everyone ranging from an educator, a student and space enthusiast.

Simulated Realistic Planet Features: To make the experience truly engaging, we added detailed surface textures, cloud layers, and atmospheric visuals, bringing our simulated planets to life.

Code quality and scalability: We take pride in our code and the way we collaborated throughout the project. Making the code modular and ensuring that the project is scalable for future was a big achievement. Talking with each other ensuring that the project went in the intended direction was a very fun and rewarding experience for use.

Completed End-to-End Development: From the initial brainstorming to the final launch, we collaborated effectively on every aspect of the project – frontend, backend logic, design, and documentation. We truly took full ownership of ExoCosmos as a team.

What we learned

The whole hackathon was a incredible learning experience. Here's what we took away from the project:

Deeper Space Knowledge: We really expanded our understanding of planets, especially how things like size, temperature, and escape velocity impact whether a planet could support life. The Earth Similarity Index (ESI) was a key part of this learning.

Mastering 3D Web Development: We got hands-on with Three.js, learning to build, animate, and add realistic textures to exoplanets. This allowed us to create a truly immersive experience right in your web browser.

Designing for People: We focused on making ExoCosmos easy and fun to use. We learned how to design an interface that lets users play around with scientific data using simple sliders and get immediate feedback, making complex concepts much clearer.

Teamwork and Problem-Solving: From fixing tricky rendering problems to ensuring our ESI calculations updated smoothly with user changes, we really honed our technical and collaborative skills.

Bringing Science to Life: We saw firsthand how powerful interactive visuals can be in making abstract scientific ideas tangible and exciting for everyone, not just scientists.

What's next for ExoCosmos

We're excited about the future of ExoCosmos and see it becoming an even more robust tool for learning and discovery. Here's a peek at what we're hoping to add:

More Planets to Explore: We want to bring in a lot more real exoplanets using data from NASA. This will give you a much wider universe to explore and analyze within the simulator.

Deeper Look at Habitability: Beyond our current Earth Similarity Index (ESI), we're planning to integrate other metrics like the Standardized Earth-Related Planetary Habitability Index (SEPHI). This will give a more complete picture of how habitable a planet might be.

Interactive Data Views: Imagine seeing graphs and charts that change in real-time as you tweak planet parameters, showing you exactly how your changes affect habitability scores. We're working on making that a reality.

Learning in the Classroom: We'd love to adapt ExoCosmos for educational settings. Think guided tutorials, fun challenges, and quizzes that make learning about astronomy and physics hands-on and engaging for students.

Built With

Share this project:

Updates