Inspired by this tweet of an american smart app, I wanted to make an AR filter for a London Oyster card.

This required some different design decisions due to the complexity of the tube map.

  1. Readability
  2. Resolution
  3. User scaling

The London tube map is a great design, but it assumes a white background to ideal readability, so before using the map I added a white stoke and a black drop shadow

 

 

 

 

 

 

 

 

Spark AR limits textures to 1024×1024 to reduce file size, but that with the aggressive compression meant that the place names were very difficult to make out. To get around this I used a similar technique to panoramic filters, I split the map into a 4×3 grid of 1024px tiles and aligned them perfectly grouped into an empty to keep all the elements together.

 

The interaction it pretty by the books, the only complexity was using adds and multiplies where relevant so the map had a correct starting position, and it’s scale could be animated in.