Using lines in WebVR to travel hyperspeed in VR

This is part of #DaysInVR series. View All VR Projects. Yesterday, we learnt how to use shaders in WebVR to create floating in the sea experience. Today, we’ll use lines in WebVR to create hyperspeed travel effect in VR.

Demo | Source

In this tutorial, we’ll see how to create a hyperspeed travel effect in WebVR. We’ll be using LineBasicMaterial and LineSegments to create the effect.

Lines in WebVR

You might be wondering how we’re going to achieve this effect. We’ll add multiple lines to a Plane and then moving the plane in z direction. createGeometry function creates the custom geometry that we will use for our hyperspeed travel effect.

We need to add the following code to animate function to move the plane with the lines to get the hyperspeed effect.

Its your turn

Try changing the parameters of the custom geometry and see what effect you can come up with. Let us know in the 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