Creating a 360 Exhibition with XRCLOUD — Replacing KRPano and Metaport with Mozilla Hub
Hello. I’m Belivvr’s CEO Luke. When you think of metaverse, you probably think of 3D-based games like Roblox and Fortnite that kids play, but the metaverse that Belivvr focuses on for B2B is the exhibition space construction business. Especially during the 2020 pandemic, there was a lot of work in the exhibition and event industry to move offline spaces online. Belivvr was also involved in the online business of the Korean Cartoon Museum, taking 360-degree photos and creating a 360-degree museum on the web, and this experience helped us to change the name of the company to Billiver and become a metaverse company.
The most popular technologies for online museums, Metaport, KRpano
The most popular technologies at the time were Metaport and KRPano. These technologies were WebVR, the precursor to WebXR, which displays 360-degree images to give users an immersive feeling of being there. Korea’s flagship museum, the National Museum of Korea, also uses Metaport.
Metaport is implemented as an easily navigable format that connects 360-degree images with low-poly 3D maps. It has the advantage of being very easy to configure, but it is difficult to customize because it cannot be modified at the code level. At that time, we also requested an SDK from Metaport for customization, but we decided that it was not decide for terms of price and functionality.
The next most used engine is KRPano. KRPano has the advantage that once you purchase the SW, you can use it as it is on a server-based basis, and you can modify the code of the viewer. In the case of Belivvr, VR webtoon uploader and viewer were developed using KRPano. The VR Museum of the Korea Manga Museum was also able to implement a bulletin board on top of the 360-degree image by modifying the template code of KRPano. It was the best answer in terms of freedom and price if you have your own developers and develop solutions.
WebXR with VR support
However, Metaport and KRPano are older technologies that don’t support XR like MetaQuest or Apple Vision Pro. Cardboard is a technology that Google is no longer working on, so it’s effectively dead around 2020. Therefore, in 2021, we created an NFT museum of VR webtoons using WebXR technology, the next global standard for WebVR. The advantage of this technology is that it supports VR HMDs such as MetaQuest.
However, we could not ignore the technological environment that is developing into an XR metaverse environment with 6DOF-based degrees of freedom. Therefore, we are focusing on the technology development of XRCLOUD, a cloud business using the Mozilla Foundation’s Hub project that supports 6DOF degrees of freedom and PC, mobile, and XR devices on the web, and recently opened a free version of the service.
In this article, I will introduce how to create a 360 exhibition center using XRCLOUD (Mozilla Hub). The example below is completely free and does not take much time.
Let’s create a 360 museum with XRCLOUD (Mozilla Hub).
First, let me briefly explain how to do it: we’ll only be using Spoke, the web editor in XRCLOUD (Mozilla Hub). All you need is a 360-degree image and an arrow image for waypoints, and the spoke file I’ve provided below contains the URLs of the images I’ve already uploaded. If you want to replace those images, you can easily add them by dragging and dropping them into the scene (Spoke Editor) in XRCLOUD.
The concept is very simple. Mozilla Hub allows you to upload 360 images, specify waypoints, and navigate to them via links. This means that you can achieve the same thing by placing a 360 image in a sphere in space, assigning a waypoint to the center of that 360 image, and then linking to the next waypoint to move to. Here’s how we did it, and you can try it out for yourself.
The following explanation is based on XRCLOUD, not Mozilla Hub. If you create a new free tier on Mozilla Hub, you will have to wait for the server to be set up on AWS, but XRCloud has the advantage of being available immediately because it is a partitioned cloud instance.
To create a project, see the link below.
Projects that are spatially edited in the hub are called Scenes. You can create a Scean from the Sceans menu in XRCLOUD. The easiest way is to just import the one I created, and you can try editing the space shown above. Import the vspace.spoke file below with File>Import legacy.spoke project.
As you can see, we have three spaces.
To learn how to use the editor, there are some great tutorials on YouTube for elementary school students on how to use Mozilla Hub. In this post, we’ll cover the types of assets you need to know and how to deploy them.
Uploading a 360 image
First, how to upload a 360 image. There is no asset called 360 image, please select Image asset. I recommend not uploading more than 2048 images, but it should work fine. I uploaded a 4096x2048 image. Change the Projection property value to 360-equirectangular to make it a sphere.
The asset can be placed in space by adjusting its position value, angle, and size. Note that the 360 image sets the Y value 1 higher than the waypoint. This is because the camera position, which is the avatar’s eyes, is 1 higher due to their height.
Set a waypoint
Set a waypoint at the center of the 360 image. For accurate positioning, please enter the position as a number rather than dragging the mouse to position it. Also, please set a name for each waypoint and remember it. It will be used for the link later.
Lay the floor. Since XRCLOUD (the hub) moves around in 3D space, we want to make it as unwalkable as possible, so we set the floor size to at least 0.5. Smaller is better to make it look like a 3DOF, but there is a bug where below 0.5 the avatar will fly in the sky instead of on the floor. We’ll see if we can fix that in the future.
Set up the Move Arrow
Place an arrow image asset in the space that you will click to move to the next space and set a link to that image. Think of it as putting another small image inside a 360 image. You need to put it at the right angle from the camera position of the waypoint to make it look realistic. If it’s too far away, you’ll end up with a small point to click on, so play around with it, but with a little more thought, you can do a lot of tricks.
Note that the hub’s waypoint name can be found by writing #{waypoint name} in the hub’s URL. You can also type it in the address bar. That’s it for this feature. However, if you’ve created a room in XRCLOUD from scratch, it’s probably before you’ve created the room, so you don’t know what URL to put in, so first deploy the XRCLOUD Scean project.
Now create a Room in XRCLOUD and check the URL created.
The Room address is unique. However, the waypoint described above will only work if it contains the Room name, not just the OceanURL, so the value you need to enter in the waypoint will look something like this
https://xrcloud.app:4000/LzhKGDX/vsapce#position2
Room URL in XRCLOUD + “/” + Room name + “#WaypointName” This is the link you’ll put in the waypoint.
Various uses of waypoints to maximize the accessibility of the web metaverse
If you’re a keen observer, you’ve probably noticed the role of waypoints in XRCLOUD (Mozilla Hub), where you might want to direct a user to a specific space, like going to a specific booth in front of a specific event space.
It’s like a hyperlink specification within a document within a web page. It’s a prime example of why the web metaverse can be more powerful than the game engine metaverse, and I think it’s an indication that the web metaverse is a child of the web.
Spoke WebEditor and Hub offer more freedom and a wider range of assets (features) than KRpano or Metaport. Most importantly, the metaverse created with Krpano is a space that can be viewed alone, whereas the Mozilla Hub is a metaverse that can be interacted with by multiple people and talked to by voice. It has many other powerful features.
If you are thinking about building a metaverse based on 360-degree photos and videos, please consider introducing XRCLOUD (Mozilla Hub).
If there is a disadvantage compared to KRPano or Metapod, considering XR, it is a little problematic that it does not provide the best UX for spatial navigation. In particular, it is a little disappointing that it does not support 3D maps supported by Metapod, but there are plans to improve it in the future.
And this is a bug that I found while doing this 360 exhibition hall case study, but when I take a selfie in the 360 image asset, the 360 image is not taken ㅜㅜ I remember that our developer struggled with the bug that the head disappeared from the camera when taking a full body avatar in the past, but isn’t it necessary to take my avatar and photo in the 360 exhibition hall?
I will try to raise an issue with the Mozilla Hub project.
Oh, XRCLOUD is available at the link below. If you want to try it out and adopt it, please contact us.
