BOEING – FLIGHTBOARD 

BOEING – FLIGHTBOARD 

FlightBoard is a fictional future vision piece. The goal of the project was to see how an interface could utilize both 2D and 3D elements to complete a task. The idea that I came up with was to see how AR could benefit an Air Traffic Controller, one of the most stressful jobs in the world. The interface created allows Air Traffic Control to visualize the airfield in realtime. Air Traffic Control is able to approve landings, takeoffs and contact pilots

Music Credit: Twenty One Pilots. "Chlorine". Track 5 on Trench. Fueled By Ramen. 2018.

THE BASE UI 

The UI that was created contained three key components. The left column allows pilots to see upcoming departures and arrivals, the middle column allows for Air Traffic Control to see requests from the airfield and lastly the right side of UI allows Air Traffic Control to see the airfield in realtime. This UI shows a request card being expanded and approved, as well as secondary animation.

 

Still of UI:

THE BASE UI 

The UI that was created contained three key components. The left column allows pilots to see upcoming departures and arrivals, the middle column allows for Air Traffic Control to see requests from the airfield and lastly the right side of UI allows Air Traffic Control to see the airfield in realtime. This UI shows a request card being expanded and approved, as well as secondary animation. 

Still of UI:

THE BASE UI 

The UI that was created contained three key components. The left column allows pilots to see upcoming departures and arrivals, the middle column allows for Air Traffic Control to see requests from the airfield and lastly the right side of UI allows Air Traffic Control to see the airfield in realtime. This UI shows a request card being expanded and approved, as well as secondary animation. 

Still of UI:

FlightBoardBaseUI

THE SHOOT

In order to film the live action of this piece, I created a make-shift studio in my apartment. I took my TV off of its stand and placed it flat on its back and put a still of the UI on the screen. From there, I purchased red and blue light strands and placed them around the space to create ambient lighting. To film, I used a Canon 7D Mark II with a 35mm f/1.4 and a 24-70 f/2.8. I planned out the shots needed for the project and interacted with the screen as if it were functional. All motion components were implemented in post.


RAW VS POST

This is an example of the raw footage from the camera and then the footage after being brought into After Effects.

In order to achieve the proper look and feel, I had to first mask out my hand and motion track it with Mocha Ae. After masking out my hand, I could work with bringing the UI together with the raw footage. In order to make everything match, I used a combination of 3D AE layers, adding noise to UI, basics shape layers with feathering and lastly heavy blur on the bokeh in the footage. From there, I did some standard global color corrections to match scene to scene.

 

PAIRING 3D OBJECTS WITH FOOTAGE

A similar process was used to pair the 3D animations from Cinema 4D to the UI and raw footage. The 3D footage was paired using the Camera Caliibrator tool in Cinema 4D to match the real world camera.

SCENE REFINEMENT

This is gallery shows my process of bringing together the 3D footage, camera footage and UI elements.

LOGO ANIMATION

I took Boeing's existing logo and animated it in After Effects to help tie the piece together in its final stages.

Selected Works

Cadence - ThesisUX, UI, AR, VR, Motion, Brand, Product

RUNCLUBUX, UI, Interaction, Cross-Platform

Meetups for InstrumentUX, UI, Motion

Boeing FlightBoardUI, 3D, Motion

RIT VR ExperienceVR, 3D, Motion

AR Auxiliary ServicesUX, UI, Programming, AR

PunctualUX, UI

LEGO HeistAR, 3D, Motion

Impact VRMotion

Weezer3D, Motion

PublicationsWriting

World Around MePhotography

© CHAD COOPER 2022