Stripes: A Simple Shader Demo

This is a demonstation of making a simple stripe shader. I start with a simple solid color stripes (with parameters) and then add anti-aliasing.

Not much commentary for now (I believe it is discussed in this in a video lecture).

The same fragment shader is used in all versions.

Step 1 - Most Basic Stripes

Just to get something going, I made the simplest version.

The only thing of note: I use uniform parameters to pass the two different color, the number of stripes, and the “width” of the stripe (the percentage of the stripe that each color has).

There is no anti-aliasing yet.

You can see this on a clean html page, see the js source, vertex shader, and fragment shader.

Step 2 - Anti-Aliasing

Here is a first cut at anti-aliasing.

In the 0-1 range of the texture parameter, there is a “hard edge” that we need to blur. In this version, I am only blurring that edge: the other edge occurs at the “wrap around” (when we go back from 1-0 at the edge of the pattern). I’ll deal with that later.

For this demo, I am setting the amount of blur with the slider. If the blur is negative, I compute the amount using fwidth (which is what you can make blur negative). If you make blur positive, you can blur things too much.

You can see this on a clean html page, see the js source, vertex shader, and fragment shader.

Step 3 - Two Sided Anti-Aliasing

It is much easier to anti-alias both sides of the stripe if they occur within the parameter range (rather than dealing with the wrap around). So this version of the shader puts each stripe at the middle of the parameter range, and checks for the edges of the stripes by distance to the middle.

You can see this on a clean html page, see the js source, vertex shader, and fragment shader.