Recreating a basic Google Pixel live wallpapers (Part 1)

Nishon Tandukar
Nov 5 · 4 min read

Pixel phones feature a set of amazing wallpapers, of which most feature beautiful animated earth imagery. These are made exclusively by google for the Google Pixel devices. However, you can install and run in any devices from APKs listed at XDA.

Since the first iteration of the phone, these wallpapers have been around and as of this writing, there have been four different iterations of the phone. Each year new scenic places are added. However, I feel I know a few scenic imageries that they have missed.

With little to no other published tutorials, This is how I tried to recreate it.

Google Pixel’s live earth wallpapers
Ours basic version of live earth wallpaper

This post is rather like a logbook, than a tutorial.

Day One

  • Googled the term ‘open 3d objects in android’ and stumbled upon android-3D-model-viewer on GitHub
  • The app came preloaded with 3D models and hence I was able to interact with the 3D model.
  • Found out I had to somehow export the earth imagery to a .obj extension. So that it could be loaded on android-3D-model-viewer
  • Googled the term ‘3D drone imagery obj’ and found a 3D earth terrain that could be downloaded as .obj
  • Downloaded a high-resolution 3D model, created using drone imagery and loaded it on android-3D-model-viewer (Fingers crossed 🤞)
  • The app immediately crashed, hinting it could not allocate enough memory to load the model (aka Out of Memory Exception)

Day Two

  • Googled the term ‘open obj file in Ubuntu’ and stumbled upon Blender.
  • I tried loading the 3D drone imagery on it. (Fingers crossed 🤞)
  • I tried until the nth time, but it didn’t load the 3D file. Maybe I was doing something wrong, or Blender wasn’t installed properly (Who knows 🤷 🤷)

Day Three

A heightmap of an mountainous area

A heightmap is a grayscale image where the darker areas represent the greater depth and vice versa.

Day Four

  • I asked how to download map tiles to GIS experts, whom I work with at NAXA .
  • Found out a tool named SAS.Planet can be used to download high-quality tiles as JPEG.
  • However, the tool took an upper left and lower right coordinates for the bounding box, as inputs to crop map tile and the terrain.party and tangrams both gave upper right and lower left as bounding output.
  • Wrote a simple script in JavaScript to map upper left, lower right to upper right to lower left coordinates taken from StackOverflow
lat2 lon1 (top left) — — — lat2 lon2 (top right)
| |
| |
lat1 lon1 (bottom left) — — — lat1 lon2 (bottom right)
var terrain = “83.042256,29.267561,82.918684,29.159763”
var res = terrain.split(“,”);
lon2 = res[0]
lat2 = res[1]
lat1 = res[3]
lon1 = res[2]
console.log(“Upper left: “,lat2,lon1)
console.log(“Lower right: “,lat1,lon2)
A 3D map tile loaded in Blender. (Yayy!)

Day Five

  • I had two options to render 3D file One being, Rajawali, and other being Filament. Choose Rajawali as it was easier to use and well-documented.
  • Loaded obj file on Rajawali but it did not load texture
  • Found out when a 3D file is exported as .obj, it creates two different files. First is a file with all the coordinates of the 3D mesh and second a .mtl file with information on the styling and texture of the object.
  • Found out the path of the texture needs to be specified in the .mtl file
  • After a few hours of work. The model loaded with texture, the camera could be moved using touch gestures, A Change in the tilt of the device would move the 3D model and last but not the least. A live earth wallpaper could be set.

In part 2, I will be giving you all, step by steps instructions on how to you make your own. Stay tuned.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade