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.
Paper 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 Android Experiment, which is also featured on Google 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 Android Experiments website.
Posts
