Add a shape aesthetic for changing the shape of points

[Corlio5994]

No description provided.

[casperhart]

Some more notes on the shader changes that would be required for a shape aesthetic:

• In the TS code, the point shape needs to be added as an attribute to the points geometry. I.e. this.points.geometry.setAttribute("shape", ...)
• In the vertex shaders you would add something like this so that the shape information gets passed through to the fragment shader:

attribute float shape;
varying float vShape;

// in the main() function
vShape = shape;

In the fragment shader, you would add a test to determine whether a pixel should be kept or discarded, based on the value of vShape and gl_PointCoord.

https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/gl_PointCoord.xhtml

E.g. for a square, you would not discard any pixels.

For the circles, we currently use:

    // make points circular
    float distance = length(2.0 * gl_PointCoord - 1.0);
    if (distance > 1.0) {
        discard;
    }

For a diamond, maybe something like the following (which I haven't tested):

    // map from [0,1] to [-1, 1]
    float coord = 2.0 * gl_PointCoord - 1.0;
    if (abs(coord.s) + abs(coord.t) > 1.0) {
        discard;
    }

Here's a link to my current branch with the simplified shaders:detourr/shaders.ts at vignette-interactivity · casperhart/detourr (github.com)

[Corlio5994]

Thanks for all of this, Casper! I worked through the shader tutorial yesterday, and I'll get started on my actual implementation tomorrow. I'll let you know if any issues arise!