WebAR, 8th Wall, 3D
Role: Lead Developer
Agency: Hoopla Digital
Client: Studio Canal

For the latest release for Shaun Sheep's new adventure Farmageddon we were approached by Hoopla Digital to produce a WebAR experience that would introduce the world to Lu-la and experience her powers. 

The Augmented Reality (AR) experience can be accessed through a mobile web browser rather than an app. We have been using the AR Engine 8th Wall since the beginning of 2019. 8th Wall is built using JavaScript as includes 8th Walls Simultaneous Localisation and Mapping (SLAM) engine. The engine contains a number of core features such as 6 Degrees of Freedom, Surface Estimation and World Points. 

The engine also checks permissions for the required access for the use of the devices sensors and camera. For the rendering of the AR environment we used the JavaScript framework ThreeJS. This creates a WebGL canvas to leverage the best possible performance in the browser. 8th Wall integrates nicely with ThreeJS and connects to the 3D camera within the 3D scene to update its orientation and position.

The Farmageddon AR experience features a number of different states which get the user setup correctly. The first is to set a starting point in the scene where Shaun and Lu-la can be initialised. This uses surface estimation to detect a flat surface for the models to be placed onto such as a table or the floor. Using a slider the user is then able to modify the scale of the models so that they can fit in the browser window or to make them life sized. Once set up, the user can move around the model using their device and swipe up to activate Lu-La’s powers, then click to activate different animations.

The characters were supplied to us by Studio Canal, we were able to simplify the character models so that the vertex count was low enough for the best rendering performance for the browser. Animations were created in the character rigs and were based on footage from the movie. Particle effects were added to flow with movement from the characters animation and bring more magic to the interactions.