explain the gl rasterization pipeline better

Author: adroitwhiz

src/Drawable.js

@@ -23,10 +23,14 @@ const __isTouchingPosition = twgl.v3.create();
  * @return {twgl.v3} [x,y] texture space float vector - transformed by effects and matrix
  */
 const getLocalPosition = (drawable, vec) => {
-    // Transfrom from world coordinates to Drawable coordinates.
+    // Transform from world coordinates to Drawable coordinates.
     const localPosition = __isTouchingPosition;
-    // In "Scratch space" pixel coords, integers are pixel corners; in "texture space", integers are pixel centers,
-    // so offset by 0.5 (-0.5 in the X direction because it's flipped).
+    // World coordinates/screen-space coordinates refer to pixels by integer coordinates.
+    // The GL rasterizer considers a pixel to be an area sample.
+    // Without multisampling, it samples once from the pixel center,
+    // which is offset by (0.5, 0.5) from the pixel's integer coordinate.
+    // If you think of it as a pixel grid, the coordinates we're given are grid lines, but we want grid boxes.
+    // That's why we offset by 0.5 (-0.5 in the X direction because it's flipped).
     const v0 = vec[0] - 0.5;
     const v1 = vec[1] + 0.5;
     const m = drawable._inverseMatrix;

src/Silhouette.js

@@ -45,8 +45,8 @@ const __cornerWork = [
 /**
  * Get the color from a given silhouette at an x/y local texture position.
  * @param {Silhouette} The silhouette to sample.
- * @param {number} x X position of texture (0-1).
- * @param {number} y Y position of texture (0-1).
+ * @param {number} x X position of texture [0, width).
+ * @param {number} y Y position of texture [0, height).
  * @param {Uint8ClampedArray} dst A color 4b space.
  * @return {Uint8ClampedArray} The dst vector.
  */
@@ -149,6 +149,7 @@ class Silhouette {
         // We cannot skip the "add 0.5 in Drawable.getLocalPosition -> subtract 0.5 here" roundtrip
         // because the two spaces are different--we add 0.5 in Drawable.getLocalPosition in "Scratch space"
         // (-240,240 & -180,180), but subtract 0.5 in silhouette space (0, width or height).
+        // See https://web.archive.org/web/20190125211252/http://hacksoflife.blogspot.com/2009/12/texture-coordinate-system-for-opengl.html
         const x = (vec[0] * (this._width)) - 0.5;
         const y = (vec[1] * (this._height)) - 0.5;