Line effect in WebVR tutorial


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 learn how to use line effect in WebVR.

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.

Line effect 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.

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
close-link
Add Me To VIP