Time for Action: Examining the Ray Traced Scene

Let's cover an example showcasing the power of ray tracing:

1. Open the ch10_04_ray-tracing.html file in your browser. You should see a scene with a simple lit, bobbing sphere like the one shown in the following screenshot:

2. In order to trigger the shader, we need a way to draw a full-screen quad. Fortunately, we have a class from our post-processing examples earlier in this chapter to help us do just that. Since we don't have a scene to process, we can omit a large part of the rendering code and simplify JavaScript's draw function:

function draw() {
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // Checks to see if the framebuffer needs to be re-sized to match
  // the canvas
  post.validateSize();
  post.bind();

  // Render the fullscreen quad
  post.draw...