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 of GLSL, the full screen quad.
  • You just draw a quad whose bottom-left corner is $(-1,-1)$ and top-right corner is $(1,1)$.
  • The quad's "texture coordinates" (well, 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.
  • What happens is WebGL will generate a fragment for each pixel in the screen. Each fragment has a different texture coordinates, which indicate 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 the whole GPGPU enterprise.
  • Well, in order to actually do it, you need one more powerful tool, the framebuffer object, which we will talk about later in the course.