High-Level Project Summary
In our weekend as Space Apps 2022, we created a conceptual demo for viewing the ISS in AR. To go beyond a computer screen, our solution utilized contemporary web technologies to determine the location of a device and display an image of the ISS in AR. This has the potential to show users where the ISS is in real-time, even if it may not be visible. We believe this approach opens up further avenues for presenting orbiting objects to a wider audience using technology they already have and without needing to install additional software. Building on this solution there are opportunities to present many other systems in orbit, from satellite networks to space debris.
Link to Final Project
Link to Project "Demo"
Detailed Project Description
Project description video: https://youtu.be/GN8DZy8WUa4
A Window to the ISS is a project designed to provide fun and easy to use tools to track the international space station. Our goal is to build a web based client side solution that takes advantage of modern frameworks and toolkits to provide a device agnostic educational user experience that is open to all users worldwide.
With our solution, users can track the ISS in its orbit around the earth. By taking pre-existing 3D models provided by NASA we can make a 3D Space View representation of the ISS orbiting the earth. The 3D Space View also features dynamically orbit lines for the future and past orbit.
Our solution also provides a WebXR based AR (Augmented Reality) Ground View solution. The AR Ground View will allow users to view their surroundings through their device and when the ISS comes into frame, a 3D model of the ISS will be placed on the screen. Using geolocation the user will be able to track the ISS’s current position of orbit.
Tools Used
+ IDE
- VSCode
+ Frameworks
- Node.js
- Three.js
- WebXR
- TypeScript
- JavaScript
- HTML
- CSS
- SCSS
+ Tools
- Figma - Prototyping
- Adobe Photoshop - Image Editing
- GitHub - Code Version Control and Hosting
Potential future directions:
+ AR iOS Support
- The current solution uses WebXR which is only supported by Chrome and FireFox browsers on Android devices
+ AR Ground View Pointers and Orbit Lines
- Create and improve optional orbit lines and locator arrow features that would assist the user in moving their AR view into an orientation where the ISS comes into view.
+ Show me the ISS
- Integrate visibility data and push notifications to send reminders and alert the user to times when the ISS is viewable without a telescope.
+ ISS Spotter Sharing
- Take photos and videos of the ISS and share them with your friends on various social media platforms.
+ 3D Interactive Tour
- Use various available models to provide a 3D tour of the ISS with call outs for the various modules with information on their usage.
+ Where’s my Wrench
- A game that challenges the user to find an interactive cartoon wrench character hidden in the 3D tour of the ISS. The wrench character will then describe life and activities associated with the location of the wrench.
+ Showing Network Path
- Display the communications path with ground based network stations
+ Power Usage
- Power usage and solar power generation
+ Display Other Space Based Objects
- Display other satellites, space debris and other objects in both Space View and Ground View
Space Agency Data
https://www.nasa.gov/specials/3d/iss-viewer.html - Used as the model for the space station in our project. For both AR and Simulation.
https://solarsystem.nasa.gov/resources/2393/earth-3d-model/ - Used for the Earth Model in our project.
https://celestrak.org/NORAD/elements/stations.txt - Used in the tracking of the ISS.
https://tle.ivanstanojevic.me/api/tle/ - Also used to track the ISS.
Hackathon Journey
Our Space Apps hackathon journey began as a chance to see a NASA facility in person. Over time it grew into a team building experience full of fun and learning. Our project selection was a combination of looking at the individual team member capabilities, as well as selecting a project that would be feasible for our skills while providing individual growth opportunities.
Our team featured desktop developers and web developers with experience levels ranging from decades of web development experience to interns with no web development experience. The selected challenge provided opportunities for each team member to grow and learn. Some learned how to work with web frameworks and technologies that will benefit them in their current professional careers. Others expanded their capabilities into fun 3D projects that provided an engaging and challenging experience.
Our project was full of hurdles and setbacks. Our first attempts at AR led us to out of date or otherwise unusable frameworks. Our solution was a combination of collaboration and pair programming. One advantage our team had was that we all work together and are very supportive of each other. There are no overpowering personalities, just friends with a willingness to help and learn.
References
Tools Used
+ IDE
- VSCode
+ Frameworks
- Vue.js
- Node.js
- Three.js
- WebXR
- TypeScript
- JavaScript
- HTML
- CSS
- SCSS
+ Tools
- Figma - Prototyping
- Blender - 3D Modelling
- GitHub - Code Version Control and Hosting
- OBS - for Video Editing
+ Referenced Code
Tags
#Threejs, #WebDevelopment, #AugmentedReality, #ISS, #WebXR