JSFiddle - React, Tailwind, and code Playground

by ShukantPal

HTML

<script src="https://pixijs.download/batch-dev/pixi.js"></script>

JavaScript

const vertex = `
precision highp float;
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
attribute vec4 aColor;
attribute float aTextureId;

uniform mat3 projectionMatrix;
uniform mat3 translationMatrix;
uniform vec4 tint;

varying vec2 vTextureCoord;
varying vec4 vColor;
varying float vTextureId;

void main(void){
    gl_Position = vec4(aVertexPosition.xyz, 1.0);

    vTextureCoord = aTextureCoord;
    vTextureId = aTextureId;
    vColor = aColor * tint;
}

`;

const fragment = `
varying vec2 vTextureCoord;
varying vec4 vColor;
varying float vTextureId;
uniform sampler2D uSamplers[%count%];

void main(void){
    vec4 color;
    %forloop%
    gl_FragColor = vec4(color.a - color.rgb, color.a);
}
`;

const InvertPlugin = PIXI.BatchPluginFactory.create({
  attributeDefinitions: [
      {
          property: 'vertexData',
          name: 'aVertexPosition',
          type: 'float32',
          size: 3,
          glType: PIXI.TYPES.FLOAT,
          glSize: 3,
      },
      {
          property: 'uvs',
          name: 'aTextureCoord',
          type: 'float32',
          size: 2,
          glType: PIXI.TYPES.FLOAT,
          glSize: 2,
      },
      'aColor', // built-in attribute
      'aTextureId',
  ],
  vertex, fragment
});
PIXI.Renderer.registerPlugin('invert', InvertPlugin);

// Create our application instance
var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0xdffadf,
    resizeTo: window
});
document.body.appendChild(app.view);

class MySprite extends PIXI.Container
{
  constructor(_texture) {
    super();
    this._texture = _texture;
    this.texture = _texture;
    this._tintRGB = 1;
    this.worldAlpha = 1;
    this.vertexData = [.05,-.1,0, .15,-.1,0, .15,-.55,0, .05,-.55,0];
    this.uvs = [0,0, 1,0, 1,1, 0,1];
    this.blendMode =PIXI.BLEND_MODES.NORMAL;
    this.indices = [0,1,2,2,3,0];
  }

  _render(renderer) {
   ...