Developer guest post by Active Theory
Paper Planes started as a simple thought - “What if you could throw a
paper plane from one screen to another?”
The heart of our concept was to bring people together from all over the world,
using the power of the web - an instant connection to one another. Modern web
technology, specifically JavaScript and WebGL, powered the experience on every
screen.
Planes was initially featured at Google I/O 2016, connecting attendees
and outside viewers for 30 minutes preceding the keynote. For the public launch
on International Peace Day 2016, we created an
Experiment, which is also featured on
Play, to augment the existing web technology with native Android Nougat
features such as rich notifications when a plane is caught elsewhere in the
world.
Introduction
Users create and fold their own plane while adding a stamp that is pre-filled
with their location. A simple throwing gesture launches the plane into the
virtual world. Users visiting the desktop website would see their planes flying
into the screen.
Later, users can check back and see where their planes have been caught around
the world. Each stamp on the plane reads like a passport, and a 3D Earth
highlights flightpath and distance travelled.
In addition to making their own planes, users can gesture their phone like a net
to catch a plane that has been thrown from elsewhere and pinch to open it,
revealing where it has visited. Then they can add their own stamp, and throw it
back into the flock.
WebView
We developed Paper Planes to work across devices ranging from the 50-foot screen
on stage at Google I/O to desktop and mobile using the latest in web technology.
WebGL
From the stylized low-poly Earth to the flocking planes, WebGL is used to render
the 3D elements that power the experience. We wrote custom GLSL shaders to light
the Earth and morph targets to animate the paper as the user pinches to open or
close.
WebSockets
When a user “throws” a plane a message is sent over websockets to the back-end
servers where it is relayed to all desktop computers to visualize the plane
taking off.
WebWorkers
The plane flocking simulation is calculated across multiple threads using
WebWorkers that calculate the position of each plane and relay that information
back to the main thread to be rendered by WebGL.
To create an experience that works great across platforms, we extended the web
with native Android code. This enabled us to utilize the deep integration of
Chromium within Android to make the view layer of the application with the web
code that already existed, while adding deeper integration with the OS such as
rich notifications and background services.
If you’re interested in learning more about how to bridge WebView and Java code,
check
out this GitHub repo for a tutorial.
Notifications
Firebase Cloud Messaging (FCM) was used to send push notifications to the
Android app. When a user’s plane has been caught and thrown by someone else, a
notification showing how many cities and miles it has travelled is sent to the
device of the plane’s creator via FCM. Outgoing notifications are managed to
ensure they are not sent too frequently to a device.
Background Service
We implemented a background service to run once a day which checks against local
storage to determine when a user last visited the app. If the user hasn’t
visited in over two weeks, the app sends a notification to invite the user back
into the app to create a new plane.
The Communication Network
Our application runs on a network of servers on Google Cloud Platform. We used
built-in geocoding headers to get approximate geographic locations for stamps
and Socket.IO to connect all devices over WebSockets.
Users connect to the server nearest them, which relays messages to a single main
server as well as to any desktop computers viewing the experience in that
region.
Moving forward
This approach worked extremely well for us, enabling an experience that was
smooth and captivating across platforms and form factors, connecting people from
all over the world. Extending the web with native capabilities has proven to be
a valuable avenue to deliver high quality experiences going forward. You can
learn even more on the
Experiments website.
