Let's cover an example of this technique in action:

1. Open the ch08_01_picking.html file using your browser. You will see a screen similar to this:

2. Here, you have a set of objects, each one of which has a unique diffuse color property. As was the case in previous examples, you can move the camera around the scene. Also, note that the cube has a texture and that the flat disk is translucent. As you may expect, the code in the draw function handles textures, coordinates, and also transparencies, so it looks a bit more complex than before (you can check it out in the source code). This is a more realistic draw function. In a real application, you will have to handle these cases.

3. Click on the sphere and drag it around the scene. Notice that the object becomes translucent. Also, note that the displacement occurs along the axis of the camera. To make this evident, please go to your web browser's console and type in the following:

camera.setElevation(0);

4. Once you resume the clock by clicking inside of the scene, you will see that the camera updates its position to an elevation of zero degrees, as shown in the following screenshot:

5. When you click and drag objects in the scene from this perspective, you will see that they change their position according to the camera's axis. In this case, the up axis of the camera is aligned with the scene's y-axis. If you move an object up and down, you will see that they change their position in the y coordinate. If you change the camera position (by clicking on the background and dragging the mouse around), and then move a different object, you will see that the object moves according to the camera’s new y-axis.
6. Try different camera angles and see what happens.

7. Let's see what the offscreen framebuffer looks like. Click on the Show Picking Image button. Here, we are instructing the fragment shader to use each of the object diffuse properties to color the fragments. You can also rotate the scene and pick objects in this mode. If you want to go back to the original shading method, click on Show Picking Image again to deactivate it.
8. To reset the scene, click on Reset Scene.

What just happened?

We have seen an example of picking in action. The source code uses the Picker class that we previously described in the Architectural Updates section. Let's examine it a bit closer.