Exhibit #6: The Magic of Full Screen Quad

Full Screen Quad with Texture Coordinates

Let's draw a 2D function

And a fractal!

What We Did

• We used one of the most powerful tools in GLSL, the full screen quad.
  • Draw a quad (or 2 triangles) whose bottom-left corner is $(-1,-1)$ and top-right corner is $(1,1)$.
  • The quad's "texture coordinates" (or width and height parameterization) go from $(0,0)$ at the bottom-left corner to $(1,1)$ at the top-right corner.
  • The texture coordinate gets passed to the fragment shader through varying variable.
  • WebGL will generate a fragment for each pixel in the screen. Each fragment has a different texture coordinate, which indicates the location of the fragment.
  • This allows you to do different things for each fragment.
• The full screen quad is super useful for image processing. Indeed, it is what enables GPGPU algorithms within OpenGL.
  • ...Almost. In order to actually use GPGPU algorithms, you need one more powerful tool, the framebuffer object, to read the pixel values in the CPU context. We will talk about this later in the course.