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.
Public Methods
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.
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
|
||
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 |
Type | Description |
---|---|
typeof BatchRenderer |