July 2024Technology

Reframing Office Hours: Reimagining Mozilla Hubs in FrameVR

By Elizabeth Enkin, University of Nebraska-Lincoln

Elizabeth Enkin

DOI: https://www.doi.org/10.69732/IWXB4020

Collaborative 3D spaces (also referred to as “metaverses”) are virtual environments that are accessible through desktop or immersive VR. They can offer numerous benefits to language students, including increasing enjoyment and decreasing anxiety (see this article by Tricia Thrasher and my own research referenced below for more discussion). As compared to traditional platforms like Zoom, web conferencing in metaverses is a more dynamic experience because the entire 3D environment can be used: for moving around, sharing screen or webcam views in different locations, and using various items (such as 3D models) for in-world instructional activities. 

Since 2021 I have used such a collaborative platform, Mozilla Hubs, for hybrid office hours to add more flexibility, enhance instructor approachability and student engagement, and potentially reduce speaking anxiety. I also appreciated that students could use a headset in our language lab for a more immersive experience. While some students were initially intimidated by the new technology, many were intrigued and enjoyed the unique experience that Hubs offered. It was also easy (and fun) to learn. 

Mozilla Hubs, launched in 2018, was a web-based and cross-platform (desktop and immersive VR) 3D web conferencing platform. Though it was a favorite among educators due to its ease of use and various features, it was sunsetted this May. You can read more about how Hubs was used for an intermediate-level Spanish activity in this article by Rachel Mamiya Hernandez, where students used in-world resources (3D objects, images, GIFs) to complete a task.  

In my search for comparable platforms, I discovered FrameVR, a web-based, cross-platform metaverse that is more robust than Hubs. Identified as a metaverse best suited for education by the Engaging Languages in Intercultural Virtual Exchange consortium, FrameVR allows users to share spaces with anyone with a free account. In this article, I will detail a transition from Hubs to Frame for office hours, and offer additional ideas for classroom use. Before getting started however, you can view a brief walkthrough of my FrameVR office below:

Picture 1 – Animated GIF walkthrough of my FrameVR office - shows the virtual reality world with the avatar moving through it, shows Dr. Liz's office, a waiting area, and the whiteboard
Picture 1 – Animated GIF walkthrough of my FrameVR office

What is FrameVR?

FrameVR was released in 2023. Similar to Hubs, it allows guests to use avatars to enter a 3D virtual environment, simulating a real shared space. FrameVR supports both spatialized voice and text chat, and it enables users to share multiple screens and webcams, making it ideal for office hours. It is also highly accessible, running on both desktop and mobile devices (on Chrome, Safari, Firefox, or Chromium-based Edge browsers), as well as VR headsets (using the Meta, Chrome, or Safari browsers). A visual representation of a virtual environment (“frame”) is shown below.

Picture 2 – A picture of an Android-type avatar in a FrameVR space (“frame”) called “Aeropolis” (main controls are located across the bottom of the screen) - An Android-type avatar in the “Aeropolis” Frame space, with main controls located across the bottom of the screen.
Picture 2 – A picture of an Android-type avatar in a FrameVR space (“frame”) called “Aeropolis” (main controls are located across the bottom of the screen)

With the free plan, you can create three virtual spaces, each accommodating up to eight participants simultaneously. This setup is ideal for both office hours and group work. If you were previously a Hubs user considering a transition to Frame, or if you are new to metaverses, the overview chart below provides key similarities and differences between the two platforms.

Name of tool Mozilla Hubs
(sunsetted May 31, 2024)
FrameVR
URL https://hubs.mozilla.com/  https://learn.framevr.io 
Primary purpose of tool  Social collaboration (browser-based), in desktop or immersive VR Social collaboration (browser-based), in desktop or immersive VR
Free plan Yes (unlimited spaces) Yes (3 rooms per account)
Ease of use Relatively easy Relatively easy
User limit (per space) 25 
Room invite and privacy  Yes (share invite/web link with anyone), private room Yes (share invite/web link with anyone), private room (with password protection option)
Comparable features:
Environments Various scene options (101) Various scene options (currently 43) 
Avatars Various options, and can create an avatar with Ready Player Me  Choose from Android, Human (customizable), or Ready Player Me 
Sharing and Collaboration User can share webcam or screen/window/tab (with system audio)  User can share webcam and screen/window/tab (with system audio) simultaneously via “Streaming Screen” assets
Place objects (3D models, 3D scenes, 3D avatars, GIFs), images, videos, audio, PDFs) Add similar assets and more (3D models, images, videos, PDFs, text, 3D text, 3D shapes, effects, 360-degree photos and videos, news browsers)
Upload content and create web links Upload content and create web links; also add an in-world web browser asset
Voice (spatialized) Voice (spatialized)
Text chat (with attach/upload file option) Text chat (cannot attach files in free plan but can make assets, like PDFs, downloadable)
Use breakout rooms in the “Hubs School” space Add/use “private voice zone” assets
Pen tool Doodler and Whiteboard assets 
Camera tool (capture in-world images and video with audio) Screen/tab/window capture (record system audio on tabs)
Avatar Reactions/Emotes Avatar Reactions/Emotes (with more options)
Account creation/log-in No account/sign-in required (must create a free account and sign in via an email to access one’s room settings) No account/sign-in required, but sign-in required to access room settings, add/edit assets, use in-world web browser asset, or take a screen capture (sign in with a Google, Microsoft, Facebook, or Immers login, or an email) 

Setting up Your FrameVR Account and Navigating in Your Virtual Room 

After logging in, click the green button on the home screen to add a new frame. Then, select a room name and environment from the available options (see the picture below of some of the choices). 

Picture 3 – Top two rows of the “Pick Environment” screen - choices are exhibition lounge, modern gallery, neo office, aeropolis mini, support center 2, AI room, AI horizon, atlas hall, alpine lodge, outdoor theater 2
Picture 3 – Top two rows of the “Pick Environment” screen

There are various environments to choose from, including office, lounge, and event type of places, as well as a resort, garden, theater, lodge, and campus environment, to name a few. Some closeup pictures of several environments are shown below. 

Picture 4 – Different frames/environments: “Skyrise” (top left) - a futuristic patio, “Resort” (top right) - two futuristic buildings, “Exhibition Lounge” (bottom left) - a futuristic room with exhibits, “Zen Office 3.0” (bottom right) - a futuristic room with various chairs and desks
Picture 4 – Different frames/environments: “Skyrise” (top left), “Resort” (top right), “Exhibition Lounge” (bottom left), “Zen Office 3.0” (bottom right)

After clicking the green button, the connect screen for that specific frame will appear (as shown below). You can change your avatar and mic/camera settings before connecting. Others will see this screen as well when clicking on your room’s URL (and they do not need to be logged in to their own Frame account to access your room). To copy your room’s URL, click on the green share icon in the main menu. You can access the main menu by clicking on “Frame Settings” from the gear icon in the main controls at the bottom of the screen, or by pressing the spacebar. 

Picture 5 – Connect screen (top left) - Name: Guest, button that says connect, and 8 spots left, Main controls (with settings menu expanded) (bottom left) - Scene 1 of 1, help, augio/video settings, avatar settings, frame settings, meeting AI settings, change environment, Main Menu (right) - buttons for create frame and clone this frame, and menu items frame settings, assets in this frame, my frames, frames i'm a member of, frames i'm an admin of
Picture 5 – Connect screen (top left), Main controls (with settings menu expanded) (bottom left), Main Menu (right)

From the gear icon, you can also edit your avatar and change your audio/video settings. Unlike Hubs, Frame allows you to set a blur, green screen, or image background for when you appear on camera. There are many other options as well, such as changing user permissions/roles (including setting a password for your room), changing the room’s environment, managing an inventory of “assets” and those in your frame (more on assets below), and creating more scenes/environments within a frame. While we will cover only the most relevant aspects, you can read more about Frame’s functionality in the “Support” tab of the main menu. A useful tip for office hours is to set an email/text notification for when someone enters the room (under “Frame Settings”), even though a sound also plays by default when someone enters a space, unlike in Hubs. 

Similar to Hubs, in-world movement in Frame is controlled with the arrow keys and mouse (click, hold down, and drag to look around), or with the W and S (backward and forward), Q and E (left and right), and A and D (looking around) keys. Hold down Shift while moving to move faster. To see who is in the frame or start a text chat, click on the buttons on the top right-hand side of the screen (“People” and “Chat”). The other button (“Go To”) is specific to Frame and allows you to link other rooms for quick navigation between spaces. 

In the main controls on the bottom of the screen, click the mic icon to mute/unmute yourself and the megaphone icon to broadcast your voice throughout the space (which is useful for spatialized audio, where proximity to others matters). The camera icon shares a webcam view that follows your avatar, and the emoji icon allows you to use emotes and other effects. 

Below is a picture of my FrameVR office in the “Serenity Garden” environment, featuring my customized Human avatar. I have also added various assets throughout the space to make office hours run more smoothly.

Picture 6 – Three views of my “Serenity Garden” office in Frame - first one has a whiteboard with Hola! written on it, second one has text that says "waiting area", and "Dr. Liz's office". third one has two screens with buttons
Picture 6 – Three views of my “Serenity Garden” office in Frame

Office Hours in FrameVR and Adding Assets

FrameVR refers to any item or object that you add into your space as an “asset.” To further customize your office hours environment, you will need to add assets via the “Creations Menu” icon at the bottom of the screen (similar to the “place” function in Hubs), which is pictured below (the icon looks like three stars). You can also easily add assets to designated surfaces (e.g., walls) in your space (you will see a “+” icon in-world). Note that the default settings allow anyone who is logged in to Frame with their own account to add or edit any asset in your space, including changing their position, rotation, and size or deleting them. To edit an asset, click the pencil icon (next to the Creations Menu icon) on the bottom of the screen, which will bring up a side menu and a move widget on the asset (also pictured below).

Picture 7 – “Creations Menu” (indicated with a blue arrow) expanded (top left) and “More” submenu expanded (top right), “Edit mode” side panel and move widget (indicated with a pink arrow) for image asset (bottom)
Picture 7 – “Creations Menu” (indicated with a blue arrow) expanded (top left) and “More” submenu expanded (top right), “Edit mode” side panel and move widget (indicated with a pink arrow) for image asset (bottom)

Below are pictures of my office in FrameVR, this time with labels indicating the various assets I have added into the space. These assets are further discussed below.   

Picture 8 – Four pictures of my FrameVR office with various assets labeled - streaming screen, 3d model (table with clickable text label), glitter particles (floating animation), whiteboard, 3d model (table and chair set), private voice zone (in blue region), and 3d text labels (with spinning animation)
Picture 8 – Four pictures of my FrameVR office with various assets labeled

Some assets in Frame are interactive and do not require users to be logged in to use them. This works perfectly for office hours, as students will not need to set up their own account. Both the “streaming screen” and “whiteboard” assets are interactive in this way. While the streaming screens allow users to share their webcam or screen views (simply click “Share Screen,” which includes system audio, or “Share Webcam”), the whiteboard offers users easy access to in-world writing (with a download option). Importantly, and unlike Hubs, where users had to choose between sharing their screens or webcams from a menu (and could not do both simultaneously), multiple streaming screen assets can be added to a space and used concurrently. 

Among the assets in my office room, I have added three streaming screens, a whiteboard, and a text label (on a table) that is clickable to anyone (even when not logged in) and that takes you to the Canvas LMS; the latter is highlighted with a visual effect I added (a floating glitter “particles” asset). I also added an asset called a “private voice zone,” which is similar to a breakout room in Zoom, where users in your space (without being logged in) can speak privately without hearing, or being heard by, others who are outside the zone. This is my designated “waiting area.” Unlike Hubs, you can add as many private voice zones as you want into a space, and adjust/edit their size and location. I also added 3D spinning text assets as labels to ensure that students know they are in the right place.

Like Hubs, you can also upload your own content as assets (3D models, images, videos, etc.), but you can also search Frame’s inventory of 3D models or search for 3D models in Sketchfab, which is integrated into Frame (just create a free account). When adding an image asset, you can use the integrated Google image search or take a picture from your webcam. While Hubs had an inventory of 3D scenes and avatars, Frame allows you to upload your own 360-degree videos and images. In my office room, I incorporated some 3D models from Frame’s inventory, namely the table that the whiteboard sits on, as well as a chair and table set in the private voice zone waiting area. Interestingly, some in-world objects (like chairs) have “sitting” enabled, which allows users (even when not logged in) to sit on a chair in first-person view (click on the “seat” icon in the main controls on the bottom of the screen when near a chair/seat). 

There are a few additional items to consider for office hours. First, you can choose to add one in-world “web browser” asset (with system audio) into your space. Though this asset is interactive and allows users to browse the web while in-world, they must also be logged into their own accounts to use it. Moreover, only one browser is allowed to be added per space, as it can impact performance, so use caution when adding this asset. In-world writing is another consideration. Because it is easier overall for me to write using an Apple Pencil (from my iPad), I prefer using a web-based whiteboard app (such as FigJam) and sharing a tab of it via a streaming screen asset. As those types of standalone whiteboard apps are more robust than the in-world whiteboard asset, this process ensures that no pencil strokes are missed (note that I have only experienced pencil strokes being dropped when using a stylus or Apple Pencil). 

Creative Activities and Customization of FrameVR in Language Classes

FrameVR could be used in online or face-to-face language classes. You can form small groups for your three rooms, or have each group (or individual) create their own room(s). Students can customize avatars (clothes, hair, eyes, etc.) and practice basic greetings or vocabulary related to clothing or colors. Take it a step further by adding particle assets, like rain or snow, to discuss the weather. One can also create a scavenger hunt (even between rooms) or play other games like Kahoot by sharing a browser tab. Students can also contextualize a room around a theme (such as a holiday) by choosing the appropriate environment and adding relevant 3D models from the library (shown below).

Picture 9 – 3D model library (“Halloween” selected) - has models of jack o' lanterns, a witch hat, a skull, some candy, a candle, witch cauldrons, a broom, and a tree
Picture 9 – 3D model library (“Halloween” selected)

Students can also find models/artifacts via Sketchfab of the target culture (art, food/dishes, places/buildings/architecture). Searching for basic models (e.g., an apple) can also be done in other languages, and when adding an image asset, students can use the target language when Google image searching. Students could also compile models in a space centered around a theme (like “food” or “travel”), and can record audio/video assets to place around the room as narrations, so others can listen/watch when they visit. 

Intriguingly, you can also use generative AI (such as Luma AI’s Genie) to create 3D models with text prompts (in multiple languages), and then upload them (in .glb format) into Frame. This method can reinforce vocabulary or create entire art exhibits (check this article on Luma AI for more information). FrameVR is also experimenting with this type of AI integration. Learn more about that and other updates in the Frame blog, and comment below with your own ideas for FrameVR.

References

Hernandez, R. M. (2021). Bringing VR experiences into the language classroom with Mozilla Hubs. The FLTMAG (November 2021). https://fltmag.com/vr-experiences-mozilla-hubs/ 

Huang, W. (2024). Transition from Google Jamboard to FigJam: A comparison of collaborative boards. The FLTMAG (July 2024). https://fltmag.com/figjam-collaborative-boards/ 

Enkin, E. (2024). “Making it” in the language classroom: A look at 3D modeling with Luma AI. The FLTMAG (July 2024). https://fltmag.com/3d-modeling-luma-ai/ 

Enkin, E. (2022). Comparing two worlds: Spanish learners’ face-to-face and immersive social VR speaking experiences. CALL-EJ, 23(1), 22-42.

Thrasher, T. (2022). “I felt less pressure to be perfect”: Using vTimeXR for L2 speaking practice. The FLTMAG (November 2022). https://fltmag.com/i-felt-less-pressure-to-be-perfect-using-vtimexr-for-l2-speaking-practice/ 

Thrasher, T. (2022). Teaching languages in virtual reality: Tips and tools for getting started. The FLTMAG (November 2022). https://fltmag.com/teaching-languages-in-virtual-reality-tips-and-tools-for-getting-started/ 

Leave a Reply

Your email address will not be published. Required fields are marked *