Inspiration
Hospitality training is often based on manuals, classroom instruction, and observation. However, real guest interactions require more than theoretical knowledge—they demand quick thinking, professional judgment, and confidence.
We created XR Hospitality Trainer to explore how immersive technology can transform traditional hospitality education into hands-on, decision-based learning.
Our vision is simple: Learn by doing, practice without risk, and improve through experience.
What It Does
XR Hospitality Trainer places learners in an interactive 3D hotel reception environment.
The learner encounters a virtual guest arriving for a late check-in and must navigate six professional decision-making challenges, including guest verification and appropriate service procedures.
The experience features:
- Hands-first XR interaction using ray, pinch, and poke selection
- Six interactive hospitality decisions
- Spatial training panels and contextual guidance
- Immediate feedback and performance scoring
- Pause, resume, and tracking-loss recovery
- Replayable training sessions
- Desktop and touchscreen alternatives
The simulation is designed for focused, seated learning without requiring extensive physical movement.
How We Built It
We developed the experience using Babylon.js, WebXR, TypeScript, React, and Next.js.
The virtual reception combines custom procedural geometry, physically based materials, lighting, and a rigged, animated guest character built from a licensed third-party asset.
Our spatial interaction system uses WebXR hand input with selection safeguards to reduce unintended interactions.
The competition version is packaged as a standalone static web experience and hosted on Cloudflare Pages.
Challenges We Faced
One of our biggest challenges was making the virtual guest look and behave naturally. We iterated on character anatomy, hand positioning, rigging, animation, and lighting to create a more convincing interaction.
Another challenge was designing spatial interfaces that remain readable and usable across desktop, mobile, and immersive XR environments.
We also developed safeguards for hand-tracking interruptions and tested interactions with Meta's Immersive Web Emulator.
What We Learned
Immersive training is not simply about creating a realistic virtual environment. The most important elements are meaningful decisions, intuitive interaction, clear feedback, and a comfortable learning experience.
We also learned the importance of honest testing and distinguishing emulator validation from physical headset performance.
Competition-Window Improvements
Building on our existing XR training platform, we developed a dedicated hospitality competition experience with a redesigned reception scene, improved animated guest, hands-first interaction flows, tracking-loss safeguards, spatial UI improvements, and a replayable assessment.
What's Next
Our next priorities include physical Meta Quest validation, performance optimization, more realistic guest communication, additional hospitality scenarios, and integration with the broader learning platform.
The long-term goal is an extensible immersive training solution for hospitality professionals.
Try It Out
Live WebXR Demo:
https://demo.vrealx.com/compete
Demo disclosure: Desktop footage was recorded in real time. The hands-first segment uses labeled, step-by-step Meta IWER emulator renders with scripted hand input. Physical Quest performance has not yet been verified. Demo scores are not permanently stored, and certificates are not issued.
Built With
- babylonjs
- blender
- cloudflare-pages
- css3
- html5
- javascript
- meta-immersive-web-emulator
- nextjs
- node.js
- react
- typescript
- webgl
- webxr
