Demo: Aliasing of Pattern Fill

v0.1

Zachary Wartell. All rights reserved.

On a blue canvas, a quadrilateral is drawn below with a WebGL fragment shader that calculates the pixel intensity with a sin function whose wavelength (as pixels per cycle) is controlled by the slider. The quad is 400 pixels wide.

1. No Aliasing: Above the Nyquist limit, when Pixels Per Cycle ≥ 2, the texture renders without aliasing and looks "good".
2. Aliasing: Below the Nyquist limit, when Pixels Per Cycle < 2, the sin functions frequency is much too high to be captured by the 400 pixel width of the quadtrilateral. Instead, the texture appears to have a frequency much lower than the mathematical frequency ( Cycles Per Pixel ).
   This demonstrates aliasing occurring when "a high frequency signal is masquarading as a low frequency signal."

---

Pixels Per Cycle:	400
Cycles Per Pixel:	400

The canvas below is 400 pixels wide.

Please use a browser that supports "canvas"

---

Exercises and Questions

Examine the WebGL fragment shader below.

1. Move the slider to the right extreme until 'Pixels Per Cycle' = 400. Make sure you understand why the sin function's math in the fragment shader yields the image it does.
2. Move the slider to 'Pixels Per Cycle' = 200. Again, make sure you understand why the sin function's math in the fragment shader yields the image it does.
3. Move the slider to 'Pixels Per Cycle' = 2. Here the 400 pixels can just manage to capture the sin function's undulations without aliasing.
   
   
4. Set the Pixels Per Cycle to 0.32. Look at the image. What does the Pixels Per Cycle appear to be?
5. Set the Pixels Per Cycle to a value in range 0.95 to 1. Look at the image! What does the Pixels Per Cycle appear to be?
   (Undoubtedly, it appears to be a very, very low frequency).

---

Fragment Source Code

uniform mediump float u_pixels_per_cycle;
void main() {
// note, we normalize sin to vary from 0 to 1, and use that as intensity variation
gl_FragColor = vec4(1.0, 1.0, 1.0,1.0) * (0.5*sin( (gl_FragCoord.x)/u_pixels_per_cycle*2.0*pi)+0.5);
gl_FragColor[3]=1.0;
}


---

Source: https://cci-git.uncc.edu/UNCC_Graphics_Third_Party_Libraries/WebGL_Programming_Guide.git/ITCS 4120 Extra/aliasing