Have you ever wondered how space exploration affects your daily life? "Spinoffs" are commercial products and services derived from NASA technology or improved through NASA partnerships. The NASA Home & City interactive web app allows you to explore some of the spinoff technologies you can find in your everyday life, demonstrating the wider benefits of America's investments in its space program.
Mission designed and developed the new and improved Home & City interactive website using advanced WebGL technology allowing users to navigate through two virtual 3D environments from your desktop or mobile device. The mobile version uses gyroscope functionality to navigate throughout the environment, allowing users to view and move throughout the scenes from a first person perspective.
NIA, WoodPile Studios, Bully! Entertainment
Entertainment, Non-Profit, Destinations
We initially built a simple prototype as a proof of concept to ensure we were leveraging the proper technology. We loaded our sample .OBJ file onto our site through the Three.js library and leveraged WebGL to display the image. This did not include a texture or a background. We specifically tested ambient/directional lighting, positioning, scaling, controls and rotation.
Our next prototype was a proof of concept of a panoramic room. We again leveraged the Three.js library to test the perspective, field of view, motion and controls.
Once our first two prototypes were complete we continued to add more layers and complexity. This specifically included the addition of a background to the scenes and loading textures onto the .OBJ files.
Our final prototype required us to connect our two scenes we had created (3D .OBJ and pano) together through an animation. We developed a method to render more than one scene at a time and transition depending on the point of interest selected.
Our next prototype was a proof of concept of a panoramic room. We again leveraged the Three.js library to test the perspective, field of view, motion and controls.
Once our first two prototypes were complete we continued to add more layers and complexity. This specifically included the addition of a background to the scenes and loading textures onto the .OBJ files.
Our final prototype required us to connect our two scenes we had created (3D .OBJ and pano) together through an animation. We developed a method to render more than one scene at a time and transition depending on the point of interest selected.
With our prototype fully built we began structuring our own custom ecosystem for the build. The team was tasked with using a Drupal 8 install as the backend CMS for the client, however we created a Rest API for data requests and rendered them on a decoupled front end. This framework leveraged Node.js, React, Redux for managing states and a webpack architecture.
With final files in place our prototype began its review process. The design team quickly realised that panoramic images were not being properly meshed together causing a ‘pixelated’ effect in the bottom of the scene.
After reviewing and troubleshooting developers resolved this by switching to a cube map. We divided the image programmatically and filled designated areas of a cube. Through this approach we were able to reduce requests from the browser and only load one single image.
As our camera could rotate in our outdoor scenes the team had to develop a custom way to calculate an animated curve from the camera to the point of interest. In order to accomplish this we calculated the least number of points we could use to connect the two areas without clipping through a designed ‘safe zone’ in the scene. Through leveraging the planes the camera moved on and the vector direction the point of interest was facing we were able to properly drive the camera through an animation.
The site was constructed as a single page application preventing us from leveraging different URLs throughout the site that users could be directly pointed to. In order to direct users deeper than the homepage we leverage React routing.
Typically we approach rendering images for 4k resolution screens and higher by uploading images at 2x their standard ratio. When we began testing our build on mobile devices we noticed iOS was constantly crashing when transitioning into a panoramic scene.
We would learn that the browser was running out of allocated memory. We were required to load the cube map image at 1024px and not 2048px if iOS was detected. The day after launch a new version of iOS launched requiring further reduction of outdoor background image sizes to 512px.
An additional ask for an interactive map was received that would appear in the NASA Headquarters scene. This map was requested to display all technology for each state if the state was clicked by the user. The requested functionality would require a new approach that we had previously not tested. We were able to generate a .FBX file that lived within the panoramic scene that included subdivisions allowing for interactivity. Each subdivision was then associated with the proper content.
This was love at first question: How does space exploration impact my daily life? From that provocation, I dove into the interactives. It felt like an immersive ride at an online theme park, connecting me to innovations I never realized came from NASA. An enlightening, exciting and inspiring experience!
