Now that we understand how to track motion and have a service in place, let's see how we can put this service to use and visualize the tracked data in our AR app. Open up the spawn-at-surface.html page in a text editor and follow the given steps:

1. Find that last line of code we added in the last exercise and delete it:

firebase.database().ref('pose/' + 1).set({x: 12,y: 1,z : 0});  //delete me

2. Replace that line with the following code:

var idx = 1;
setInterval(function(){
 idx = idx + 1;
 if(camera){
  camera.updateProjectionMatrix();
  var pos = camera.position;
  var rot = camera.rotation;
  firebase.database().ref('pose/' + idx).set({x: pos.x,y: pos.y,z : pos.z, roll: rot._z, pitch: rot._x, yaw: rot._y });
 }  }, 1000);

3. The first line in the preceding snippet is setting an index or count variable. Then, we use the setInterval function to set up a repeating timer that calls the anonymous function every second (1000 milliseconds). We do this so that we only track movement every second. We could certainly track movement every frame like in a multiplayer game, but for now, one second will work. The rest of the code, you have seen earlier in the previous exercises.
4. Save the file.
5. Run the sample in your browser's device. Now, move around with the device.
6. Go to the Firebase Console. You should now see a stream of data getting fed into the database. Feel free to expand the data points and see the values being captured.

Great, we can now see our data being collected. Of course, it is a little difficult for us humans to easily make sense of the data unless we can visualize it in 2D or 3D, which means that we have a few options. We can build a separate web page to just track the users on a map. Yet, that sounds more like a standard web exercise, so let's leave that to readers who are so inclined. Instead, what we will do is draw a 3D path of where the user has traveled, using the same data that we are sending to our database. Open up that text editor again and load up spawn-at-camera.html to follow along:

1. Locate that call to the setInterval function we added in the last exercise. We need to change some code in order to create a line from the points.
2. Enter the following code after the identified line:

firebase.database().ref('pose/' + ... //after this line
if(lastPos){   
  var material = new THREE.LineBasicMaterial({ color: 0x0000ff   });
  var geometry = new THREE.Geometry();
  geometry.vertices.push(
     new THREE.Vector3( pos.x, pos.y, pos.z ),
   new THREE.Vector3( lastPos.x, lastPos.y, lastPos.z )
  );
  var line = new THREE.Line( geometry, material );
  scene.add( line );
}
lastPos = { x: pos.x, y: pos.y, z: pos.z};

3. This code first checks whether lastPos is defined. On the first run through the setInterval timer loop, lastPos will be undefined; it then gets set right after the if statement. Then, after lastPos is defined, we create a basic line material with the call to THREE.LineBasicMaterial, passing in a hexadecimal color value. Next, we create our geometry, a line, using the current pos and lastPos variables with the material. We do this by first constructing a Vector3 object with the x, y, and z values of each position. Finally, we add the line to the scene with scene.add(line).

4. Save the file and run it in the WebARCore browser on your device. Now when you move around, you will see a trail of blue lines follow you, as shown in the following picture:

Feel free to continue playing with the app. The development cycle (build, deploy, and run) is quick when developing a simple single page web app, which gives you plenty of opportunities to make quick changes, run them, and then debug easily.