.jpg)
.jpg)
At the end of 2024, Sant Pere de Ponts celebrate its 1,000th years old anniversary. Spaces like this, have been silent witnesses to a thousand years of history, carrying untold stories within their walls. We have countless articles detailing this history, ready to be explored . But , In an era where reading often struggles to compete with the dynamic pull of films and games, we have to reimagine how historic storytelling is experienced.
This project, uses WebXR funtionality, a medium that allows immersive experiences through both VR headsets and mobile browsers. The goal is to take these traditional articles and transform them into living, breathing spaces. Im sharing my redesign process as XR Designer to redesign how users interact with the rich history of Sant Pere de Ponts using WebXR, transforming static articles into interactive 3D environments. This blog outlines the step-by-step design process, how to work with WebXR's unique functionalities and limitations, what I learned along the way, and how WebXR differs from tools like Unity.
-------
Design Process
1. Understanding the Difference Between WebXR and Unity
When I started the project, the first thing I realized was how different WebXR is from Unity in both its capabilities and its constraints.
- Unity offers customizable interactivity with advanced 3D rendering, physics, and dynamic effects. It allows for intricate mechanics, but it also requires users to download and run standalone apps.
- WebXR, on the other hand, runs directly in browsers. It’s highly accessible and cross-platform, but it comes with performance constraints and relies on pre-defined APIs.
For me, this meant I had to prioritize simplicity while making sure the experience felt immersive . Instead of relying on Unity’s dynamic visuals, I had to use WebXR’s controller-based interactions, teleportation, and lightweight 3D assets to tell the story that are still engaging for users.
2. Wireframing
2.1 . Lobby Scenes Design:
The user begins in a minimal environment with a teleportation marker and an introductory 3D centerpiece (the Sant Pere 1,000 Years logo) with an instruction “Transport to approach”
WebXR Functionalities Used
1. WebXR Input Sources API : Manages user inputs like controllers, hand tracking, or gaze for locomotion.
2. WebXR Hit-Test API : Determines where users can teleport or interact.
3. XR Anchors API : Allows objects, like the teleportation marker and 3D logo, to remain fixed relative to the user’s environment
4. Three.js Camera Controls : Implements smooth transitions for teleportation, ensuring users move from point to point without abrupt shifts that could disrupt immersion.
2.2 . Scenes UI Design:
The user will find a row of interactive panels, each shaped like a Gothic arch to reflect the historical essence of Sant Pere. These panels represent different chapters of thestory with a CTA of “Enter Immersive Reading” button anchors in the interface
WebXR Functionalities Used
1. Proximity-Based Triggers
- WebXR Input Sources API: Detects user proximity to the panels,triggers the interactive arch UI to appear in the space
- Three.js Raycaster: Enables controller-based proximity detection with the arc UI
2. 2D UI as Triggers
- DOM Overlay API: Embeds 2D elements for buttons and text, "Enter Immersive Reading" button
- Three.js PlaneGeometry: Renders the panels as flat, clickable 3D objects that integrate seamlessly into the space.
- CSS Animations: Adds hover effects to highlight interactivity on the arc UI
I had gotten this idea from the 360 Panorama UI, but instead of Using Sphere , i designed Arc shaped UI to trigger the different scenes
2.3 . Immersive Reading Design:
Once the user selects a panel from the UI, The selected Gothic-arch-shaped scene grows larger, expanding toward the user as if it envelops their surroundings.
In the immersive reading environment, the user is surrounded by a 360° stereo panorama of Sant Pere’s interior. By utilizing WebXR’s 360 Stereo Panorama Function, the scene is rendered with depth, providing a realistic sense of space. Each eye is provided with a slightly offset photo, enhancing immersion through a stereo effect.
The chapter's content materializes within the space as floating text , with a fade-in effect starting as small text that grows into a clear, readable size, filling the text box. Simultaneously, an ambient audio track begins to play in the background.
WebXR Functionalities Used
- WebXR 360 Stereo Panorama Function : Used to create a realistic sense of depth by using separate images for each eye.
- XR Anchors API : Use to Keeps the floating text content fixed at an ideal position within the scene.
- DOM Overlay API : This function assist to renders the floating text and transitions smoothly, blending the clarity of 2D typography with the immersive 3D environment.
- Three.js Animation Framework : Use to handle growth effect of the Gothic arch and the fade-in, scaling effect of the article text.
- Web Audio API : Plays background audio, synced with the text fade-in.
2.4 . Interactivity Design in Scenes:
As the user progresses within the immersive reading environment, additional storytelling elements, such as historical images, are presented as floating media panels in the 3D space. Using controller users have the ability to zoom in the painting even when they can't come closer to it.
When user are done , they has a choice to Exit Immersive Reading . Upon clicking exit, the scene transitions with an upward motion, creating a "throw-up" effect that
returns the user to the main lobby environment.
WebXR Functionalities Used
- WebXR Hit-Test API : Detects where the user is pointing their controller to activate the zoom in function
- XR ANchor API : Attach zoom in elements and meta data to fixed location of zoomed in the scene.
- Three.js Plane Geometry : Renders the media panels as flat, lightweight objects within the 3D space.
- Web Audio API : Use to syncs subtle sound effects with user actions, such as a audio cue when a arc panel expands out of focus.
3. Learnings on Designing for WebXR
Reflecting on designing for this project, the design process would have been significantly different if we have had used Unity instead of WebXR, but at the same time taught me how to work creatively within constraints.
What Unity Would Have Enabled
- Advanced Visual Fidelity: Unity's high-quality rendering, dynamic lighting, and shaders would have allowed for hyper-realistic visuals, making the environment and UI even more crisp and immersive.
- Custom Interactivity: Unity's physics engine and animation tools would have enabled intricate mechanics like object manipulation, realistic physics, and dynamic interactions beyond basic point-and-click.
- Standalone Experience: Unity apps can be optimized for specific hardware, giving developers more control over performance and user input, like advanced gestures and spatial tracking.
- Greater Freedom in Animation: Unity's animation system could have made transitions—such as the expanding Gothic arch—smoother and more intricate, with real-time physics and particle effects to enhance storytelling.
What Would Have Been Challenging in Unity
- Accessibility: Unlike WebXR, Unity requires users to install standalone apps. This could have limited accessibility for users on mobile devices or low-end hardware.
- Development Time: Building custom interactions in Unity often requires more time and resources due to the platform’s complexity and flexibility. This was done in 4-5 Weeks.
- Cross-Platform Challenges: Deploying to multiple platforms (e.g., mobile, desktop, VR headsets) in Unity involves more effort compared to WebXR’s browser-based approach.
- Larger File Size: Unity applications generally have larger file sizes, making them less ideal for users with limited storage or bandwidth.
By understanding the trade-offs, I can adapt my approach depending on the platform—designing lightweight, accessible experiences for WebXR or fully immersive, high-fidelity ones for Unity.
Hope you enjoy reading it !
.png)
.png)