PolygonTools - Tesselator

Triangulate polygons using https://www.npmjs.com/package/polygon-tools

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
<script src="https://fpcdn.s3.amazonaws.com/apps/polygon-tools/0.4.0/polygon-tools.min.js"></script>

JavaScript

var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(500, 500);

document.body.appendChild(renderer.view);

const POLYGON = [
	[0, 0],
  [300, 0],
  [300, 200],
  [100, 200],
  [100, 300],
  [0, 300]
];

const HOLES = [
  [
  	[50, 50],
    [150, 50],
    [150, 150],
    [50, 150]
  ]
]

function randomColor () {
  let r = Math.round(Math.random() * 0xff),
      g = Math.round(Math.random() * 0xff),
      b = Math.round(Math.random() * 0xff);
  return r << 16 | g << 8 | b;
}

let options = {
	polygons: [POLYGON],
  holes: HOLES,
  windingRule: PolygonTools.tesselator.GLU_TESS_WINDING_POSITIVE,
  boundaryOnly: false,
  vertexSize: 5,
  normal: null,
  autoWinding: true
};

let result = PolygonTools.tesselator.run(options);

result.forEach(triangles => {
  var paths = triangles.map(triangle => {
      return triangle.reduce((p, pt) => {
        return p.concat(pt.map(p => p));
      }, []);
    });

  var g = new PIXI.Graphics();
  paths.forEach(path => {
    g.beginFill(randomColor());
    g.drawPolygon(path);
  });

  stage.addChild(g);
});


renderer.render(stage);