WebXR work for Frame by Virbela, a US-based company (California, San Diego).
Building on the Responsive Dialog GUI component, I then worked on the CONNECT/SPECTATE UI panel.
This WebXR GUI component features a responsive design so that it can adjust its layout and display different content based on whether:
For this task, I worked on:
- Designing the UI layout
- Coding a WebXR prototype to test the design in VR mode
- Writing the base code in Babylon.js for the GUI component and styling the WebXR UI elements
- Using state management to update the responsive UI panel depending on the Frame settings and spots availability
- Testing and validating the implemented design in desktop and VR modes
The video below shows the different permutations of the responsive CONNECT/SPECTATE UI by using two browser windows to simulate two peers (one Admin and one Visitor) connecting to the same Frame.
The Making Of
After designing the different states of the CONNECT/SPECTATE UI using standard static mockups, I moved on to coding the WebXR prototype.
This way, and by working in an isolated environment, I was able to:
The video below shows the WebXR prototype for the responsive CONNECT/SPECTATE UI panel.
Coded version of the CONNECT/SPECTATE UI panel (Spectator mode enabled).
Coded version of the CONNECT/SPECTATE UI panel (Spectator mode disabled).
Coded version of the CONNECT/SPECTATE UI panel (no spots available).
Check out more works for FRAME by Virbela: