Expose PolygonOffsetRadius attribute to render irregular polygons

[jimbojw]

Currently, the Sides sprite attribute allows the API user to render regular polygons. In addition, API users should be able to render irregular polygons.

The fragment shader used for drawing already supports offset radii in the getDistPolygon() method. See scene-fragment-shader.ts

Design question: Should the number of radius components always be 4? Should this be configurable? Under what circumstances would a different number be beneficial?

API Proposal:

  /**
   * Offset radii for irregular polygon rendering. Default value of 0
   * means not indented at all (point is on a unit circle). A value of
   * 1 would place the point at the center of the shape. A value of -1
   * would place the point at a distance of 2 from the center.
   * 
   * If a polygon has more than 4 points, the offset radii are used
   * again in a repeating fashion.
   */
  {
    attributeName: 'PolygonOffsetRadius',
    isBroadcastable: true,
    isInterpolable: true,
    components: ['A', 'B', 'C', 'D'],
  },

Example:

const sprite = scene.createSprite();
sprite.enter(s => {
  // A 5-pointed star is a 10-sided polygon.
  s.Sides = 10;

  // Where every other point is indented half way.
  s.PolygonOffsetRadius = [0, .5, 0, .5];
});

Implementation note: Consider the effect of negative values on the need to shift vertex coordinates outwards. Points further away demand extra space in the bounding box to ensure that the full shape is rendered. Make sure that both the rendering shaders and the hit test shader take this into account.