Introducing WebXR for web-based virtual reality and online fieldwork
By Christopher John, Academic Content Developer, School of Design, University of Leeds (Formerly of Durham University Centre for Academic Development), and Dr Trudi Buck, Associate Professor, Department of Anthropology, Durham University
Over the past twelve months, we have been working on a project to develop an online fieldwork activity for undergraduate forensic anthropology learners at Durham University. Involving the investigation of a clandestine burial scene and an analysis of human remains, the activity provides a companion or alternative to in person fieldwork. In doing so, increasing inclusivity of the learning experience for remote learners, learners with poor mobility or additional learning needs, and learners unable to attend the event, whist also providing an enhanced opportunity for all learners to repeat or prepare for fieldwork activities.
The online fieldwork involves a range of learning activities emphasising visual analysis, including:
- Identifying the burial site
- Mapping the crime scene
- Excavating artefacts
- Analysing human remains and producing a biological profile
The activities draw on a range of digital learning content, including aerial photography of the burial site, 360 degree photography of a dressed crime scene, and 3D models of human remains, as illustrated in Figures 1 and 2.
Whilst developing the activity, we were keen to explore the potential for leveraging digital learning content across virtual reality devices in support of enhanced visual analysis activity, such as crime scene mapping or bone analysis.
Using the open-source Babylon.js 3D engine and the WebXR Device API, we were able to create immersive virtual reality experiences from panoramic and 3D digital learning content. WebXR is a standardised JavaScript API supporting the interface between web content and mixed reality hardware such as a VR headset (Mozilla, 2022). Babylon.js includes support for WebXR, and with minimal coding an immersive rendering of web content can easily be achieved. The following video (Slide 2) illustrates immersive engagement with panoramic imagery of the crime scene area, allowing a detailed visual analysis to take place in support of a mapping activity.
As shown in the video (Slide 2), WebXR content is delivered via the headset browser. When the headset icon is selected, an immersive WebXR session begins with no appstore or headset sideloading required.
Babylon.js can also detect when content is rendered immersively, providing a mechanism for changing content characteristics or mechanics for virtual reality engagement, as shown in the following video (Slide 3) where a ground surface and 3D interface are introduced when a WebXR session begins. In doing so, providing a virtual reality space for the learner to organise and conduct a thorough visual analysis of human remains.
We were really impressed with Babylon.js, it has a lot of built-in virtual reality features such as teleportation and controllers, and the Mixed Reality Toolkit in support of interface design. Further, there is a vibrant developer community with lots of working examples available via the Babylon.js Playground and GitHub.
Babylon.js is not the only platform supporting WebXR, Three.js also includes support, whilst support can be seen on platforms such as Thinglink and Sketchfab, providing a solution requiring no JavaScript skills, as shown in the video (Slide 4).
Whilst WebXR support and performance does currently vary, hopefully in future it will mature and provide a standardised and cost-effective solution for web-based virtual and augmented reality in support of digital learning.
More Information
References
It would be great to hear what others have done or ideas they have – please do post them in the comments below.
Did you enjoy reading this? To become a member of our community see Membership details here – https://www.alt.ac.uk/membership
1 Comment
How does WebXR enhance the accessibility and user experience of virtual reality on the web?