Immersive User Experience (UX) and Augmented Reality (AR)

Introduction to AR (Augmented Reality) using Zapworks and Unity WebGL

This blog post aims to explore augmented reality (AR) using Zapworks and Unity WebGL. Adam Hayes described Augmented reality (AR) as ‘an enhanced version of the real physical world that is achieved through the use of digital visual elements, sound, or other sensory stimuli and delivered via technology. It is a growing trend among companies involved in the metaverse in mobile computing and business applications in particular.’ (Hayes, A. 2023). The video below shows examples of how Augmented Reality (AR) can be seamlessly embedded into our everyday lives. Differentiating against Virtual Reality, Augmented Reality is a more accessible platform as it doesn’t require a VR headset, this means that more people can access the software readily through their mobile devices.

Figure 1 – Examples of Augmented Reality in real-life situations. (Google, 2023).

Part 1 – Designing an AR (Augmented Reality) Experience

The first part of the task was to follow a set of instructions on concept implementation in Unity. A downloadable set of assets was used to develop a 3D augmented reality experience that could be viewed by scanning a QR code on a smartphone. Changing aspects of the Unity interface by installing plugins and packages brought the AR experience to life.

The series of screenshots below explore the development of the Augmented Reality workshop part 1,

Figure 2 – Changing the Unity build settings to WebGL and adding a new package to the Unity software, that allows us to access the Zapper assets.
Figure 3 – Deleting the original Unity camera and adding in a rear-facing Zapper camera.
Figure 4 – Adding in an image tracking target from the Zapper tab.
Figure 5 – Adding in a new PNG image to the image tracker.
Figure 6 – Importing the new 2D shack PNG.
Figure 7 – Placing the 3D shack asset into the Unity Scene.

Part 2 – Uploading and Publishing AR (Augmented Reality) Creation

The next step was to build and update the augmented reality creation ready for web upload using Zapworks. After building the AR file, I had to convert it into a zip file so that it would upload as one package to the web.

The series of screenshots below explore the development of the Augmented Reality workshop part 2,

Figure 8 – Changing the build settings ready for web upload.
Figure 9 – Creating the zip file with the four assets.
Figure 10 – Uploading the zip file to Zapworks.
Figure 11 – Tested the Augmented Reality experience on desktop.
Figure 12 – Tested the Augmented Reality experience on mobile.

Part 3 – Adding Animated Assets

The final step was to add animated assets to the Unity scene and export the build in the same way as the previous step and reupload the final zip file to Zapworks.

The series of screenshots below explore the development of the Augmented Reality workshop part 3,

Figure 13 – Followed the steps from the first tutorial to set up the scene ready for the 3D animated assets.
Figure 14 – Created a new zip file and exported the assets.
Figure 15 – Uploaded the finished 3D animated experience to Zapworks.
Figure 16 – Tested the Augmented Reality experience on desktop.
Figure 17 – Tested the Augmented Reality experience on mobile.

Experimenting with Zapworks and Unity’s WebGL to design AR (Augmented Reality)

After I had followed the initial tutorials I went ahead and sourced a three-dimensional asset to use in my own Augmented Reality experience. I chose a Fiat Abarth from the online gallery SketchFab. I ensured to download the correct file type of gITF and imported the vehicle following the previous steps into Unity. I then uploaded the zip file to Zapworks and tested the experience on mobile.

The series of screenshots below explore the development of the Augmented Reality workshop part 4,

Figure 18 – Found a 3D asset to upload to my own Unity AR scene.
Figure 19 – Ensured the right file format was download (glTF).
Figure 20 – Followed the steps from the first tutorial to import the asset into the Unity scene.
Figure 21 – Changed the attribute settings.
Figure 22 – Changed the build settings and exported the zip file ready for upload.
Figure 23 – Uploaded the experience to Zapworks.
Figure 24 – Tested the Augmented Reality experience on desktop.
Figure 25 – Changed the camera angle to see if it would fix the visual issues.
Figure 26 – Re-uploaded the new zip file to Zapworks.
Figure 27 – Retested the Augmented Reality experience on desktop.
Figure 28 – Tested the Augmented Reality experience on mobile.

Reflection

Embarking on the Augmented Reality (AR) design journey using Unity and Zapworks presented many challenges and learning experiences. The process highlighted the great potential of AR technology and also underscored the complexities of designing using the software. The frustration of technical hurdles provided a setback and unexpected challenge when it finally came to testing the final design. The technical hiccup required troubleshooting and going back through the initial set up steps to ensure I hadn’t missed anything. Despite attempting to rectify the issue by adjusting the camera angles within unity and fiddling with the settings, a resolution to my troubles remained elusive.

The obstacle highlighted the importance of understanding the complexities of AR development and interfaces. It prompted a reflective examination of the intricate details that played into changing the software and importing different packages. Moving forward I am committed to refining my mistakes and finding a solution to my encountered problems.

References

Google AR & VR (2022) Make the world your canvas with the Arcore Geospatial API, YouTube. Available at: https://www.youtube.com/watch?v=udoSz_UBUdc&t=39s (Accessed: 26 November 2023). 

Hayes, A. (2023) Augmented reality (AR) defined, with examples and uses, Investopedia. Available at: https://www.investopedia.com/terms/a/augmented-reality.asp (Accessed: 26 November 2023). 

UniBlendFollow (2023) 1964 – abarth 595SS (rigged): Mid-poly – download free 3D model by UniBlend (@blended-universe), Sketchfab. Available at: https://sketchfab.com/3d-models/1964-abarth-595ss-rigged-mid-poly-2dc606b906bb43a4b1a50330aa96ee78 (Accessed: 26 November 2023).

Related Posts

Scroll to Top