Creating a virtual gallery… and running it in VR from a web browser

Getting a headset on and jumping into a new world with its architecture, its story, its poetry is one of the dreams brought by Virtual Reality.

I worked on some projects for the Oculus Quest 2 and Steam VR and I decided to look at what could be created for the web. Allowing users to jump into a Virtual Reality environment without having to install anything, just by opening a URL sounded magical.

I missed going to the Art Galleries so I decided to create my own one, with paintings of minimalist artist Piet Mondrian and adding some Venus sculpture. It gave a short project I called Venus & Mondrian.

While working on it I discovered that making VR for the Web has plenty of different solutions which makes it a rich place for creators.

Building a web efficient 3D Design

Any place in the world can be created in 3D with more or less time, but when it comes to designing for the web, it’s good to keep in mind that the final project will be loaded from a web page. Therefore keeping its size as small as possible will save time and energy during the development process. Ideally, less than 10Mb.

To achieve that I kept the number of vertices of my 3D scene as low as possible and I kept the texture small. At this point, I saw the world divided into two parts: Low Poly Design VS Minimalist Design.

I went for Minimalist Design feeling the lack of details wasn’t an obstacle to create something cool and unique.

I used a clear blue sky HDRI and a white Marble environment made of cubes and planes. And arranged the whole to make the overall scene look cool.

This made me use only two textures: A Marble Albedo and a Marble Normal Map.

Here is the result :

Now let’s build a web experience with this

First Method: Using Unity with Mozilla WebXR Exporter and VRTK Tilia

When it comes to making VR, Unity is a rich solution, with SDKs easy to handle for Oculus, Vive, Steam VR, and Cardboard… And the most important: a lot of good tutorials available on YouTube.

As well, building for the web is made accessible by using the WebGL platform module.

Here is what I made: https://remiplus.itch.io/venus-mondrian

Here is my process :

1. Creating a Unity 2020.3 3D project and switching it to the WebGL Platform
2. Importing the Mozilla WebXR Export and the Mozilla WebXR Interaction packages from the git repository (This tutorial saved me hours)
3. Launching the “Sample Scene” from the WebXR Interaction package and building a scene with it to check it worked
4. Importing my 3D Model and re-arranging the scene as it is now a Gallery with paintings and sculptures
5. Importing the VRTK Tilia’s packages for Objects Pointers, Tracked Alias, Teleporter, and Spatial Buttons (These two tutorials helped me a for getting Tilia and getting the teleporter)
6. Optimizing the scene for VR and getting the Anti Aliasing to 4x (This tutorial by Lucas Rizotto is the best on YouTube on this subject) — As the scene was running on the web I had to optimize more
7. Designing a launching Menu with a Computer Mode and a simple First Person Controller for non-VR User
8. Building and Importing my WebGL Project to Itch.Io (How to)

9. Let’s go ;)

Second Method: Using A-Frame and 360° Images

A-Frame is an open-source web framework making it easy to create VR with HTML. It’s compatible with most headsets and easy to start with if you don’t have strong coding knowledge.

The A-Frame documentation is easy to access, with many free-to-use templates and some good tutorial series available on YouTube.

Two amazing tutorial series really helped me starting with it, one by Danilo Pasquariello and another one by Paperballoon Studios.

For the A-Frame experience, I looked for a different aesthetic workflow and went to create the gallery space as an interactive tour with basic interactions to make the overall experience fun.

Here is a link to the project: https://mondrian-venus-gallery.glitch.me/

Here is how I proceeded :

1. Creating 5 different 5K (5760x2880) 360° images renders of my 3D Gallery using Blender Cycles
2. Creating an HTML project with Glitch and setting up A-Frame inside it
3. Setting the A-Frame Event System and the A-Frame Super Hands to my code
4. Registering my 5 different environments background as images in the <a-assets> of my HTML script
5. Creating 5 thumbnails for my environment and registering them as <a-assets> on my HTML Script
6. Setting up different planes with the thumbnails as texture and setting up the event system to trigger the environment to change when they are triggered
7. Polishing the experience with some other interactions and a credit menu linking to videos and other external links

Credit Menue, check the videos, they are cool

Third Method: Using Mozilla Hubs

Mozilla Hubs is an amazing tool to open virtual places to people looking to gather with their friends and colleagues. I discovered it a few months ago and felt it was a real shame I haven’t discovered it earlier as I would have organized many more meetings in there instead of using Zoom.

Here is a presentation of Mozilla Hubs :

Here is a link to my project: https://hubs.mozilla.com/QFHETu5/venus-and-mondrian

Here is how I proceeded to get this working :

1. Creating a Mozilla Hubs account and creating a new scene in Spoke
2. Exporting my 3D Gallery model as .glb format and uploading it to Spoke
3. Setting up the room with videos, paintings, and sculpture by dragging media directly into Spoke (That’ll help you if you keep the overall small)
4. Publishing the room to Mozilla Hubs and modifying its name to “Venus and Mondrian”
5. Creating a “New Room” with this published scene
6. Getting the link and inviting people

Two avatars gathered in the gallery

Different from building a virtual space with Unity or A-Frame, Mozilla Hubs allows only a little personalization of your scene and doesn’t offer the same level of visual quality.

However, this tool has some amazing to highlight :

• it is very easy to access by anyone
• its social aspect: anyone can jump into your scene from a mobile phone, a computer, or a VR headset and communicate with others through their microphone and camera
• There are some cool features such as getting yourself a specific avatar, adding 3D models and objects while vising the room, as well as placing a screen streaming your computer camera inside the virtual space
• Last but not least you can access a pen tool and paint in 3D in VR

Me painting something in VR in front of a PC User

Conclusion: The web is full of great solutions to get the hands in creating VR

After spending a big couple of days working on this project I figured out that many other solutions are available too when it comes to making VR for the web.

Here is a small list of a few of these :

Framevr.io

Similar to Mozilla Hubs, this is a good solution to create virtual collaborative spaces in 3D or with photosphere.

ThingLink

Mainly for 360° images and videos but a good thing to use equirectangular content with a bit of narration.

Kuula

A good 360° player with options to create virtual tours, which can be a good start to share a draft of a bigger VR project

Three.JS

A very powerful JavaScript 3D library making it possible to create an awesome web experience. However, it requires some knowledge of HTML & JavaScript. Here is a good project made with this library: https://mixedreality.mozilla.org/hello-webxr/

Thanks for reading!