Play bubbles in VR and have fun

Once up a time, when I walked around in Long Beach, there was a street artist playing soap bubbles, and a bunch of kids surrendered her with joyful smiles. At that time, the whole community was under soft lockdown, and the happy laughs sounded like the innocent voices to defeat the crisis. Inspired by the story, I start constructing the idea to create the soap bubble poking game in VR.

Bubbles project creates a playground for people to play around the bubbles in the virtual realism space. You can poke the floating soap bubbles with your hands to blow it up. When I say hands, I mean it literally. The experience uses Oculus Quest’s hand tracking API to let you poke the bubbles or interact in the field with your bare hands. To replicate bubble physics, Bubbles applies metaball shading to create the “organic” shape dynamically to the bubble. And when you poke it, it blows up with a designated animation and the companion sound.

Bubble Shader

To replicate the bubbles in VR, I applied the metaball shader for morphing the shapes and the bubble-like shader to represent the visual appearance. The visual shader uses the noise map and rainbow colour ramp to simulate the texture and reflection of the bubble surface.

Bubble Shader

Teleport By Hands

People naturally want to move around regardless of the border in the VR experience. I made two approaches for teleporting by hand tracking. The first one uses only one hand to aim and trigger teleporting. In this approach, you pinch the right hand with thumb and index finger to aim to the destination, and then release the gesture to teleport. This approach is easier to learn and remember, but it often triggers accidental teleporting.

The second approach uses one hand to aim and another to “confirm” the teleporting. You start by pinching the right hand with your thumb and index finger to aim to the destination. Then you pinch the left hand and release the gesture to teleport. The combination is more complicated, but it significantly prevents accidental triggers of teleporting. And another finding is that it’s better to have two-steps confirmation for the left-hand gesture. Like the general button element, there shall be the “pinch down” and “pinch up” states for the left-hand interaction. Teleport will only fire when the user releases the pinch gesture. It prevents unexpected continuous teleporting due to the conflict of pinch gestures from both hands.

The project is still under development, and I did many experiments to prove the concept and try interesting techniques like hand tracking and metaball shading.