0
# Graphics & Rendering
1

2
Advanced graphics and rendering capabilities in PixiJS for vector graphics, custom meshes, post-processing effects, and high-performance rendering. This sub-doc focuses on the powerful rendering features that go beyond basic display objects, including GPU-accelerated vector graphics, custom geometry rendering, advanced filtering systems, and complex blending operations.
3

4
## Core Graphics System
5

6
### Graphics Class { .api }
7

8
```typescript
9
class Graphics extends Container {
10
  // Properties
11
  readonly geometry: GraphicsGeometry
12
  shader: Shader | null
13
  blendMode: BLEND_MODES
14
  tint: ColorSource
15
  readonly fill: FillStyle
16
  readonly line: LineStyle
17
  readonly currentPath: Polygon | null
18

19
  // Shape Drawing Methods
20
  drawRect(x: number, y: number, width: number, height: number): this
21
  drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): this
22
  drawCircle(x: number, y: number, radius: number): this
23
  drawEllipse(x: number, y: number, width: number, height: number): this
24
  drawPolygon(path: Array<number> | Array<IPointData> | Polygon): this
25
  drawShape(shape: IShape): this
26

27
  // Path Drawing Methods
28
  moveTo(x: number, y: number): this
29
  lineTo(x: number, y: number): this
30
  arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this
31
  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this
32
  bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): this
33
  quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): this
34
  closePath(): this
35

36
  // Style Methods
37
  lineStyle(options: ILineStyleOptions): this
38
  lineStyle(width?: number, color?: ColorSource, alpha?: number, alignment?: number, native?: boolean): this
39
  lineTextureStyle(options?: ILineStyleOptions): this
40
  beginFill(color?: ColorSource, alpha?: number): this
41
  beginTextureFill(options?: IFillStyleOptions): this
42
  endFill(): this
43

44
  // Advanced Features
45
  beginHole(): this
46
  endHole(): this
47
  setMatrix(matrix: Matrix): this
48
  clear(): this
49
  clone(): Graphics
50
  isFastRect(): boolean
51
  containsPoint(point: IPointData): boolean
52

53
  // Static Configuration
54
  static readonly curves: IGraphicsCurvesSettings
55
}
56

57
interface ILineStyleOptions extends IFillStyleOptions {
58
  width?: number
59
  alignment?: number  // 0 = inner, 0.5 = middle, 1 = outer (WebGL only)
60
  native?: boolean    // Use LINES instead of TRIANGLE_STRIP
61
  cap?: LINE_CAP
62
  join?: LINE_JOIN
63
  miterLimit?: number
64
}
65

66
interface IFillStyleOptions {
67
  color?: ColorSource
68
  alpha?: number
69
  texture?: Texture
70
  matrix?: Matrix
71
}
72

73
interface IGraphicsBatchElement {
74
  vertexData: Float32Array
75
  blendMode: BLEND_MODES
76
  indices: Uint16Array | Uint32Array
77
  uvs: Float32Array
78
  alpha: number
79
  worldAlpha: number
80
  _batchRGB: number[]
81
  _tintRGB: number
82
  _texture: Texture
83
}
84
```
85

86
### Graphics Styles { .api }
87

88
```typescript
89
class FillStyle {
90
  color: number          // Hex color value (default: 0xFFFFFF)
91
  alpha: number          // Alpha value (default: 1.0)
92
  texture: Texture       // Fill texture (default: Texture.WHITE)
93
  matrix: Matrix | null  // Transform matrix for texture (default: null)
94
  visible: boolean       // Visibility flag (default: false)
95

96
  clone(): FillStyle
97
  reset(): void
98
  destroy(): void
99
}
100

101
class LineStyle extends FillStyle {
102
  width: number           // Line thickness (default: 0)
103
  alignment: number       // Line alignment 0-1 (default: 0.5)
104
  native: boolean         // Use GL LINES mode (default: false)
105
  cap: LINE_CAP          // Line cap style (default: BUTT)
106
  join: LINE_JOIN        // Line join style (default: MITER)
107
  miterLimit: number     // Miter limit ratio (default: 10)
108

109
  clone(): LineStyle
110
  reset(): void
111
}
112

113
enum LINE_CAP {
114
  BUTT = 'butt',      // Square ends at exact endpoints
115
  ROUND = 'round',    // Semicircular caps
116
  SQUARE = 'square'   // Square caps extending beyond endpoints
117
}
118

119
enum LINE_JOIN {
120
  MITER = 'miter',    // Sharp corner where lines meet
121
  BEVEL = 'bevel',    // Squared corner with triangle fill
122
  ROUND = 'round'     // Rounded arc at joint
123
}
124
```
125

126
## Mesh System
127

128
### Mesh Class { .api }
129

130
```typescript
131
class Mesh<T extends Shader = MeshMaterial> extends Container {
132
  // Core Properties
133
  geometry: Geometry     // Vertex data and attributes
134
  shader: T             // Shader program and uniforms
135
  state: State          // WebGL rendering state
136
  drawMode: DRAW_MODES  // How to interpret geometry data
137
  start: number         // Index buffer start position
138
  size: number          // Number of elements to draw
139

140
  // Rendering Properties
141
  blendMode: BLEND_MODES
142
  roundPixels: boolean
143
  tint: ColorSource | null        // For MeshMaterial shaders
144
  texture: Texture | null         // For MeshMaterial shaders
145

146
  // Buffers (readonly)
147
  readonly uvBuffer: Buffer       // UV coordinate buffer
148
  readonly verticesBuffer: Buffer // Vertex position buffer
149

150
  // Methods
151
  calculateVertices(): void
152
  calculateUvs(): void
153
  containsPoint(point: IPointData): boolean
154

155
  // Batching
156
  static BATCHABLE_SIZE: number  // Max vertices for batching (default: 100)
157
}
158

159
enum DRAW_MODES {
160
  POINTS = 0,          // Individual points
161
  LINES = 1,           // Separate line segments
162
  LINE_LOOP = 2,       // Connected lines forming loop
163
  LINE_STRIP = 3,      // Connected line segments
164
  TRIANGLES = 4,       // Separate triangles
165
  TRIANGLE_STRIP = 5,  // Connected triangles in strip
166
  TRIANGLE_FAN = 6     // Triangles sharing central vertex
167
}
168
```
169

170
### Custom Geometry Creation { .api }
171

172
```typescript
173
class Geometry {
174
  buffers: Array<Buffer>                    // Vertex data buffers
175
  indexBuffer: Buffer | null                // Index buffer for element drawing
176
  attributes: {[key: string]: Attribute}    // Vertex attribute mappings
177
  instanced: boolean                        // Instance rendering flag
178
  instanceCount: number                     // Number of instances
179

180
  // Methods
181
  addAttribute(id: string, buffer: Buffer | number[], size: number, 
182
               normalized?: boolean, type?: TYPES, stride?: number, start?: number): this
183
  addIndex(buffer: Buffer | number[]): this
184
  getAttribute(id: string): Attribute
185
  getBuffer(id: string): Buffer
186
  getIndex(): Buffer
187
  interleave(): this
188
  clone(): Geometry
189
  dispose(): void
190
}
191

192
class Buffer {
193
  data: IArrayBuffer    // Typed array data
194
  type: BUFFER_TYPE     // Buffer usage type
195
  static: boolean       // Static vs dynamic usage
196

197
  update(data?: IArrayBuffer): void
198
  dispose(): void
199

200
  // Factory methods
201
  static from(data: IArrayBuffer | number[]): Buffer
202
}
203

204
class Attribute {
205
  buffer: Buffer        // Associated buffer
206
  size: number         // Components per vertex (1-4)
207
  normalized: boolean  // Normalize integer data to 0-1
208
  type: TYPES         // Data type (FLOAT, UNSIGNED_BYTE, etc.)
209
  stride: number      // Bytes between vertices
210
  start: number       // Byte offset to first component
211
  instance: boolean   // Per-instance attribute
212
}
213
```
214

215
## Filter System
216

217
### Base Filter Class { .api }
218

219
```typescript
220
class Filter extends Shader {
221
  // Configuration
222
  padding: number                    // Filter padding in pixels
223
  resolution: number | null          // Filter resolution override
224
  multisample: MSAA_QUALITY | null  // Multisampling quality
225
  enabled: boolean                   // Filter enabled state
226
  autoFit: boolean                   // Auto-fit filter bounds
227
  legacy: boolean                    // Legacy coordinate mode
228
  state: State                       // WebGL rendering state
229
  blendMode: BLEND_MODES            // Blending mode
230

231
  // Defaults
232
  static defaultResolution: number | null    // Default filter resolution
233
  static defaultMultisample: MSAA_QUALITY   // Default MSAA quality
234

235
  // Shader Sources
236
  static readonly defaultVertexSrc: string
237
  static readonly defaultFragmentSrc: string
238

239
  // Methods
240
  apply(filterManager: FilterSystem, input: RenderTexture, 
241
        output: RenderTexture, clearMode?: CLEAR_MODES, 
242
        currentState?: FilterState): void
243

244
  constructor(vertexSrc?: string, fragmentSrc?: string, uniforms?: Dict<any>)
245
}
246

247
enum MSAA_QUALITY {
248
  NONE = 0,     // No multisampling
249
  LOW = 2,      // 2x sampling
250
  MEDIUM = 4,   // 4x sampling
251
  HIGH = 8      // 8x sampling
252
}
253

254
enum CLEAR_MODES {
255
  NO = 0,       // Don't clear (BLEND mode)
256
  YES = 1,      // Always clear (CLEAR mode)
257
  AUTO = 2,     // Auto-detect (BLIT mode)
258
  BLEND = 0,    // Blend with existing content
259
  CLEAR = 1,    // Clear before rendering
260
  BLIT = 2      // Clear only when needed
261
}
262
```
263

264
### Built-in Filters { .api }
265

266
```typescript
267
class BlurFilter extends Filter {
268
  blur: number              // Overall blur strength
269
  blurX: number            // Horizontal blur strength
270
  blurY: number            // Vertical blur strength
271
  quality: number          // Number of blur passes
272
  repeatEdgePixels: boolean // Clamp edge pixels
273

274
  constructor(strength?: number, quality?: number, 
275
              resolution?: number, kernelSize?: number)
276
}
277

278
class ColorMatrixFilter extends Filter {
279
  matrix: ColorMatrix      // 5x4 color transformation matrix
280
  alpha: number           // Filter opacity
281

282
  // Color Adjustment Methods
283
  brightness(b: number, multiply?: boolean): void
284
  contrast(amount: number, multiply?: boolean): void
285
  saturate(amount?: number, multiply?: boolean): void
286
  desaturate(): void
287
  hue(rotation: number, multiply?: boolean): void
288
  tint(color: number, multiply?: boolean): void
289

290
  // Preset Effects
291
  greyscale(scale: number, multiply?: boolean): void
292
  blackAndWhite(multiply?: boolean): void
293
  sepia(multiply?: boolean): void
294
  negative(multiply?: boolean): void
295
  
296
  // Creative Effects
297
  technicolor(multiply?: boolean): void
298
  polaroid(multiply?: boolean): void
299
  kodachrome(multiply?: boolean): void
300
  browni(multiply?: boolean): void
301
  vintage(multiply?: boolean): void
302
  
303
  // Advanced Effects
304
  colorTone(desaturation: number, toned: number, 
305
            lightColor: number, darkColor: number, multiply?: boolean): void
306
  night(intensity: number, multiply?: boolean): void
307
  predator(amount: number, multiply?: boolean): void
308
  lsd(multiply?: boolean): void
309
  
310
  reset(): void
311
}
312

313
type ColorMatrix = [
314
  number, number, number, number, number,  // Red channel
315
  number, number, number, number, number,  // Green channel
316
  number, number, number, number, number,  // Blue channel
317
  number, number, number, number, number   // Alpha channel
318
]
319

320
class DisplacementFilter extends Filter {
321
  sprite: Sprite           // Displacement map sprite
322
  scale: IPointData       // Displacement scale
323

324
  constructor(sprite: Sprite, scale?: number)
325
}
326

327
class AlphaFilter extends Filter {
328
  alpha: number           // Alpha multiplier
329
  
330
  constructor(alpha?: number)
331
}
332

333
class NoiseFilter extends Filter {
334
  noise: number           // Noise intensity
335
  seed: number            // Random seed
336
  
337
  constructor(noise?: number, seed?: number)
338
}
339

340
class FXAAFilter extends Filter {
341
  // Fast Approximate Anti-Aliasing
342
  constructor()
343
}
344
```
345

346
## Rendering State Management
347

348
### State Class { .api }
349

350
```typescript
351
class State {
352
  // Blending
353
  blend: boolean           // Enable blending
354
  blendMode: BLEND_MODES  // Blend equation
355

356
  // Depth Testing
357
  depthTest: boolean      // Enable depth testing
358
  depthMask: boolean      // Enable depth buffer writes
359

360
  // Face Culling
361
  culling: boolean               // Enable face culling
362
  clockwiseFrontFace: boolean    // Clockwise winding for front faces
363

364
  // Polygon Offset
365
  offsets: boolean        // Enable polygon offset
366
  polygonOffset: number   // Offset value
367

368
  // Factory
369
  static for2d(): State   // Create 2D-optimized state
370
}
371

372
enum BLEND_MODES {
373
  NORMAL = 0,        // Standard blending
374
  ADD = 1,           // Additive blending
375
  MULTIPLY = 2,      // Multiplicative blending
376
  SCREEN = 3,        // Screen blending
377
  OVERLAY = 4,       // Overlay blending (Canvas only)
378
  DARKEN = 5,        // Darken blending (Canvas only)
379
  LIGHTEN = 6,       // Lighten blending (Canvas only)
380
  COLOR_DODGE = 7,   // Color dodge (Canvas only)
381
  COLOR_BURN = 8,    // Color burn (Canvas only)
382
  HARD_LIGHT = 9,    // Hard light (Canvas only)
383
  SOFT_LIGHT = 10,   // Soft light (Canvas only)
384
  DIFFERENCE = 11,   // Difference (Canvas only)
385
  EXCLUSION = 12,    // Exclusion (Canvas only)
386
  HUE = 13,          // Hue blend (Canvas only)
387
  SATURATION = 14,   // Saturation blend (Canvas only)
388
  COLOR = 15,        // Color blend (Canvas only)
389
  LUMINOSITY = 16,   // Luminosity blend (Canvas only)
390
  NORMAL_NPM = 17,   // Non-premultiplied normal
391
  ADD_NPM = 18,      // Non-premultiplied additive
392
  SCREEN_NPM = 19,   // Non-premultiplied screen
393
  NONE = 20,         // No blending
394
  
395
  // Composite Operations
396
  SRC_OVER = 0,      // Source over destination
397
  SRC_IN = 21,       // Source inside destination
398
  SRC_OUT = 22,      // Source outside destination
399
  SRC_ATOP = 23,     // Source atop destination
400
  DST_OVER = 24,     // Destination over source
401
  DST_IN = 25,       // Destination inside source
402
  DST_OUT = 26,      // Destination outside source
403
  DST_ATOP = 27,     // Destination atop source
404
  ERASE = 26,        // Erase mode
405
  SUBTRACT = 28,     // Subtract mode
406
  XOR = 29           // Exclusive or
407
}
408
```
409

410
## Usage Examples
411

412
### Vector Graphics Drawing
413

414
```typescript
415
// Create complex vector graphics
416
const graphics = new Graphics()
417

418
// Set line style with advanced options
419
graphics.lineStyle({
420
  width: 4,
421
  color: 0x3498db,
422
  alpha: 0.8,
423
  alignment: 0.5,  // Center alignment
424
  cap: LINE_CAP.ROUND,
425
  join: LINE_JOIN.ROUND,
426
  native: false    // Use triangulated rendering
427
})
428

429
// Set textured fill
430
graphics.beginTextureFill({
431
  texture: patternTexture,
432
  color: 0xffffff,
433
  alpha: 0.7,
434
  matrix: new Matrix().scale(0.5, 0.5)
435
})
436

437
// Draw complex shape with curves
438
graphics.moveTo(50, 50)
439
graphics.bezierCurveTo(100, 25, 150, 75, 200, 50)
440
graphics.quadraticCurveTo(225, 100, 200, 150)
441
graphics.arcTo(150, 175, 100, 175, 25)
442
graphics.closePath()
443

444
// Add holes
445
graphics.beginHole()
446
graphics.drawCircle(125, 100, 20)
447
graphics.endHole()
448

449
graphics.endFill()
450

451
// Configure advanced properties
452
graphics.blendMode = BLEND_MODES.MULTIPLY
453
graphics.tint = 0xff6b6b
454

455
// Access geometry for optimization
456
if (graphics.isFastRect()) {
457
  // Optimized scissor rendering available
458
}
459

460
// Performance curves configuration
461
Graphics.curves.adaptive = true
462
Graphics.curves.maxLength = 10
463
Graphics.curves.minSegments = 8
464
Graphics.curves.maxSegments = 2048
465
```
466

467
### Custom Mesh Rendering
468

469
```typescript
470
// Create custom geometry
471
const geometry = new Geometry()
472

473
// Define vertices (x, y coordinates)
474
const vertices = new Float32Array([
475
  -50, -50,   // Bottom left
476
   50, -50,   // Bottom right
477
   50,  50,   // Top right
478
  -50,  50    // Top left
479
])
480

481
// Define UV coordinates
482
const uvs = new Float32Array([
483
  0, 1,  // Bottom left
484
  1, 1,  // Bottom right  
485
  1, 0,  // Top right
486
  0, 0   // Top left
487
])
488

489
// Define triangle indices
490
const indices = new Uint16Array([
491
  0, 1, 2,  // First triangle
492
  0, 2, 3   // Second triangle
493
])
494

495
// Add attributes to geometry
496
geometry.addAttribute('aVertexPosition', vertices, 2)
497
geometry.addAttribute('aTextureCoord', uvs, 2)
498
geometry.addIndex(indices)
499

500
// Create custom shader material
501
const material = new MeshMaterial(texture, {
502
  program: Program.from(vertexShader, fragmentShader),
503
  uniforms: {
504
    uTime: 0,
505
    uAmplitude: 1.0,
506
    uFrequency: 2.0
507
  }
508
})
509

510
// Create mesh
511
const mesh = new Mesh(geometry, material)
512
mesh.blendMode = BLEND_MODES.ADD
513
mesh.tint = 0xff9999
514

515
// Custom draw mode for wireframe
516
const wireframeMesh = new Mesh(geometry, material)
517
wireframeMesh.drawMode = DRAW_MODES.LINE_STRIP
518

519
// Instance rendering for multiple objects
520
geometry.instanced = true
521
geometry.instanceCount = 100
522

523
// Update uniforms for animation
524
app.ticker.add((delta) => {
525
  material.uniforms.uTime += delta * 0.1
526
})
527
```
528

529
### Advanced Filter Effects
530

531
```typescript
532
// Multi-pass blur with custom settings
533
const blurFilter = new BlurFilter(15, 4, 1, 9)
534
blurFilter.repeatEdgePixels = true
535
blurFilter.blendMode = BLEND_MODES.SCREEN
536

537
// Color matrix transformations
538
const colorFilter = new ColorMatrixFilter()
539
colorFilter.contrast(1.2, false)
540
colorFilter.brightness(1.1, true)    // Multiply with existing
541
colorFilter.saturate(1.3, true)
542
colorFilter.hue(30, true)           // Rotate hue 30 degrees
543

544
// Custom color matrix for vintage effect
545
colorFilter.matrix = [
546
  0.6279, 0.3202, -0.0397, 0, 9.651,
547
  0.0258, 0.6441, 0.0326, 0, 7.463,
548
  0.0466, -0.0851, 0.5242, 0, 5.159,
549
  0, 0, 0, 1, 0
550
]
551

552
// Displacement mapping for distortion
553
const displacementFilter = new DisplacementFilter(displacementSprite, 50)
554

555
// Noise effect
556
const noiseFilter = new NoiseFilter(0.1, Math.random())
557

558
// Custom filter with shader
559
class GlitchFilter extends Filter {
560
  constructor() {
561
    super(null, `
562
      precision mediump float;
563
      varying vec2 vTextureCoord;
564
      uniform sampler2D uSampler;
565
      uniform float uTime;
566
      uniform float uIntensity;
567
      
568
      void main() {
569
        vec2 coord = vTextureCoord;
570
        
571
        // RGB shift effect
572
        float shift = sin(uTime * 10.0) * uIntensity * 0.01;
573
        vec4 color;
574
        color.r = texture2D(uSampler, coord + vec2(shift, 0.0)).r;
575
        color.g = texture2D(uSampler, coord).g;
576
        color.b = texture2D(uSampler, coord - vec2(shift, 0.0)).b;
577
        color.a = texture2D(uSampler, coord).a;
578
        
579
        // Scanline effect
580
        float scanline = sin(coord.y * 800.0) * 0.1 * uIntensity;
581
        color.rgb += scanline;
582
        
583
        gl_FragColor = color;
584
      }
585
    `, {
586
      uTime: 0,
587
      uIntensity: 1.0
588
    })
589
  }
590
}
591

592
const glitchFilter = new GlitchFilter()
593

594
// Apply multiple filters
595
container.filters = [
596
  blurFilter,
597
  colorFilter,
598
  displacementFilter,
599
  glitchFilter
600
]
601

602
// Animate filter parameters
603
app.ticker.add((delta) => {
604
  glitchFilter.uniforms.uTime += delta * 0.1
605
  colorFilter.uniforms.uAlpha = Math.sin(Date.now() * 0.001) * 0.5 + 0.5
606
})
607
```
608

609
### Performance Optimization
610

611
```typescript
612
// Graphics optimization
613
class OptimizedGraphics extends Graphics {
614
  private isDirty = true
615
  
616
  updateGraphics() {
617
    if (!this.isDirty) return
618
    
619
    this.clear()
620
    
621
    // Batch similar operations
622
    this.beginFill(0xff0000)
623
    for (const rect of this.rects) {
624
      this.drawRect(rect.x, rect.y, rect.width, rect.height)
625
    }
626
    this.endFill()
627
    
628
    // Use fast rect when possible
629
    if (this.canUseFastRect()) {
630
      // Enable scissor optimization
631
      this.cacheAsBitmap = false
632
    }
633
    
634
    this.isDirty = false
635
  }
636
  
637
  private canUseFastRect(): boolean {
638
    return this.isFastRect() && this.blendMode === BLEND_MODES.NORMAL
639
  }
640
}
641

642
// Mesh batching for multiple instances
643
class InstancedMesh extends Mesh {
644
  private instanceData: Float32Array
645
  private instanceBuffer: Buffer
646
  
647
  constructor(baseGeometry: Geometry, material: Shader, instanceCount: number) {
648
    const geometry = baseGeometry.clone()
649
    super(geometry, material)
650
    
651
    // Setup instancing
652
    geometry.instanced = true
653
    geometry.instanceCount = instanceCount
654
    
655
    // Instance data: position + rotation + scale
656
    this.instanceData = new Float32Array(instanceCount * 4)
657
    this.instanceBuffer = Buffer.from(this.instanceData)
658
    
659
    geometry.addAttribute('aInstanceTransform', this.instanceBuffer, 4, false, TYPES.FLOAT, 0, 0)
660
    geometry.attributes.aInstanceTransform.instance = true
661
  }
662
  
663
  updateInstance(index: number, x: number, y: number, rotation: number, scale: number) {
664
    const offset = index * 4
665
    this.instanceData[offset] = x
666
    this.instanceData[offset + 1] = y
667
    this.instanceData[offset + 2] = rotation
668
    this.instanceData[offset + 3] = scale
669
    
670
    this.instanceBuffer.update()
671
  }
672
}
673

674
// Filter performance optimization
675
class CachedFilter extends Filter {
676
  private cachedTexture: RenderTexture
677
  private lastUpdateFrame = -1
678
  
679
  apply(filterManager: FilterSystem, input: RenderTexture, 
680
        output: RenderTexture, clearMode?: CLEAR_MODES) {
681
    
682
    const currentFrame = filterManager.renderer.frameCount
683
    
684
    // Cache filter result for multiple uses per frame
685
    if (this.lastUpdateFrame !== currentFrame) {
686
      if (!this.cachedTexture) {
687
        this.cachedTexture = RenderTexture.create({
688
          width: input.width,
689
          height: input.height
690
        })
691
      }
692
      
693
      super.apply(filterManager, input, this.cachedTexture, CLEAR_MODES.CLEAR)
694
      this.lastUpdateFrame = currentFrame
695
    }
696
    
697
    // Copy cached result
698
    filterManager.renderer.render(this.cachedTexture, output, clearMode === CLEAR_MODES.CLEAR)
699
  }
700
}
701

702
// Geometry optimization
703
function optimizeGeometry(geometry: Geometry): Geometry {
704
  // Interleave vertex data for better cache performance
705
  geometry.interleave()
706
  
707
  // Use appropriate buffer types
708
  for (const buffer of geometry.buffers) {
709
    if (buffer.data.length < 65536) {
710
      // Use 16-bit indices for smaller geometry
711
      if (geometry.indexBuffer && geometry.indexBuffer.data instanceof Uint32Array) {
712
        const indices16 = new Uint16Array(geometry.indexBuffer.data)
713
        geometry.indexBuffer.update(indices16)
714
      }
715
    }
716
  }
717
  
718
  return geometry
719
}
720
```
721

722
### Blend Mode Examples
723

724
```typescript
725
// Additive blending for glowing effects
726
glowSprite.blendMode = BLEND_MODES.ADD
727

728
// Multiply blending for shadows
729
shadowGraphics.blendMode = BLEND_MODES.MULTIPLY
730

731
// Screen blending for highlights
732
highlightFilter.blendMode = BLEND_MODES.SCREEN
733

734
// Custom composite operations
735
maskSprite.blendMode = BLEND_MODES.DST_IN    // Use as mask
736
eraseGraphics.blendMode = BLEND_MODES.ERASE  // Erase pixels
737

738
// Premultiplied alpha handling
739
sprite.blendMode = BLEND_MODES.NORMAL_NPM    // Non-premultiplied normal
740
additiveSprite.blendMode = BLEND_MODES.ADD_NPM
741

742
// XOR blending for special effects
743
xorGraphics.blendMode = BLEND_MODES.XOR
744
```
745

746
The graphics and rendering system in PixiJS provides comprehensive tools for creating sophisticated visual effects, from simple vector graphics to complex GPU-accelerated rendering pipelines. The modular design allows for efficient batching, custom shaders, and advanced post-processing effects while maintaining high performance across different devices and rendering contexts.