0
# Systems
1

2
Modular rendering systems that handle specific aspects of the WebGL rendering pipeline. Systems provide specialized functionality for masks, textures, buffers, geometry, filters, and other rendering concerns.
3

4
## Capabilities
5

6
### System Interface
7

8
Base interface that all rendering systems implement.
9

10
```typescript { .api }
11
/**
12
 * Base interface for all rendering systems
13
 * Systems handle specific aspects of the WebGL pipeline
14
 */
15
interface ISystem {
16
  /** Destroy system and cleanup resources */
17
  destroy(): void;
18
}
19

20
interface ISystemConstructor<R = Renderer> {
21
  /** System constructor signature */
22
  new (renderer: R): ISystem;
23
}
24
```
25

26
### Core Systems
27

28
The renderer includes these essential systems for WebGL rendering:
29

30
```typescript { .api }
31
// Available on Renderer instance
32
interface RendererSystems {
33
  /** Mask rendering and stencil management */
34
  mask: MaskSystem;
35
  /** WebGL context management */
36
  context: ContextSystem;
37
  /** WebGL state tracking and optimization */
38
  state: StateSystem;
39
  /** Shader compilation and management */
40
  shader: ShaderSystem;
41
  /** Texture uploading and binding */
42
  texture: TextureSystem;
43
  /** Vertex buffer management */
44
  buffer: BufferSystem;
45
  /** Geometry and vertex array objects */
46
  geometry: GeometrySystem;
47
  /** Framebuffer and render target management */
48
  framebuffer: FramebufferSystem;
49
  /** Scissor testing */
50
  scissor: ScissorSystem;
51
  /** Stencil buffer operations */
52
  stencil: StencilSystem;
53
  /** Projection matrix management */
54
  projection: ProjectionSystem;
55
  /** Texture garbage collection */
56
  textureGC: TextureGCSystem;
57
  /** Filter rendering pipeline */
58
  filter: FilterSystem;
59
  /** Render texture management */
60
  renderTexture: RenderTextureSystem;
61
  /** Batch rendering optimization */
62
  batch: BatchSystem;
63
}
64
```
65

66
### MaskSystem
67

68
Manages mask rendering using stencil buffer or scissor testing for clipping graphics.
69

70
```typescript { .api }
71
/**
72
 * MaskSystem handles mask rendering and clipping
73
 * Uses stencil buffer and scissor testing for graphics clipping
74
 */
75
class MaskSystem implements ISystem {
76
  /** Whether masking is enabled */
77
  enableScissor: boolean;
78
  /** Current alpha mask pool */
79
  alphaMaskPool: SpriteMaskFilter[];
80
  /** Current alpha mask index */
81
  alphaMaskIndex: number;
82

83
  constructor(renderer: Renderer);
84

85
  /**
86
   * Apply mask to current rendering
87
   * @param target - Object being masked
88
   * @param maskData - Mask information
89
   */
90
  push(target: IRenderableObject, maskData: MaskData): void;
91

92
  /**
93
   * Remove current mask
94
   * @param target - Object being unmasked
95
   * @param maskData - Mask information  
96
   */
97
  pop(target: IRenderableObject, maskData?: MaskData): void;
98

99
  /**
100
   * Setup scissor mask
101
   * @param maskData - Scissor mask data
102
   */
103
  pushScissorMask(maskData: MaskData): void;
104

105
  /** Remove scissor mask */
106
  popScissorMask(): void;
107

108
  /**
109
   * Setup stencil mask
110
   * @param maskData - Stencil mask data
111
   */
112
  pushStencilMask(maskData: MaskData): void;
113

114
  /** Remove stencil mask */
115
  popStencilMask(): void;
116

117
  /** Destroy mask system */
118
  destroy(): void;
119
}
120
```
121

122
### TextureSystem
123

124
Manages GPU texture binding, uploading, and caching for efficient texture operations.
125

126
```typescript { .api }
127
/**
128
 * TextureSystem manages GPU texture operations
129
 * Handles binding, uploading, and texture unit management
130
 */
131
class TextureSystem implements ISystem {
132
  /** Maximum texture units available */
133
  maxTextures: number;
134
  /** Current texture bindings */
135
  boundTextures: BaseTexture[];
136
  /** Current active texture unit */
137
  currentLocation: number;
138
  /** Unknown texture for missing textures */
139
  unknownTexture: BaseTexture;
140
  /** Empty texture array for batch rendering */
141
  emptyTextures: BaseTexture[];
142

143
  constructor(renderer: Renderer);
144

145
  /**
146
   * Bind texture to specific texture unit
147
   * @param texture - Texture to bind
148
   * @param location - Texture unit (0-31)
149
   */
150
  bind(texture: Texture | BaseTexture, location?: number): void;
151

152
  /** Reset all texture bindings */
153
  reset(): void;
154

155
  /** Unbind all textures */
156
  unbind(texture?: BaseTexture): void;
157

158
  /** Destroy texture system */
159
  destroy(): void;
160
}
161
```
162

163
### GeometrySystem
164

165
Handles vertex array objects, attribute binding, and geometry rendering.
166

167
```typescript { .api }
168
/**
169
 * GeometrySystem manages vertex array objects and attribute binding  
170
 * Handles geometry rendering and vertex buffer setup
171
 */
172
class GeometrySystem implements ISystem {
173
  /** Whether VAOs are supported */
174
  hasVao: boolean;
175
  /** Whether instanced rendering is supported */
176
  hasInstance: boolean;
177
  /** Whether multiple render targets are supported */
178
  canUseUInt32ElementIndex: boolean;
179

180
  constructor(renderer: Renderer);
181

182
  /**
183
   * Bind geometry for rendering
184
   * @param geometry - Geometry to bind
185
   * @param shader - Shader program to use
186
   */
187
  bind(geometry?: Geometry, shader?: Shader): void;
188

189
  /** Reset geometry system state */
190
  reset(): void;
191

192
  /** Unbind current geometry */
193
  unbind(): void;
194

195
  /**
196
   * Draw bound geometry
197
   * @param type - Primitive type (TRIANGLES, etc.)
198
   * @param size - Number of elements to draw
199
   * @param start - Starting element index
200
   * @param instanceCount - Number of instances
201
   */
202
  draw(type: DRAW_MODES, size?: number, start?: number, instanceCount?: number): void;
203

204
  /** Destroy geometry system */
205
  destroy(): void;
206
}
207
```
208

209
### StateSystem
210

211
Tracks and optimizes WebGL state changes to minimize GPU state switching overhead.
212

213
```typescript { .api }
214
/**
215
 * StateSystem tracks WebGL state changes for optimization
216
 * Minimizes redundant state changes and GPU overhead  
217
 */
218
class StateSystem implements ISystem {
219
  /** Active state object */
220
  stateId: number;
221
  /** Polygon offset state */
222
  polygonOffset: number;
223
  /** Current blend mode */  
224
  blendMode: BLEND_MODES;
225
  /** Whether state is dirty */
226
  _blendEq: boolean;
227

228
  constructor(renderer: Renderer);
229

230
  /**
231
   * Set WebGL state
232
   * @param state - State object to apply
233
   */
234
  setState(state: State): void;
235

236
  /**
237
   * Set blend mode
238
   * @param value - Blend mode to apply
239
   */
240
  setBlendMode(value: BLEND_MODES): void;
241

242
  /**
243
   * Set polygon offset
244
   * @param value - Polygon offset value
245
   * @param scale - Polygon offset scale
246
   */
247
  setOffset(value: number, scale: number): void;
248

249
  /** Reset state to defaults */
250
  reset(): void;
251

252
  /** Destroy state system */
253
  destroy(): void;
254
}
255
```
256

257
### BufferSystem
258

259
Manages WebGL buffer objects for vertex and index data.
260

261
```typescript { .api }  
262
/**
263
 * BufferSystem manages WebGL buffer objects
264
 * Handles vertex and index buffer creation and updates
265
 */
266
class BufferSystem implements ISystem {
267
  /** Manages VAO state */
268
  managedBuffers: {[key: number]: Buffer};
269
  /** Bound buffer cache */
270
  boundBufferBases: {[key: number]: Buffer};
271

272
  constructor(renderer: Renderer);
273

274
  /**
275
   * Bind buffer to WebGL context
276
   * @param buffer - Buffer to bind
277
   */
278
  bind(buffer: Buffer): void;
279

280
  /**
281
   * Update buffer data
282
   * @param buffer - Buffer to update
283
   */
284
  update(buffer: Buffer): void;
285

286
  /** Dispose of buffer resources */
287
  dispose(buffer: Buffer, contextLost?: boolean): void;
288

289
  /** Dispose all managed buffers */
290
  disposeAll(contextLost?: boolean): void;
291

292
  /** Destroy buffer system */
293
  destroy(): void;
294
}
295
```
296

297
**Usage Examples:**
298

299
```typescript
300
import { Renderer } from "@pixi/core";
301

302
// Access systems through renderer
303
const renderer = new Renderer();
304

305
// Use texture system
306
renderer.texture.bind(myTexture, 0); // Bind to texture unit 0
307
renderer.texture.bind(normalMap, 1);  // Bind to texture unit 1
308

309
// Use geometry system  
310
renderer.geometry.bind(myGeometry, myShader);
311
renderer.geometry.draw(DRAW_MODES.TRIANGLES, geometry.getSize());
312

313
// Use state system
314
const state = new State();
315
state.blendMode = BLEND_MODES.ADD;
316
renderer.state.setState(state);
317

318
// Use mask system
319
const maskData = new MaskData(maskSprite);
320
renderer.mask.push(maskedObject, maskData);
321
// ... render masked content ...
322
renderer.mask.pop(maskedObject);
323

324
// Use buffer system (usually automatic)
325
const buffer = new Buffer(vertexData);
326
renderer.buffer.update(buffer); // Upload to GPU
327

328
// Use framebuffer system
329
const framebuffer = new Framebuffer(256, 256);
330
renderer.framebuffer.bind(framebuffer);
331
// ... render to framebuffer ...
332
renderer.framebuffer.bind(null); // Bind default framebuffer
333
```
334

335
**System Integration:**
336

337
```typescript
338
// Systems work together for complete rendering
339
function renderMaskedSprite(sprite, mask) {
340
  // 1. Set up mask
341
  const maskData = new MaskData(mask);
342
  renderer.mask.push(sprite, maskData);
343
  
344
  // 2. Bind texture
345
  renderer.texture.bind(sprite.texture);
346
  
347
  // 3. Set blend state
348
  const state = State.for2d();
349
  state.blendMode = sprite.blendMode;
350
  renderer.state.setState(state);
351
  
352
  // 4. Bind geometry
353
  renderer.geometry.bind(sprite.geometry, sprite.shader);
354
  
355
  // 5. Draw
356
  renderer.geometry.draw(DRAW_MODES.TRIANGLES);
357
  
358
  // 6. Clean up mask
359
  renderer.mask.pop(sprite);
360
}
361
```
362

363
## Types
364

365
```typescript { .api }
366
enum DRAW_MODES {
367
  POINTS = 0,
368
  LINES = 1,
369
  LINE_LOOP = 2,
370
  LINE_STRIP = 3,
371
  TRIANGLES = 4,
372
  TRIANGLE_STRIP = 5,
373
  TRIANGLE_FAN = 6
374
}
375

376
interface MaskData {
377
  type: MASK_TYPES;
378
  autoDetect: boolean;
379
  maskObject: IRenderableObject;
380
  pooled: boolean;
381
  isMaskData: boolean;
382
  resolution: number;
383
  multisample: MSAA_QUALITY;
384
  enabled: boolean;
385
  colorMask: number;
386
}
387

388
enum MASK_TYPES {
389
  NONE = 0,
390
  SCISSOR = 1,
391
  STENCIL = 2,
392
  SPRITE = 3,
393
  COLOR = 4
394
}
395
```