We are almost ready to build e-commerce websites. However, if we are going to buy products, we need to click on them. This is a bit more complex than the traditional 2D website where each product can use HTML and JavaScript to indicate whether or not it has been clicked. In 3D space, a mouse click, which is a 2D device, produces an x and y value. That x and y value must be converted into 3D space, which generates a ray from the camera (our point of view) to the (x, y, z) location. We then determine whether or not the ray passes through any 3D meshes along the way. However, unlike with 2D web pages where only one item—either text or an image—occupies the same space, in 3D, that ray could intersect multiple objects. Therefore, if the ray intersects multiple products, we must determine which object is closest to the camera. This is indeed a daunting task.

This demonstration has three additional slider bars that control the red, green, and blue lights. The WebGL...