JSFiddle - React, Tailwind, and code Playground

by ShukantPal

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-batch-renderer.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Batch Rendering Demo (alpha)</title>
</head>
<body>
<canvas id="app-canvas"></canvas>
</body>
</html>

JavaScript

const PIXI = window.PIXI;
const brend = window.PIXI.brend;
console.log(PIXI);

const {
  AttributeRedirect,
  BatchRendererPluginFactory,
  BatchShaderFactory
} = brend;

import iu from './assets/iu.jpeg';
import iu2 from './assets/iu2.gif';
import iu3 from './assets/iu3.png';
import iu4 from './assets/iu4.jpeg';
import iu5 from './assets/iu5.gif';

const images = [
  iu,
  iu2,
  iu3,
  iu4,
  iu5,
];

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',
 ...