Bubble effect in VR – Using environment maps in WebVR tutorial

This is part of #DaysInVR series. View All VR Projects. Yesterday, we learnt how to shark attack in VR using objects. Today, we’ll see how to create bubble effect in VR using environment maps.

Demo | Source

In this tutorial, we’ll add a 360 photo into our scene and the use environment mapping to create the bubble effect.

Adding 360 photos in WebVR

To add 360 photos to our scene, we’ll use SphereGeometry with MeshBasicMaterial with the photo as a texture. We’ll then place the camera inside the sphere. This allows us to look around freely.

Using environment maps in WebVR

The bubbles are created using SphereGeometry and a material with the environment map that we need. We’ll also setup the texture mapping to EquirectangularRefractionMapping. We’ll set the environment map using the envMap property of the material.

To move the bubbles in 3d space, we have to add the following code to the animate function.

This will change the position of the bubbles in x and y directions.

Its your turn

Add bubble effect to your 360 photo. Set the environment map and see what you can come up with. You can view the full source to see how it all fits together.

Leave a Reply

Send Lesson #1
Join 1000s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
Add Me To VIP
Join 1000s of VR Developers

We've build a simple curriculum to help you get started in VR

Send Lesson #1
We've launched a WebVR Course with 25+ projects with source code! Check it out.
Get The Course