Zoo Munster – Augmented Reality App
Introduction
Statement of Purpose
The goal of the augmented reality app is to support the advertising campaigns of the Allwetterzoo Münster and to collect donations, especially for the elephant park.
A virtual 3D elephant leads the user through the new elephant enclosure. At five stations around the enclosure, the user is informed of the feeding times, about the zoo’s elephants themselves, event opportunities, event rentals, observation platforms, the affiliated tropical house, etc. Small popup windows contain relevant information in the form of text, video clips and links to websites.
At the end of the tour, the user is made aware of a donation opportunity via SMS.
At the end of the tour, the user is made aware of a donation opportunity via SMS.
Considerations
With a view to the performance of mobile devices, only 3D models with as few polygons as possible can be used.
A photo can be taken from all points of view in order to save it to memory or share it across social media channels.
A photo can be taken from all points of view in order to save it to memory or share it across social media channels.
The user experience is optimized by audio files.
Video clips are streamed.
Video clips are streamed.
Used SDKs, APIs, software application etc:
metaioSDK, junaio, Vuforia, Google Analytics, Java, ObjC, JS, C#, HTML5, CSS3, Photoshop, 3dsMax, ZBrush, Dreamweaver, Xcode, Android Studio, Unity3d, Adobe Muse
DESIGN & DEVELOPMENT
PHASE 1
Prototyping
Persona, characteristics of our typical user
Animal lovers and zoo visitors.
Design development details
3D models
Modeling of a high- and low-poly 3D-model. Afterwards came texturization, rigging, animation, lighting, rendering, export for additional use in the app and compressing for mobile devices.
Modeling of a high- and low-poly 3D-model. Afterwards came texturization, rigging, animation, lighting, rendering, export for additional use in the app and compressing for mobile devices.
ContextCard
In order to visualize the 3D models with augmented reality and to guarantee a non-shaky and stabile user experience, I placed substantial value on graphics of high tracking quality, which means the layout of the ContextCard was designed in such a way that it includes clear contours, a rich texture, no symmetry and strong contrasts.
Visuals
In order to avoid sticky app performance, I worked on finding the right balance between low-res textures and good visual quality, low-poly 3D models.
Audio
The app was supplemented by audio effects and sounds, especially regarding the button clicks and nature sounds in the background. I synchronized the animation of the elephant model with audio files and implemented them accordingly.
In order to visualize the 3D models with augmented reality and to guarantee a non-shaky and stabile user experience, I placed substantial value on graphics of high tracking quality, which means the layout of the ContextCard was designed in such a way that it includes clear contours, a rich texture, no symmetry and strong contrasts.
Visuals
In order to avoid sticky app performance, I worked on finding the right balance between low-res textures and good visual quality, low-poly 3D models.
Audio
The app was supplemented by audio effects and sounds, especially regarding the button clicks and nature sounds in the background. I synchronized the animation of the elephant model with audio files and implemented them accordingly.
Test no 1
of the very first prototype
At the time of development, I found a bug in the used augmented reality SDK that grotesquely skewed the animated 3D models that were modeled with the well-known modelling software 3dsMax from Autodesk, especially if the model was rotated around a certain axis and the rotation value strongly approached the value of 0° or 360°.
DESIGN & DEVELOPMENT
PHASE 2
The bug described above was not able to be fixed ad hoc by the developer of the AR-SDK. As a workaround, I ended up using 4 different 3D elephant models for the animation of the elephant that walks around in a circle in the enclosure in order to avoid extreme rotation values close to 0° and 360°.
The adding of audio files (nature sounds in the background, the trumpeting of the elephants, etc.), the synchronization with the animation of the elephant and the individual stations of the enclosure.
Per request of the customer, the elephant’s tail tassel was enlarged for a slightly bushier appearance.
Final adjustments of the user interface, especially exact positioning of all UI elements in responsive design.
CONCLUSION
The AR app provides a user-friendly interface and ease of operation. It leads the user through the elephant park in an entertaining way. Although the AR app is only available in German, we receive feedback via social media channels from all around the world.
Start of the application: Early spring 2012
Credits:
AVK Terwey, Allwetterzoo Münster
