Class: BatchRendererPluginFactory

.brend.BatchRendererPluginFactory

Factory class for creating a batch-renderer.

new PIXI.brend.BatchRendererPluginFactory ()

Example
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;

Methods

PIXI.brend.BatchRendererPluginFactory.from (options) static

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

Name Type Description
options object
Name Type Default Description
attribSet Array.<PIXI.brend.AttributeRedirect>

set of geometry attributes

indexProperty string | Array.<number>

no. of indices on display-object

vertexCountProperty string | number

no. of vertices on display-object

textureProperty string

textures used in display-object

texturePerObject number

no. of textures used per display-object

texIDAttrib string

used to find texture for each display-object (index into array)

stateFunction string | function ()=>PIXI.State.for2d() optional

callback that finds the WebGL state required for display-object shader

shaderFunction function

shader generator function

BatchGeometryFactoryClass Class optional

custom batch geometry factory class

BatchFactoryClass Class optional

custom batch factory class

BatchRendererClass Class optional

custom batch renderer class

BatchDrawerClass Class optional

custom batch drawer class