BatchRendererPluginFactory

class BatchRendererPluginFactory

Factory class for creating a batch-renderer.


  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;

Constructor


new BatchRendererPluginFactory() → {}

Factory class for creating a batch-renderer.

Summary


Methods from BatchRendererPluginFactory

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

Powered by webdoc!