12.7 - Rendering Points¶

Points¶

A point is a single location in 3D space defined by a (x,y,z) value. By default, the rendering of a point sets the color of one pixel in an image. The color of multiple pixels can be set by specifying the gl_PointSize property of a point in a vertex shader. gl_PointSize is the side length of a square centered at the point’s raster location. It is a floating point value in pixel units. The exact definition from the OpenGl ES 2.0 specification is:

If the point (xw, yw) is not directly in the center of a pixel and the value of gl_PointSize is fractional, the area colored for a “point” will be rectangular.

Anti-aliasing¶

Anti-aliasing is a technique for minimizing the errors due to sampling a 3D scene only at the center of each pixel location. With no anti-aliasing, a pixel is either colored, or not colored, depending on whether the center of the pixel is inside a primitive’s boundaries. This produces a jagged edge at the boundaries of a triangle, line, or point rendering. When anti-aliasing is enabled, pixels receive a portion of the color of a primitive based on a percentage of coverage of a pixel. The images below show a point rendered with a gl_PointSize of 8.0 and enlarged to view individual pixels. With anti-aliasing disabled, a point rendered with a size of 8.0 will color exactly 64 pixels. With anti-aliasing enabled, the edges around the 64 pixels will potentially have partial coloring.

WebGL enables anti-aliasing by default. To disable it, the antialias option must be set to false when the WebGL context is initially created. The commands look something like this:

canvas = document.getElementById(canvas_id);
gl = canvas.getContext('webgl', {antialias : false} );

Anti-aliasing is rarely disabled. This discussion was primarily to help you understand why the borders of a multi-pixel “point” are typically lighter shades of the color assigned by a fragment shader.

Non-square Points¶

When points are rendered by a vertex shader, (and only for points), the vertex shader passes an additional variable to the fragment shader, gl_PointCoord, which is 2-component vector that gives the location of a fragment relative to it’s “point” square. The components are in the range 0.0 to 1.0, where [0.0,0.0] is the upper-left corner of the square, [1.0, 1.0] is the lower-right corner of the square, and [0.5,0.5] is the center of the square.

A fragment shader can use the gl_PointCoord values to determine how to manipulate a specific pixel. For example, it is straightforward to render a “point” as a circle instead of a square. The GLSL distance function can be used to calculate the distance from a fragment’s location, gl_PointCoord, to the center of the “point”, (0.5,0.5). If the distance is greater than 0.5, the fragment is not inside a circle centered at the point’s location. Note that the GLSL statement, discard, in a fragment shader prevents the graphics pipeline from performing any further processing of a fragment.

Experiment with size of the points in the following WebGL program and study the fragment shader.

Experiments:

• In the fragment shader, change the greater-than sign in the distance test to a less-than sign. (I.e., if (distance(center, gl_PointCoord) < 0.5).
  Predict the results and then verify that you predicted correctly.
  

• Change the fragment shader to the single line:
  gl_FragColor = vec4(gl_PointCoord, 0.0, 1.0);
  Study the resulting output until it makes sense. (Note that the upper-left corner of each square is black, which means that gl_PointCoord must be (0,0) for the upper-left pixel.)
  

• Change the fragment shader to this logic:
  

  float d = distance(center, gl_PointCoord);
  if (mod(floor(d*4.0), 2.0) == 0.0) {
    discard;
  }
  gl_FragColor = u_Color;
  

  Try various scalar values other than 4.0 and see what happens.
  
  

• Change the fragment shader to this logic:
  

  float d = distance(center, gl_PointCoord);
  if (d >= 0.5) discard;
  float alpha = 1.0 - d*2.0; /* center has the largest alpha */
  gl_FragColor = vec4(u_Color.rgb, alpha);
  

  (Note that the alpha component of the fragment’s color is changing from 1.0 at the center of the circle to 0.0 at the edges.)

• Change the fragment shader to this logic:
  

  float d = distance(center, gl_PointCoord);
  if (gl_PointCoord.t > 0.5 || d >= 0.5) discard;
  d = 1.0 - d*2.0;
  gl_FragColor = vec4(u_Color.rgb, d);
  

  (Note that the bottom half of the circle has been discarded.)

• Come up with your own experiments. Your goal is to understand how to use gl_PointCoord to manipulate the shape and color of a “point” rendering.

Billboard (or Sprite)¶

A billboard in computer graphics is a texture mapped quad (four sided polygon) that always faces the camera, regardless of its location and 3D orientation. A sprite is a 2D image that can be rendered into a scene. The common practice in WebGL is to render billboards and sprites as “points” with an appropriate gl_PointSize and texture map image. Practical uses of these techniques are presented in the lesson on “particle systems.”

To texture map a “point” there are two basic scenarios:

1. The entire texture map image is mapped to the point’s square. The implementation is straightforward – use gl_PointCoord as the texture coordinates for a texture2D lookup.
   
   
2. A point has an associated texture coordinate that defines a location in a texture map image for the center pixel of a point rendering. Adjacent pixels of the texture map image are used to color adjacent pixels in the point’s square. This requires the calculation of fractional offsets within a texture map image to get to adjacent pixels and the conversion of gl_PointCoord into pixel offsets.

The following two WebGL programs use this tileable image, , as a texture map.

vec2 coords = vec2(gl_PointCoord.s, 1.0 - gl_PointCoord.t);
gl_FragColor = texture2D(u_Texture_unit, coords);

texture_delta = [ (1.0 / (texture_map_image.width - 1.0)),
                  (1.0 / (texture_map_image.height - 1.0))];
gl.uniform2fv(program.u_Texture_delta, texture_delta);

Summary¶

The previous two WebGL programs demonstrate billboards and sprites but not how they are typically used in practice. Rarely are billboards and sprites rendered as pure squares. By manipulating the alpha color value of individual pixels, a point’s square can become transparent in specific locations to render any shape desirable. Please try to combine some of the techniques described in the “Non-square Points” section with the billboards programs to investigate what is possible.

Glossary¶

point

A single location in 3D space.

gl_PointSize

A predefined output variable of a vertex shader when rendering points. It is the side length of a square, in pixels, that is centered about the location of a 3D point.

gl_PointCoord

A 2D vector where each component is a percentage value between 0.0 and 1.0. It gives the relative location of a fragment compared to the square that composes the entire point rendering. [0,0] is the upper-left corner.

billboard

A rendering of a texture map onto a quad surface that is always facing the camera.

sprite

The rendering of a 2D image into a 3D scene, where the image is always directly facing the camera.

Self Assessment¶