NASA

Home and City

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.

Partner Agencies

NIA, WoodPile Studios, Bully! Entertainment

Markets

Entertainment, Non-Profit, Destinations

Online HQ

homeandcity.nasa.gov

Share

WebGL Polygon Build

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.

Leveraging
.OBJ File Setup
Three.js Library
WebGL

Polygon Build

Take a spin around the first prototype to see the untextured and style-less build.

Try It

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.

Structuring a backend for the world’s foremost super-nerds

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.

Leveraging
Drupal 8
Rest API
Node.js
React
Redux

Hurdle

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.

Solution

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.

From Here To There

We next began to test animating objects in our scenes by leveraging .FBX files.

Connecting the 360º panoramic interiors with the outside world.

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.

Leveraging
WebGL
Camera Planes
Vector Orientation

Direct linking and Site Structure

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.

Leveraging
React Routing

Hurdle

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.

Solution

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.

Gyroscopic Orientation

Explore interior spaces on mobile using built-in gyroscope functionality. The spaces react to a user’s motions and changing perspective.

NASA Technologies Interactive Map

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.

Leveraging
.FBX File Setup
Data Restructuring

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!

juror Hayley Hughes, Communication Arts Interactive Annual

Maryland Zoo

USA Field Hockey