0
# Rendering and Performance
1

2
WebGL and WebGPU rendering backends, batching system, geometry management, shaders, and performance optimization utilities. The rendering system provides the foundation for high-performance graphics rendering with multiple backend support.
3

4
## Capabilities
5

6
### Renderer Classes
7

8
Core renderer classes supporting different graphics APIs.
9

10
```typescript { .api }
11
/**
12
 * WebGL renderer implementation
13
 */
14
class WebGLRenderer extends AbstractRenderer {
15
  constructor(options?: WebGLRendererOptions);
16
  
17
  /** WebGL rendering context */
18
  readonly gl: WebGLRenderingContext | WebGL2RenderingContext;
19
  
20
  /** WebGL context system */
21
  context: GlContextSystem;
22
  
23
  /** Shader system */
24
  shader: GlShaderSystem;
25
  
26
  /** Geometry system */
27
  geometry: GlGeometrySystem;
28
  
29
  /** Buffer system */
30
  buffer: GlBufferSystem;
31
  
32
  /** Texture system */
33
  texture: GlTextureSystem;
34
  
35
  /** State system */
36
  state: GlStateSystem;
37
  
38
  /**
39
   * Render display object
40
   * @param displayObject - Object to render
41
   * @param options - Render options
42
   */
43
  render(displayObject: Container, options?: RenderOptions): void;
44
}
45

46
/**
47
 * WebGPU renderer implementation
48
 */
49
class WebGPURenderer extends AbstractRenderer {
50
  constructor(options?: WebGPURendererOptions);
51
  
52
  /** WebGPU device */
53
  readonly device: GPUDevice;
54
  
55
  /** WebGPU adapter */
56
  readonly adapter: GPUAdapter;
57
  
58
  /** Pipeline system */
59
  pipeline: PipelineSystem;
60
  
61
  /** Bind group system */
62
  bindGroup: BindGroupSystem;
63
  
64
  /** GPU buffer system */
65
  buffer: GpuBufferSystem;
66
  
67
  /** GPU texture system */
68
  texture: GpuTextureSystem;
69
  
70
  /**
71
   * Render display object
72
   * @param displayObject - Object to render
73
   * @param options - Render options
74
   */
75
  render(displayObject: Container, options?: RenderOptions): void;
76
}
77

78
/**
79
 * Base renderer class
80
 */
81
abstract class AbstractRenderer extends EventEmitter {
82
  constructor(options?: RendererOptions);
83
  
84
  /** Renderer type */
85
  readonly type: RENDERER_TYPE;
86
  
87
  /** Canvas element */
88
  readonly canvas: HTMLCanvasElement;
89
  
90
  /** Screen rectangle */
91
  readonly screen: Rectangle;
92
  
93
  /** Rendering resolution */
94
  resolution: number;
95
  
96
  /** Auto resize flag */
97
  autoDensity: boolean;
98
  
99
  /** Background system */
100
  background: BackgroundSystem;
101
  
102
  /** View system */
103
  view: ViewSystem;
104
  
105
  /** Render target system */
106
  renderTarget: RenderTargetSystem;
107
  
108
  /** Global uniform system */
109
  globalUniforms: GlobalUniformSystem;
110
  
111
  /**
112
   * Resize renderer
113
   * @param width - New width
114
   * @param height - New height
115
   * @param resolution - New resolution
116
   */
117
  resize(width: number, height: number, resolution?: number): void;
118
  
119
  /**
120
   * Clear renderer
121
   * @param color - Clear color
122
   * @param alpha - Clear alpha
123
   */
124
  clear(color?: ColorSource, alpha?: number): void;
125
  
126
  /**
127
   * Destroy renderer
128
   * @param removeView - Remove canvas from DOM
129
   */
130
  destroy(removeView?: boolean): void;
131
}
132

133
/**
134
 * Auto-detect best renderer
135
 * @param options - Renderer options
136
 * @returns Promise resolving to renderer
137
 */
138
function autoDetectRenderer<T extends AbstractRenderer>(options?: RendererOptions): Promise<T>;
139

140
interface RendererOptions {
141
  /** Canvas width */
142
  width?: number;
143
  
144
  /** Canvas height */
145
  height?: number;
146
  
147
  /** Canvas element */
148
  canvas?: HTMLCanvasElement;
149
  
150
  /** Background color */
151
  background?: ColorSource;
152
  
153
  /** Background alpha */
154
  backgroundAlpha?: number;
155
  
156
  /** Device pixel ratio */
157
  resolution?: number;
158
  
159
  /** Auto adjust for device pixel ratio */
160
  autoDensity?: boolean;
161
  
162
  /** Antialias */
163
  antialias?: boolean;
164
  
165
  /** Premultiplied alpha */
166
  premultipliedAlpha?: boolean;
167
  
168
  /** Preserve drawing buffer */
169
  preserveDrawingBuffer?: boolean;
170
  
171
  /** Power preference */
172
  powerPreference?: WebGLPowerPreference;
173
  
174
  /** WebGL context attributes */
175
  context?: WebGLContextAttributes;
176
  
177
  /** Preferred renderer */
178
  preference?: 'webgl' | 'webgpu';
179
  
180
  /** Hello message */
181
  hello?: boolean;
182
}
183
```
184

185
### Batching System
186

187
High-performance batching system for efficient rendering.
188

189
```typescript { .api }
190
/**
191
 * Batch rendering system
192
 */
193
class Batcher {
194
  constructor();
195
  
196
  /** Maximum textures per batch */
197
  maxTextures: number;
198
  
199
  /** Current batch size */
200
  size: number;
201
  
202
  /** Attribute buffer */
203
  attributeBuffer: ViewableBuffer;
204
  
205
  /** Index buffer */
206
  indexBuffer: Uint16Array | Uint32Array;
207
  
208
  /**
209
   * Add object to batch
210
   * @param batchableObject - Object to batch
211
   */
212
  addToBatch(batchableObject: Batchable): void;
213
  
214
  /**
215
   * Break current batch
216
   * @param instructionSet - Instruction set
217
   */
218
  break(instructionSet: InstructionSet): void;
219
  
220
  /**
221
   * Finish batch
222
   * @param instructionSet - Instruction set
223
   */
224
  finish(instructionSet: InstructionSet): void;
225
  
226
  /**
227
   * Upload batch data
228
   * @param instructionSet - Instruction set
229
   */
230
  upload(instructionSet: InstructionSet): void;
231
  
232
  /**
233
   * Execute batch
234
   * @param instructionSet - Instruction set
235
   */
236
  execute(instructionSet: InstructionSet): void;
237
}
238

239
/**
240
 * Batchable object interface
241
 */
242
interface Batchable {
243
  /** Batch size */
244
  batchSize: number;
245
  
246
  /** Attribute size */
247
  attributeSize: number;
248
  
249
  /** Index size */
250
  indexSize: number;
251
  
252
  /** Texture */
253
  texture: Texture;
254
  
255
  /** Blend mode */
256
  blendMode: BLEND_MODES;
257
  
258
  /**
259
   * Pack attributes
260
   * @param float32View - Float32 view
261
   * @param uint32View - Uint32 view
262
   * @param index - Starting index
263
   * @param textureId - Texture ID
264
   */
265
  packAttributes(float32View: Float32Array, uint32View: Uint32Array, index: number, textureId: number): void;
266
  
267
  /**
268
   * Pack indices
269
   * @param indexBuffer - Index buffer
270
   * @param index - Starting index
271
   * @param indicesOffset - Vertex offset
272
   */
273
  packIndex(indexBuffer: Uint16Array | Uint32Array, index: number, indicesOffset: number): void;
274
}
275
```
276

277
### Geometry System
278

279
Vertex data management and geometry utilities.
280

281
```typescript { .api }
282
/**
283
 * Geometry class for vertex data
284
 */
285
class Geometry {
286
  constructor(options?: GeometryOptions);
287
  
288
  /** Vertex attributes */
289
  attributes: Record<string, Attribute>;
290
  
291
  /** Index buffer */
292
  indexBuffer: Buffer;
293
  
294
  /** Instance count */
295
  instanceCount: number;
296
  
297
  /** Geometry bounds */
298
  bounds: Bounds;
299
  
300
  /**
301
   * Add attribute
302
   * @param name - Attribute name
303
   * @param buffer - Attribute buffer
304
   * @param size - Components per vertex
305
   * @param normalized - Normalize values
306
   * @param type - Data type
307
   * @param stride - Byte stride
308
   * @param offset - Byte offset
309
   * @returns This geometry
310
   */
311
  addAttribute(name: string, buffer: Buffer | number[], size?: number, normalized?: boolean, type?: TYPES, stride?: number, offset?: number): this;
312
  
313
  /**
314
   * Add index buffer
315
   * @param buffer - Index buffer
316
   * @returns This geometry
317
   */
318
  addIndex(buffer: Buffer | number[]): this;
319
  
320
  /**
321
   * Get attribute
322
   * @param name - Attribute name
323
   * @returns Attribute data
324
   */
325
  getAttribute(name: string): Attribute;
326
  
327
  /**
328
   * Get bounds
329
   * @param out - Rectangle to store bounds
330
   * @returns Geometry bounds
331
   */
332
  getBounds(out?: Rectangle): Rectangle;
333
  
334
  /**
335
   * Dispose geometry
336
   */
337
  dispose(): void;
338
  
339
  /**
340
   * Clone geometry
341
   * @returns Cloned geometry
342
   */
343
  clone(): Geometry;
344
}
345

346
/**
347
 * Vertex attribute definition
348
 */
349
interface Attribute {
350
  /** Attribute buffer */
351
  buffer: Buffer;
352
  
353
  /** Components per vertex */
354
  size: number;
355
  
356
  /** Normalize values */
357
  normalized: boolean;
358
  
359
  /** Data type */
360
  type: TYPES;
361
  
362
  /** Byte stride */
363
  stride: number;
364
  
365
  /** Byte offset */
366
  offset: number;
367
}
368
```
369

370
### Buffer Management
371

372
GPU buffer management for vertex and index data.
373

374
```typescript { .api }
375
/**
376
 * GPU buffer for vertex/index data
377
 */
378
class Buffer {
379
  constructor(data?: ArrayBuffer | ArrayBufferView, usage?: BUFFER_USAGE, index?: boolean);
380
  
381
  /** Buffer data */
382
  data: ArrayBuffer | ArrayBufferView;
383
  
384
  /** Buffer usage pattern */
385
  usage: BUFFER_USAGE;
386
  
387
  /** Is index buffer */
388
  index: boolean;
389
  
390
  /** Buffer size */
391
  size: number;
392
  
393
  /** Update ID */
394
  updateId: number;
395
  
396
  /**
397
   * Update buffer data
398
   * @param data - New buffer data
399
   */
400
  update(data?: ArrayBuffer | ArrayBufferView): void;
401
  
402
  /**
403
   * Dispose buffer
404
   */
405
  dispose(): void;
406
  
407
  /**
408
   * Create buffer from array
409
   * @param data - Array data
410
   * @param usage - Buffer usage
411
   * @param index - Is index buffer
412
   * @returns New buffer
413
   */
414
  static from(data: number[], usage?: BUFFER_USAGE, index?: boolean): Buffer;
415
}
416

417
/**
418
 * Buffer usage patterns
419
 */
420
enum BUFFER_USAGE {
421
  STATIC = 0,
422
  DYNAMIC = 1,
423
  STREAM = 2
424
}
425
```
426

427
### Shader System
428

429
Shader compilation and management.
430

431
```typescript { .api }
432
/**
433
 * Shader program
434
 */
435
class Shader {
436
  constructor(options?: ShaderOptions);
437
  
438
  /** Vertex shader source */
439
  vertex: string;
440
  
441
  /** Fragment shader source */
442
  fragment: string;
443
  
444
  /** Uniform groups */
445
  groups: Record<string, UniformGroup>;
446
  
447
  /** Shader resources */
448
  resources: Record<string, any>;
449
  
450
  /**
451
   * Destroy shader
452
   */
453
  destroy(): void;
454
  
455
  /**
456
   * Create shader from sources
457
   * @param vertex - Vertex shader source
458
   * @param fragment - Fragment shader source
459
   * @param name - Shader name
460
   * @returns New shader
461
   */
462
  static from(vertex: string, fragment: string, name?: string): Shader;
463
}
464

465
/**
466
 * Uniform group for shader uniforms
467
 */
468
class UniformGroup {
469
  constructor(uniforms: Record<string, any>, options?: UniformGroupOptions);
470
  
471
  /** Uniform values */
472
  uniforms: Record<string, any>;
473
  
474
  /** Update ID */
475
  updateId: number;
476
  
477
  /** Static flag */
478
  isStatic: boolean;
479
  
480
  /**
481
   * Update uniform values
482
   * @param uniforms - New uniform values
483
   */
484
  update(uniforms?: Record<string, any>): void;
485
}
486
```
487

488
### Render Targets
489

490
Render target and framebuffer management.
491

492
```typescript { .api }
493
/**
494
 * Render target for off-screen rendering
495
 */
496
class RenderTarget {
497
  constructor(options?: RenderTargetOptions);
498
  
499
  /** Color textures */
500
  colorTextures: Texture[];
501
  
502
  /** Depth/stencil texture */
503
  depthStencilTexture: Texture;
504
  
505
  /** Render target size */
506
  size: { width: number; height: number };
507
  
508
  /** Resolution */
509
  resolution: number;
510
  
511
  /** Multisample count */
512
  multisample: MSAA_QUALITY;
513
  
514
  /**
515
   * Resize render target
516
   * @param width - New width
517
   * @param height - New height
518
   * @param resolution - New resolution
519
   */
520
  resize(width: number, height: number, resolution?: number): void;
521
  
522
  /**
523
   * Destroy render target
524
   */
525
  destroy(): void;
526
}
527

528
interface RenderTargetOptions {
529
  /** Width */
530
  width?: number;
531
  
532
  /** Height */
533
  height?: number;
534
  
535
  /** Resolution */
536
  resolution?: number;
537
  
538
  /** Color texture count */
539
  colorTextures?: number;
540
  
541
  /** Enable depth buffer */
542
  depth?: boolean;
543
  
544
  /** Enable stencil buffer */
545
  stencil?: boolean;
546
  
547
  /** Multisample quality */
548
  antialias?: MSAA_QUALITY;
549
}
550
```
551

552
### Performance Optimization
553

554
Performance monitoring and optimization utilities.
555

556
```typescript { .api }
557
/**
558
 * Performance monitoring
559
 */
560
interface PerformanceData {
561
  /** Frame rate */
562
  fps: number;
563
  
564
  /** Frame time in milliseconds */
565
  frameTime: number;
566
  
567
  /** Draw calls per frame */
568
  drawCalls: number;
569
  
570
  /** Texture binds per frame */
571
  textureBinds: number;
572
  
573
  /** Vertices rendered */
574
  vertices: number;
575
  
576
  /** Memory usage */
577
  memory: {
578
    /** Texture memory */
579
    textures: number;
580
    
581
    /** Buffer memory */
582
    buffers: number;
583
    
584
    /** Total GPU memory */
585
    total: number;
586
  };
587
}
588

589
/**
590
 * Get performance statistics
591
 * @param renderer - Renderer instance
592
 * @returns Performance data
593
 */
594
function getPerformanceStats(renderer: AbstractRenderer): PerformanceData;
595

596
/**
597
 * Optimize renderer for performance
598
 * @param renderer - Renderer instance
599
 * @param options - Optimization options
600
 */
601
function optimizeRenderer(renderer: AbstractRenderer, options?: OptimizationOptions): void;
602

603
interface OptimizationOptions {
604
  /** Enable batching */
605
  batching?: boolean;
606
  
607
  /** Texture garbage collection */
608
  textureGC?: boolean;
609
  
610
  /** Geometry pooling */
611
  geometryPooling?: boolean;
612
  
613
  /** Cull off-screen objects */
614
  culling?: boolean;
615
}
616
```
617

618
**Usage Examples:**
619

620
```typescript
621
import { 
622
  autoDetectRenderer, 
623
  WebGLRenderer, 
624
  WebGPURenderer, 
625
  Geometry, 
626
  Buffer, 
627
  Shader,
628
  RenderTarget,
629
  BUFFER_USAGE 
630
} from 'pixi.js';
631

632
// Renderer creation and setup
633
const renderer = await autoDetectRenderer({
634
  width: 1024,
635
  height: 768,
636
  preference: 'webgpu',
637
  antialias: true,
638
  resolution: window.devicePixelRatio
639
});
640

641
document.body.appendChild(renderer.canvas);
642

643
// Manual renderer creation
644
const webglRenderer = new WebGLRenderer({
645
  width: 800,
646
  height: 600,
647
  powerPreference: 'high-performance'
648
});
649

650
// Custom geometry creation
651
const geometry = new Geometry();
652

653
// Vertex positions (triangle)
654
const positions = new Float32Array([
655
  0, 50,    // Top vertex
656
  -50, -50, // Bottom left
657
  50, -50   // Bottom right
658
]);
659

660
geometry.addAttribute('aPosition', new Buffer(positions), 2);
661

662
// Index buffer
663
const indices = new Uint16Array([0, 1, 2]);
664
geometry.addIndex(new Buffer(indices, BUFFER_USAGE.STATIC, true));
665

666
// Custom shader
667
const shader = Shader.from(`
668
  attribute vec2 aPosition;
669
  uniform mat3 uProjectionMatrix;
670
  uniform mat3 uWorldTransformMatrix;
671
  
672
  void main() {
673
    gl_Position = vec4((uProjectionMatrix * uWorldTransformMatrix * vec3(aPosition, 1.0)).xy, 0.0, 1.0);
674
  }
675
`, `
676
  uniform vec4 uColor;
677
  
678
  void main() {
679
    gl_FragColor = uColor;
680
  }
681
`);
682

683
// Render target for off-screen rendering
684
const renderTexture = RenderTarget.create({
685
  width: 512,
686
  height: 512,
687
  multisample: 4 // 4x MSAA
688
});
689

690
// Render scene to texture
691
renderer.render({
692
  container: scene,
693
  target: renderTexture
694
});
695

696
// Performance monitoring
697
const stats = getPerformanceStats(renderer);
698
console.log(`FPS: ${stats.fps}, Draw Calls: ${stats.drawCalls}`);
699

700
// Batch optimization
701
const batcher = renderer.batcher;
702
batcher.maxTextures = 16; // Increase batch size
703

704
// Memory management
705
renderer.texture.gc(); // Clean up unused textures
706
renderer.buffer.gc();  // Clean up unused buffers
707

708
// Conditional rendering based on capabilities
709
if (renderer.type === RENDERER_TYPE.WEBGL) {
710
  const glRenderer = renderer as WebGLRenderer;
711
  console.log('WebGL version:', glRenderer.context.webGLVersion);
712
  
713
  // WebGL-specific optimizations
714
  glRenderer.state.setState({
715
    culling: true,
716
    clockwiseFrontFace: false,
717
    depthTest: true
718
  });
719
}
720

721
// High-performance particle rendering
722
const particleGeometry = new Geometry();
723
const particleCount = 10000;
724

725
// Create instanced attributes
726
const positions = new Float32Array(particleCount * 2);
727
const colors = new Float32Array(particleCount * 4);
728
const scales = new Float32Array(particleCount);
729

730
for (let i = 0; i < particleCount; i++) {
731
  const i2 = i * 2;
732
  const i4 = i * 4;
733
  
734
  positions[i2] = Math.random() * 800;
735
  positions[i2 + 1] = Math.random() * 600;
736
  
737
  colors[i4] = Math.random();
738
  colors[i4 + 1] = Math.random();
739
  colors[i4 + 2] = Math.random();
740
  colors[i4 + 3] = 1.0;
741
  
742
  scales[i] = 0.5 + Math.random() * 1.5;
743
}
744

745
particleGeometry.addAttribute('aInstancePosition', positions, 2);
746
particleGeometry.addAttribute('aInstanceColor', colors, 4);
747
particleGeometry.addAttribute('aInstanceScale', scales, 1);
748

749
// Clean up resources
750
geometry.dispose();
751
shader.destroy();
752
renderTexture.destroy();
753
renderer.destroy(true);
754
```