BatchRendererPluginFactory

class BatchRendererPluginFactory

  import * as PIXI from 'pixi.js';
  import { AttributeRedirect, BatchShaderFactory, BatchRendererPluginFactory } from 'pixi-batch-renderer';

  // Define the geometry of Sprite.
  const attribSet = [
      // Sprite vertexData contains global coordinates of the corners
      new AttributeRedirect({
          source: 'vertexData',
          attrib: 'aVertex',
          type: 'float32',
          size: 2,
          glType: PIXI.TYPES.FLOAT,
          glSize: 2,
      }),
      // Sprite uvs contains the normalized texture coordinates for each corner/vertex
      new AttributeRedirect({
          source: 'uvs',
          attrib: 'aTextureCoord',
          type: 'float32',
          size: 2,
          glType: PIXI.TYPES.FLOAT,
          glSize: 2,
      }),
  ];

  const shaderFunction = 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%];
  varying float vTextureId;
  varying vec2 vTextureCoord;

  void main(void){
      vec4 color;

      // get color, which is the pixel in texture uSamplers[vTextureId] at 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();

  // Produce the SpriteBatchRenderer class!
  const SpriteBatchRenderer = BatchRendererPluginFactory.from({
      attribSet,
      indexProperty: 'indices',
      textureProperty: 'texture',
      texturesPerObject: 1, // default
      texIDAttrib: 'aTextureId',
      stateFunction: () => PIXI.State.for2d(), // default
      shaderFunction
  });

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

  // Sprite will render using SpriteBatchRenderer instead of default PixiJS
  // batch renderer. Instead of targetting PIXI.Sprite, you can write a batch
  // renderer for a custom display-object too! (See main page for that example!)
  const exampleSprite = PIXI.Sprite.from('./asset/example.png');
  exampleSprite.pluginName = 'customBatch';
  exampleSprite.width = 128;
  exampleSprite.height = 128;

new BatchRendererPluginFactory() → {}

Summary

---

Methods from BatchRendererPluginFactory

typeof BatchRenderer

static from(options: object)

Public Methods

---

from BatchRendererPluginFactory.ts:128

static from(options: object) → {typeof BatchRenderer}

Generates a fully customized BatchRenderer that aggregates primitives and textures. This is useful for non-uniform based display-objects.

Parameters:

Name	Type	Attributes	Default	Description
options	object
options.attribSet	Array<AttributeRedirect>			set of geometry attributes
options.indexProperty	string | Array<number>			no. of indices on display-object
options.vertexCountProperty	string | number | (number) => number	<optional>		no. of vertices on display-object
options.indexCountProperty	string | number | (number) => number	<optional>		no. of indicies on display object
options.textureProperty	string			textures used in display-object
options.texturePerObject	number			no. of textures used per display-object
options.texIDAttrib	string			used to find texture for each display-object (index into array)
options.uniformIDAttrib	string			used to find the uniform data for each display-object (index into array)
options.inBatchIDAttrib	string			used get the index of the object in the batch
options.masterIDAttrib	string			used to combine texture-ID, batch-ID, uniform-ID and other information into one attribute. This is an advanced optimization. It is expected you override BatchGeometryFactory#append and supply the _masterID property.
options.stateFunction	string | Function	<optional>	()=>PIXI.State.for2d()	callback that finds the WebGL state required for display-object shader
options.shaderFunction	Function			shader generator function
options.BatchGeometryFactoryClass	Class	<optional>		custom batch geometry factory class
options.BatchFactoryClass	Class	<optional>		custom batch factory class
options.BatchRendererClass	Class	<optional>		custom batch renderer class
options.BatchDrawerClass	Class	<optional>		custom batch drawer class

Returns:

Type	Description
typeof BatchRenderer