PixiJS Demonstrate BatchPluginFactory

Create a custom batch renderer using new factory API.

by ShukantPal

HTML

<script src="https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js"></script>

CSS

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

canvas {
  display: block;
}

JavaScript

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

void main(void){
    vec4 color;
    %forloop%
    gl_FragColor = vColor * vec4(color.a - color.rgb, color.a);
}
`;
console.log('help')
const InvertPlugin = PIXI.BatchPluginFactory.create({
  fragment
});
PIXI.Renderer.registerPlugin('invert', InvertPlugin);

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

// Load the bunny texture
app.loader.add('bunny', 'https://pixijs.io/examples/examples/assets/bunny.png')
  .load(startup);

function startup() {
  for (let i = -2; i <= 2; i++) {
    let bunny = new PIXI.Sprite(app.loader.resources.bunny.texture);

    // Center the sprite's anchor point
    bunny.anchor.set(0.5);
    bunny.pluginName = 'invert';
    bunny.scale.set(2);

    // Move the sprite to the center of the screen
    bunny.x = app.renderer.width / 2;
    bunny.y = app.renderer.height / 2;
    bunny.x += i * 80;

    app.stage.addChild(bunny);

    // Listen for animate update
    app.ticker.add((delta) => {
      // Rotate mr rabbit clockwise
      bunny.rotation += 0.1 * delta;
    });
  }
}