[XRCLOUD] Inline frame component to implement shopping and Unity content from the web metaverse

BELIVVR
BELIVVR(EN)
Published in
4 min readFeb 23, 2024

We’d like to introduce you to the ambitious new features we’ve announced for XRCLOUD. This feature is not an official feature of Mozilla Hubs, but ㅠBELIVVR’s custom feature, the Inline Frame Component, was developed out of a requirement: “Can’t I shop in the web metaverse or use Unity WebGL content?” First, I will show you a video of its use.

Mobile shopping and Unity WebGL content are also available on Web Metaverse.

Have you noticed the great potential this feature has? We will also explain how to use it in more detail.

Description of how to use the inline frame component Spoke editor

This feature is currently only deployed on the Staging server and is being tested to be provided to partners first. The function in the picture below receives three major option values.

Inlie frame Spoke Component

I will explain the value of each option.

1. ImageURL: This function acts as an image button, so this is where you upload the link to the image file. Just upload the image file in the web editor and paste it into the Copy URL.

2. URL: This is the destination URL when the corresponding image button is pressed. You can enter a link to the mobile shopping page or Unity WebGL content in the URL.

3. Frame Option: This is the target that determines on which side the link is displayed on the Hubs metaverse play screen. There is Main and Side. Main is the area where the 3D screen is visible, and Side replaces the chat area on the left. Side is mainly used when distributing mobile page format sites, and Main is useful when distributing the entire page. Main is a chat area that is immediately activated on a PC, so it is good for use in education using the metaverse, so we are guiding its use for WebGL content.

Frame Options: Side will display the frame in the left position.
If you use Frame Option: Main, a chat window will open and the URL will open in the main 3D area.

Based on this, we created a variety of Unity web realistic content within our XRCLOUD so that you can enjoy it with your friends in the classroom.

I don’t know if you’ve noticed, inline frame is the full name for the HTML tag iframe. The feature implements by iframe. Unfortunately, it is not available in the VR HMD’s Immersive mode. WebXR is not support iframe tag. but customer and developer’s request for iframe is increaments. so I’ll think will be support iframe someday.

2. Provision of WebGL page management tool of CMS management tool

We’re also building a CMS that provides management tools to deploy WebGL content in Unity for our partners who can take full advantage of these inline frames. I will post again about the detailed features of CMS. Among these, the WebGL Content Management Tool has been implemented to help organize Unity WebGL content. If you upload a WebGL file as a compressed file, you can extract the URL and thumbnails automatically distributed by the system and distribute them to the space editor in the space management menu.

WebGL uploader
WebGL Page Management List

3. Passing data in inline frames

To take better advantage of this feature, I think will be dynamically pass inline frames and 3D spatial data. This is because measures are needed to distinguish and process users on the page where the main body is inserted. If it is a web page with management rights, it is possible to share data linked to sessions or cookies, but general case is you have not right for aceess cookie or session. so you needs API for transfer data.

So We’ll support extends parameter, “LinkPayload” in getRoom API. This parameter is payload for sending data to inline frame. We will share detailed API Document again soon. So, WebGL page in upper use case can User Identification, through getROOM API. You can also think about the interaction between the sideview and the metaverse 3d main window.

4. XRCLOUD’s greatest potential is its web connectivity.

The advantage of WebXR-based bus XRCLOUD is that it is connected in this way and has infinite scalability. In the case of mobile in side view, you can use the mobile page without chage. These features are the same as those found in MS Edge browser’s Side bar. In fact, upper sample URL I created was also taken from the page on the side bar of the browser.

Sidebar of Edge Browser

We want to apply it to the product server as soon as possible so that more people can try it, but we don’t have enough people resources. but I want to let you know that we are working hard and that there are some great features, so I wrote this post.

--

--

BELIVVR
BELIVVR(EN)

A digital romantic creating a new analog era