Using shaders in WebVR – Floating in the sea tutorial

This is part of #DaysInVR series. View All VR Projects. Yesterday, we learnt how to create hotspots in WebVR. Today we’ll see how to create floating in the sea tutorial

Demo | Source

In this tutorial, we’ll learn how to use shaders to create a floating in the sea experience. We’ll also use cubemaps to create the background sky.

Cubemaps in WebVR

We’ll load a cubemap as the background sky. Once the image is loaded, we cut up the faces and we use a cube shader to load them to a cube. Once we keep the camera inside this cube, it gives the skybox effect.

Shaders in WebVR

We’ll be using WaterShader and Mirror effect to create our ocean.

We’ll use this to create the water material and then add it to PlaneGeometry.

Adding spheres to the scene

To add the spheres, we’ll use IcosahedronGeometry and MeshPhongMaterial. We’ll clone the spheres and then add it to a plane. Then move the plane along z axis.

Its your turn

Create your own version of floating in VR using shaders in WebVR. Don’t forget to share your comments below.

Get all updates
We respect your privacy.

Follow me


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

Latest posts by Rison (see all)

Leave a Reply