As biotechnology becomes more central to new innovations in healthcare, material science and manufacturing, one of the nation’s research hubs is getting a new accelerator calledPetrito launch companies focused on

Presight Capital, the international venture arm ofApeiron Investment Group, is announcing that it’s closed its first fund of $80 million. Apeiron is the family office of German entrepreneur Christian Angermayer

How To Build A Real-Time Multiplayer Virtual Reality Game (Part 1)

About The AuthorPhD in artificial intelligence at UC Berkeley, with a focus on small neural networks in perception, for autonomous vehicles. Big fan of cheesecake, corgis, and … More about Alvin Wan …Virtual reality is a new immersive medium for exploring content, whether that content is a film (Life of Pi), a game (Beat Saber)…

About The Author

PhD in artificial intelligence at UC Berkeley, with a focus on small neural networks in perception, for autonomous vehicles. Big fan of cheesecake, corgis, and …More aboutAlvin
Wan…

Virtual reality is a new immersive medium for exploring content, whether that content is a film (Life of Pi), a game (Beat Saber) or a social experience (as depicted inReady Player One). Despite its novelty, VR doesn’t require a drastically different toolset to design for — the same tools we use for web game development, 3D modeling, and others are all still applicable. This tutorial leverages your familiarity with web development to get started with VR development.

In this tutorial series, we will build a web-based multiplayervirtual realitygame in which players will need to collaborate to solve a puzzle. We will useA-Framefor VR modeling,MirrorVRfor cross-device real-time synchronization, andA-Frame Low Polyfor low-poly aesthetics. At the end of this tutorial, you will have a fully functioning demo online that anyone can play.

Each pair of players is given a ring of orbs. The goal is to “turn on” all orbs, where an orb is “on” if it’s elevated and bright. An orb is “off” if it’s lower and dim. However, certain “dominant” orbs affect their neighbors: if it switches state, its neighbors also switch state. Only player 2 can control the dominant orbs while only player 1 can control non-dominant orbs. This forces both players to collaborate to solve the puzzle. In this first part of the tutorial, we will build the environment and add the design elements for our VR game.

Setting Up The Scene

1. Let’s Go With A Basic Scene

The first three instructions below are excerpted from myprevious article. You will start by setting up a website with a single static HTML page. This allows you to code from your desktop and automatically deploy to the web. The deployed website can then be loaded on your mobile phone and placed inside a VR headset. Alternatively, the deployed website can be loaded by a standalone VR headset.

As with the linked tutorial above, start by deleting all existing code in the currentindex.htmlfile. Then, type in the following for a basic webVR project, using A-Frame VR. This creates an empty scene by using A-Frame’s default lighting and camera.

Lightful

Raise the camera to standing height. Per A-Frame VR recommendations (Github issue), wrap the camera with a new entity and move the parent entity instead of the camera directly. Between youra-scenetags on lines 8 and 9, add the following.

Next, add a large box to denote the ground, usinga-box. Place this directly beneath your camera from the previous instruction.

Yourindex.htmlfile should now match the following exactly. You can find the full source codehere, on Github.

Lightful

This concludes setup. Next, we will customize lighting for a more mysterious atmosphere.

2. Add Atmosphere

Add a fog, which will obscure objects far away for us. Modify thea-scenetag on line 8. Here, we will add a dark fog that quickly obscures the edges of the ground, giving the effect of a distant horizon.

The dark gray#111fades in linearly from a distance of 10 to a distance of 15. All objects more than 15 units away are completely obscured, and all objects fewer than 10 units away are completely visible. Any object in between is partially obscured.

Add one ambient light to lighten in-game objects and one-directional light to accentuate reflective surfaces you will add later. Place this directly after thea-scenetag you modified in the previous instruction.

Directly beneath the lights in the previous instruction, add a dark sky. Notice the dark gray#111matches that of the distant fog.

This concludes basic modifications to the mood and more broadly, scene setup. Check that your code matches thesource code for Step 2on Github, exactly. Next, we will add a low-poly orb and begin customizing the orb’s aesthetics.

Creating The Orbs

3. Create A Low-Poly Orb

In this step, we will create a rotating, reflective orb as pictured below. The orb is composed of two stylized low-poly spheres with a few tricks to suggest reflective material.

Start by importing the low-poly library in yourheadtag. Insert the following between lines 4 and 5.

Create a carousel, wrapper, and orb container. Thecarouselwill contain multiple orbs, thewrapperwill allow us to rotate all orbs around a center axis without rotating each orb individually, and thecontainerwill — as the name suggests — contain all orb components.

Inside the orb container, add the orb itself: one sphere is slightly translucent and offset, and the other is completely solid. The two combined mimic reflective surfaces.

Finally, rotate the sphere indefinitely by adding the followinga-animationtag immediately after thelp-sphereinside the.orbentity in the last instruction.

Your source code for the orb wrappers and the orb itself should match the following exactly.

Check that your source code matches the fullsource code for step 3on Github. Your preview should now match the following.

By default, lights do not decay with distance. By addingdistance="8", we ensure that the light fully decays with a distance of 8 units, to prevent the point light from illuminating the entire scene. Next, add the golden light. Add the following directly above the last light.

5. Add Rings

Notice the ring itself does not contain color, as the color will be imbued by the point light in the previous step. Furthermore, thematerial="side:double"is important as, without it, the ring’s backside would not be rendered; this means the ring would disappear for half of its rotation.

However, the preview with only the above code will not look any different. This is because the ring is currently perpendicular to the screen. Thus, only the ring’s “side” (which has 0 thickness) is visible. Place the following animation in between thea-ringtags in the previous instruction.

Check that your code matches thesource code for step 5on Github. This concludes decor for the orb. With the orb finished, we will next add interactivity to the orb. In the next step, we will specifically add a visible cursor with a clicking animation when pointed at clickable objects.

Making The Orbs Interactive

6. Add A Cursor

In this step, we will add a white cursor that can trigger clickable objects. The cursor is pictured below.

In youra-cameratag, add the following entity. Thefuseattribute allows this entity the ability to trigger click events. Theraycasterattribute determines how often and how far to check for clickable objects. Theobjectsattribute accepts a selector to determine which entities are clickable. In this case, all objects of classclickableare clickable.

Next, add cursor animation and an extra ring for aesthetics. Place the following inside the entity cursor object above. This adds animation to the cursor object so that clicks are visible.

Next, add theclickableclass to the#orb0to match the following.

Check that your code matches thesource code for Step 6on Github. In your preview, drag your cursor off of them onto the orb to see the click animation in action. This is pictured below.

Note the clickable attribute was added to the orb itself and not the orb container. This is to prevent the rings from becoming clickable objects. This way, the user must click on the spheres that make up the orb itself.

In our final step for this part, you will add animation to control the on and off states for the orb.

7. Add Orb States

In this step, you will animate the orb in and out of an off state on click. This is pictured below.

To start, you will shrink and lower the orb to the ground. Adda-animationtags to the#container-orb0right after#orb0. Both animations are triggered by a click and share the same easing functionease-elasticfor a slight bounce.

To further emphasize the off state, we will remove the golden point light when the orb is off. However, the orb’s lights are placed outside of the orb object. Thus, the click event is not passed to the lights when the orb is clicked. To circumvent this issue, we will use some light Javascript to pass the click event to the light. Place the following animation tag in#light-orb0. The light is triggered by a customswitchevent.

Next, add the following click event listener to the#container-orb0. This will relay the clicks to the orb lights.

Check that your code matches thesource code for Step 7on Github. Finally, pull up your preview, and move the cursor on and off the orb to toggle between off and on states. This is pictured below.

This concludes the orb’s interactivity. The player can now turn orbs on and off at will, with self-explanatory on and off states.

Conclusion

In this tutorial, you built a simple orb with on and off states, which can be toggled by a VR-headset-friendly cursor click. With a number of different lighting techniques and animations, you were able to distinguish between the two states. This concludes the virtual reality design elements for the orbs. In the next part of the tutorial, we will populate the orbs dynamically, add game mechanics, and set up a communication protocol between a pair of players.