JSFiddle - React, Tailwind, and code Playground

by ShukantPal

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-batch-renderer.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <title>Batch Rendering Demo (alpha)</title>
  </head>

  <body>
    <img id="iu1" src="https://i.imgur.com/0zfYpWE.png" alt="iu" border="0" style="display:none;" />
    <canvas id="app-canvas""></canvas>
  </body>

</html>

JavaScript

const {
  AttributeRedirect,
  BatchRendererPluginFactory,
  BatchShaderFactory
} = PIXI.brend;

document.getElementById("iu1").crossOrigin = "anonymous";
//document.getElementById("iu2").crossOrigin = "anonymous";

const images = [
  PIXI.Texture.from(document.getElementById("iu1")),
];

const attribSet = [
  new AttributeRedirect({
    source: 'vertexData',
    attrib: 'aVertex',
    type: 'float32',
    size: 2,
    glType: PIXI.TYPES.FLOAT,
    glSize: 2,
  }),
  new AttributeRedirect({
    source: 'uvs',
    attrib: 'aTextureCoord',
    type: 'float32',
    size: 2,
    glType: PIXI.TYPES.FLOAT,
    glSize: 2,
  }),
];

const shader = new BatchShaderFactory( // 1. vertexShader
  `
  attribute vec2 aVertex;
  attribute vec2 aTextureCoord;
  attribute float aTextureId;

  varying float vTextureId;
  varying vec2 vTextureCoord;

  uniform mat3 projectionMatrix;

  void main() {
    gl_Position = vec4((projectionMatrix * vec3(aVertex, 1)).xy, 0, 1);
    vTextureId = aTextureId;
    vTextureCoord = aTextureCoord;
  }
`,
  `
  uniform sampler2D uSamplers[%texturesPerBatch%];/* %texturesPerBatch% is a macro and will become a number */\
  varying float vTextureId;
  varying vec2 vTextureCoord;

  void main(void){
    vec4 color;

    /* get color, which is the pixel in texture uSamplers[vTextureId] @ vTextureCoord */
    for (int k = 0; k < %texturesPerBatch%; ++k) {
      if (int(vTextureId) == k) {
        color = texture2D(uSamplers[k], vTextureCoord);
        break;
      }
    }

    gl_FragColor = color;
  }
 `, { // we don't use any uniforms except uSamplers, which is handled by default!
  },
  // no custom template injectors
  // disable vertex shader macros by default
).derive();

const SpriteBatchRenderer = BatchRendererPluginFactory.from({
  attribSet,
  indexProperty: 'indices',
  textureProperty: 'texture',
  texIDAttrib: 'aTextureId',
  shaderFunction: shader,
});

PIXI.Renderer.registerPlugin('customBatch', SpriteBatchRenderer);

const app = new...