Project Sections

WagooAR is an emerging company that creates efficient, spatially-aware augmented reality technology. In order to gain more awareness in the market, they needed a website and a video showcasing their technology and its applications.

The project required me to create animations and composite custom graphics onto live footage for their technology demonstration videos as well as the design, construction, and maintenance of their website.

Tech Demonstration Video

One of the main aspects of the project was to take live footage of various hypothetical scenarios and overlay a mockup of glasses and the UI as if the viewer was using the product.

The scenes required both 2D motion tracking and 3D camera tracking, depending on the type of motion. After the shots are tracked, the interface graphics are designed, animated, and composited onto the scene, along with a mockup glasses frame around the edge.

Compositing

Mockups of the UI were designed and composited into the scene to demonstrate potential applications for the technology.

Conference Scene

Conference Scene

Missed Connections Scene

Missed Connections Scene

Grocery Store Scene

Grocery Store Scene

Warehouse Scene

Warehouse Scene

Retail Scene (non POV)

Retail Scene (non POV)

Animations

In addition to compositing UI mockups, there are also scenes that are entirely 3D animation to explain the technology and its systems.

For the turntables, the antennas and their components are rendered in 3D on top of a pair of glasses. Glasses models were found online and modified and improved for our uses.

A turntable render of glasses with the antennae and battery

Glowing antennae on muted render

Glowing antennae on muted render

Antenna diagram superimposed on the turntable

Antenna diagram superimposed on the turntable

This character model was purchased online and then cleaned up and re-textured at a higher resolution and with different facial features.

Glasses on an animated character

Glasses on an animated character

The character walking near an example signal object

The character walking near an example signal object

Website

A website was also needed to accompany the video and to give the company a more solid presence. I worked closely with the client to visualize his ideas for the website, making sure the design was responsive on many different devices. We chose Squarespace due to its ease of use to create and maintain. No themes really gave us the style, the layout, or the building blocks that we needed in the design, so there are lots of hand-crafted elements and CSS.