Bubble effect in VR – Using environment maps in WebVR

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.

Follow me

Rison

Building Viewport to help developers to build VR apps easily.
Follow me

Latest posts by Rison (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *