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