Shaders in WebVR tutorial – Floating in the Sea Experience

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 use shaders in webvr to create floating in the sea experience.

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.

Leave a Reply

Send Lesson #1
Join over 100s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
Add Me To VIP