Exhibit #7: Drawing Point Primitives

What We Did

• We drew something: the simplest primitives, points.
• Let's look at the vertex shader.

  attribute vec3 vert_position;
  
  void main() {
      gl_PointSize = 10.0;
      gl_Position = vec4(vert_position, 1.0);
  }

  • The code looks pretty much like the C language.
  • The line attribute vec3 vert_position; declares that the vertex to be processed has an attribute called vert_position. It is a vec3, a vector with 3 components (xyz).
  • The vertex shader must declare the main() function that returns nothing.
  • It's main job is to set the gl_Position variable, which is of type vec4, i.e. a vector with 4 components (xyzw).
  • To create a vec4, you use a constructor:
    • Typically, you give it four numbers; e.g. vec4(1.0, 2.0, 3.0, 4.0).
    • In the code, vec4(vert_position, 1.0) where vert_position is a vec3. So, a vec3 can replace 3 numbers in the constructor.
    • vec4(1.0, vert_position) is okay syntactically as well.
  • gl_Position is a point in clip space, which has 4 dimensions.
    • We'll learn in CS 4620 why it's 4-dimensional instead of 3.
    • The point in clip space will be turned into a point in normalized device coordinate (NDC), which is used by the rasterizer to chop the primitives into fragments.
    • The relationship between gl_Position and the NDC is as follows: $$ NDC.x = \frac{gl\_Position.x}{gl\_Position.w}, NDC.y = \frac{gl\_Position.y}{gl\_Position.w}, NDC.z = \frac{gl\_Position.z}{gl\_Position.w}$$ That is, the xyz-components of the NDC is obtained by dividing the same components of gl_Position by the $w$-component of gl_Position. This is called the perspective divide, which we will learn when we talk about projective transformations in CS 4620.
    • This means that, if the $w$-component of gl_Position is 1, then the NDC is just the xyz-components of gl_Position unchanged. This is basically what happens in the vertex shader. It sets the NDC to vert_position.
  • The NDC determines what is visible and what is not visible.
    • For something (mainly a fragment) to be visible, its NDC must be in the volume $[-1,1] \times [-1,1] \times [-1,1]$
  • The area of the screen that is drawn to is called the viewport.
    • By default, the viewport is the whole canvas.
    • In NDC:
      • The left edge of the viewport has $x$-coordinate of $-1$.
      • The right edge of the viewport has $x$-coordinate of $1$.
      • The bottom edge of the viewport has $y$-coordinate of $-1$.
      • The top edge of the viewport has $y$-coordinate of $1$.
  • The $z$-coordinate of the NDC indicates the depth.
    • The value of $-1$ is the nearest that can be seen.
    • The value of $1$ is the farthest that can be seen.
  • When rendering points, you can also set gl_PointSize, which is a float.
  • Floating point numbers in GLSL does not require the suffix f like in C or in Java.
    • That is, you write 1.0 instead of 1.0f.
    • However, unlike the two languages, these floating point literals are single precision (4 bytes), not double (8 bytes).
• Let's look at the fragment shader.

  precision highp float;
  
  void main() {
      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  }

  • The first line, precision highp float;, indicates that we want to use high precision mathematics when dealing with floating-point numbers.
    • Other options include mediump and lowp.
    • Options lower than highp are suitable for less powerful devices such as cellphones.
  • The fragment shader also has a main function, just like the vertex shader.
  • Its main job is to set the gl_FragColor variable, which is the color of the fragment being processed.
    • This is a vec4 (rgba).
    • So, this code basically says, "whatever fragment gets here, make it white."
• To draw primitives:
  • We need to create vertex buffer to hold vertex attributes.
  • Then, we need to associate the buffer with the attribute in the program.
  • Then, we call gl.drawArrays to actually draw the primitives.
  This process has way too many steps, so it calls for some sort of abstraction. We hope you come up with something to make your life easier.
• We list here links to documents to some commands that are essential to the above process:
  • gl.vertexAttribPointer
  • gl.drawArrays
• Here are the primitives that WebGL can draw. (Image source: CG Tutorial)