Time for action – examining the ray traced scene

1. Open the file ch10_Raytracing.html in an HTML5 browser. You should see a scene with a simple lit, bobbing sphere like the one shown in the following screenshot:

   

2. First, in order to give us a way of triggering the shader, we need to draw a full screen quad. Luckily for us, we already have a class that helps us do exactly that from the post-processing example earlier in this chapter! Since we don't have a scene to process, we're able to cut a large part of the rendering code out, and the entirety of our JavaScript drawing code becomes:

   function render(){
       gl.viewport(0, 0, c_width, c_height);
       gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   
       //Checks to see if the framebuffer needs to be resized to  match the canvas
       post.validateSize();
       post.bind();
   
       //Render the fullscreen quad
       post.draw();
   }

3. That's it. The remainder of our scene will be built in the fragment shader.

4. At the core of our shader, there are two functions...