Line effect in WebVR tutorial

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.

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.

Join 6000+ Students

Upgrade your programming skills to include Virtual Reality. A premium step-by-step training course to get you building real world Virtual Reality apps and website components. You’ll have access to 40+ WebVR & Unity lessons along with their source code.

Start Learning Now

150$ for all 3 courses (SAVE 70%)


// add lines
var parameters = [
  [0.25, 0xffffff, 1, 2 ],
  [ 0.5, 0xffffff, 1, 1 ],
  [ 0.75, 0xffffff, 0.75, 1 ],
  [ 1, 0xffffff, 0.5, 1 ],
  [ 1.25, 0xffffff, 0.8, 1 ],
  [ 3.0, 0xffffff, 0.75, 2 ],
  [ 3.5, 0xffffff, 0.5, 1 ],
  [ 4.5, 0xffffff, 0.25, 1 ],
  [ 5.5, 0xffffff, 0.125, 1 ]
];
var geometry = createGeometry();
for( var i = 0; i < parameters.length; ++ i ) {
  var p = parameters[ i ];
  var material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ], linewidth: p[ 3 ] } );
  var line = new THREE.LineSegments( geometry, material );
  line.scale.x = line.scale.y = line.scale.z = p[ 0 ];
  line.originalScale = p[ 0 ];
  line.rotation.y = Math.random() * Math.PI;
  line.updateMatrix();
  lineMesh.add( line );
}
scene.add(lineMesh);
var lineMesh2 = lineMesh.clone();
scene.add(lineMesh2);
lineMesh2.position.z = -1500;
function createGeometry() {
  var geometry = new THREE.Geometry();
  for ( i = 0; i < 1500; i ++ ) {
    var vertex1 = new THREE.Vector3();
    vertex1.x = Math.random() * 2 - 1;
    vertex1.y = Math.random() * 2 - 1;
    vertex1.z = Math.random() * 2 - 1;
    vertex1.normalize();
    vertex1.multiplyScalar(450);
    var vertex2 = vertex1.clone();
    vertex2.multiplyScalar( Math.random() * 0.09 + 1 );
    geometry.vertices.push( vertex1 );
    geometry.vertices.push( vertex2 );
  }
  return geometry;
}

// add lines

var parameters = [

[0.25, 0xffffff, 1, 2 ],

[ 0.5, 0xffffff, 1, 1 ],

[ 0.75, 0xffffff, 0.75, 1 ],

[ 1, 0xffffff, 0.5, 1 ],

[ 1.25, 0xffffff, 0.8, 1 ],

[ 3.0, 0xffffff, 0.75, 2 ],

[ 3.5, 0xffffff, 0.5, 1 ],

[ 4.5, 0xffffff, 0.25, 1 ],

[ 5.5, 0xffffff, 0.125, 1 ]

];

var geometry = createGeometry();

for( var i = 0; i < parameters.length; ++ i ) {

var p = parameters[ i ];

var material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ], linewidth: p[ 3 ] } );

var line = new THREE.LineSegments( geometry, material );

line.scale.x = line.scale.y = line.scale.z = p[ 0 ];

line.originalScale = p[ 0 ];

line.rotation.y = Math.random() * Math.PI;

line.updateMatrix();

lineMesh.add( line );

}

scene.add(lineMesh);

var lineMesh2 = lineMesh.clone();

scene.add(lineMesh2);

lineMesh2.position.z = -1500;

function createGeometry() {

var geometry = new THREE.Geometry();

for ( i = 0; i < 1500; i ++ ) {

var vertex1 = new THREE.Vector3();

vertex1.x = Math.random() * 2 - 1;

vertex1.y = Math.random() * 2 - 1;

vertex1.z = Math.random() * 2 - 1;

vertex1.normalize();

vertex1.multiplyScalar(450);

var vertex2 = vertex1.clone();

vertex2.multiplyScalar( Math.random() * 0.09 + 1 );

geometry.vertices.push( vertex1 );

geometry.vertices.push( vertex2 );

}

return geometry;

}

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


lineMesh.position.z += 5;
lineMesh2.position.z += 5;
if (lineMesh.position.z > 1500) {
  lineMesh.position.z = 0;
  lineMesh2.position.z = 1500;
}

var time = performance.now() * 0.0001;
for ( var i = 0; i < scene.children.length; i ++ ) {
  var object = scene.children[ i ];
  if ( object instanceof THREE.Line ) {
    object.rotation.y = time * ( i < 4 ? ( i + 1 ) : - ( i + 1 ) );
    if ( i < 5 ) object.scale.x = object.scale.y = object.scale.z = object.originalScale * (i/5+1) * (1 + 0.5 * Math.sin( 7*time ) );
  }
}

lineMesh.position.z += 5;

lineMesh2.position.z += 5;

if (lineMesh.position.z > 1500) {

lineMesh.position.z = 0;

lineMesh2.position.z = 1500;

}

var time = performance.now() * 0.0001;

for ( var i = 0; i < scene.children.length; i ++ ) {

var object = scene.children[ i ];

if ( object instanceof THREE.Line ) {

object.rotation.y = time * ( i < 4 ? ( i + 1 ) : - ( i + 1 ) );

if ( i < 5 ) object.scale.x = object.scale.y = object.scale.z = object.originalScale * (i/5+1) * (1 + 0.5 * Math.sin( 7*time ) );

}

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.

Download Source Code

Kickstart VR development by downloading source code for this project. You’ll have instant access to source code and asset files. You can use them in your personal or commercial projects.

Download Source Code

Get instant access for $39

Line effect in WebVR tutorial