Creating Immersive AR Experiences

Augmented reality (AR) is unique in that it mixes virtual reality (VR) with reality. To truly get the most out of AR you need to physically move into the space where the virtual elements are being projected into the real world. For this reason, it is important in the AR creation process to consider design and technical elements that encourage users to explore.

Monarch Life Cycle AR Experience

Many primary school students have the opportunity to learn about life cycles by observing plants and insects firsthand on a field trip. For those that live in an area where this isn’t possible, we created an AR experience on the monarch butterfly life cycle that allows students to study and explore the topic virtually.

The original design was built on a rectangular plane so as to fit within a classroom and thus turn the entire space into a monarch butterfly garden. It was comprised of static models of trees, plants, and monarch butterflies in the various stages of the life cycle atop a bed of grass.

However, we soon noticed some problems with this design. Some students interacting with the experience stood stationary on the sidelines while trying to navigate on screen. Others would begin to wander “into” the experience but would often become disoriented and not know where the experience began or ended. We realized that there was nothing pulling the students in, orienting them relative to the AR components, and encouraging exploration.

To remedy these issues and ensure that students have a valuable learning experience, we made a few design and technical tweaks.

Design Elements

To address the issue of orientation, we re-designed the experience to fit a concept we created called an “AR Island.” We designed it so that it represented a condensed version of a typical habitat for monarch butterflies but was still diverse enough to include a variety of different elements. The natural, visible boundaries of the island provide the spatial clues as to where the AR experience begins and ends, thus solving the confusion some users experienced.

We also incorporated animated elements into the experience. Using an animation technique outlined in the next section, we programmed monarch butterflies to fly in repeating loops around the experience. The visuals of their fluttering wings and winding flight paths around the island help to convey the sense of a thriving ecosystem and create further engagement.

Given that in a more hands-on exploration such as a field trip, students would actively search for and identify different elements of the butterflies’ natural habitat, we chose to turn the AR experience into a scavenger hunt. Students can search for strategically placed models around the island that trigger an arrow when “found.” This helps guide a virtual exploration and allow students to become more familiar with the habitat and the life cycle components.

Technical Elements

To animate the flapping of the butterfly wings, we used a technique similar to the concept of still-frame animation. Four models of the butterfly are superimposed on each other, and then the visibility of each one is turned on and off sequentially to make it appear as if one monarch is flying. The coding is straightforward using interval calls as shown:

$interval(butterfly1, 50);
$interval(butterfly2, 80);

The paths that the butterflies take around the island are toroidal curves so that the butterflies appear to be “fluttering” as they fly around in the experience:

$scope.view.wdg.Butterfly1_1.x = (rmonarch + Math.cos(3*t)) * Math.sin(2*t);
$scope.view.wdg.Butterfly1_1.z = (rmonarch + Math.cos(3*t)) * Math.cos(2*t);
$scope.view.wdg.Butterfly1_1.y = Math.sin(3*t) + 3;

The scavenger hunt design of the experience allows students to touch different elements on the tablet screen as they find them. When they do so, arrows and labels pop up and identify the elements. For example, a user may touch the butterfly, and a label will appear to provide the name “monarch” and also mark it as “found” for the purposes of the scavenger hunt.

Functions are written for each discoverable element which simply turn the arrows and labels “on” when the element is touched:

//set the flag for the Rock being found $scope.Rock_Found = function () {
$scope.view.wdg.Rock_Label.visible = true;
$scope.view.wdg.Rock_Arrow.visible = true;
$scope.view.wdg.Rock_redline.visible = true;
$scope.view.wdg.Rock_gotit.visible = true;
}

By incorporating the “AR island” design concept, animated elements, and a scavenger hunt theme, we were able to upgrade the original experience into an immersive and engaging AR experience that can be a useful tool in the classroom.

Tags: Augmented Reality

About the Author

Dr. Jordan Cox

Dr. Cox has a Ph.D in Mechanical Engineering from Purdue University. Prior to joining PTC he taught for 25 years at Brigham Young University and consulted as a design systems specialist with aerospace companies like Honeywell and United Technologies. His research focused on advanced engineering analysis and design systems automation. He joined PTC in 2010 and currently is the Senior Vice President of the Global Academic Program. His team provides software, curriculum and other educational resources to more than 3,000 universities worldwide. Current interests include CAD/CAE/CAM, Digital Transformation, Neural Networks and Augmented Reality.