0
# State Management
1

2
WebGL state tracking and optimization to minimize state changes and improve performance. The state system manages blend modes, depth testing, culling, and other WebGL state parameters.
3

4
## Capabilities
5

6
### State
7

8
Core state class that manages WebGL rendering state and optimizes state changes.
9

10
```typescript { .api }
11
/**
12
 * State manages WebGL rendering state for optimization
13
 * Tracks and minimizes redundant WebGL state changes
14
 */
15
class State {
16
  /** Packed state data as bit flags */
17
  data: number;
18
  /** Current blend mode */
19
  blendMode: BLEND_MODES;
20
  /** Polygon offset value */
21
  polygonOffset: number;
22
  /** Whether state is for 2D rendering */
23
  _blendEq: boolean;
24
  /** Blend equation for RGB */
25
  _blendSrc: number;
26
  /** Blend equation for alpha */
27
  _blendDst: number;
28
  /** Depth test function */
29
  _depthTest: boolean;
30

31
  /**
32
   * Create a new State
33
   */
34
  constructor();
35

36
  /** Clone the current state */
37
  clone(): State;
38

39
  /** Reset state to default values */
40
  reset(): void;
41

42
  /**
43
   * Set blend mode and update blend equations
44
   * @param value - Blend mode to set
45
   */
46
  setBlendMode(value: BLEND_MODES): void;
47

48
  /**
49
   * Set depth test state
50
   * @param value - Enable depth testing
51
   */
52
  setDepthTest(value: boolean): void;
53

54
  /**
55
   * Set face culling mode
56
   * @param value - Enable face culling
57
   */
58
  setCullFace(value: boolean): void;
59

60
  /**
61
   * Set depth mask (depth buffer writing)
62
   * @param value - Enable depth writing
63
   */
64
  setDepthMask(value: boolean): void;
65

66
  /**
67
   * Set front face winding order
68
   * @param value - Front face winding (CW or CCW)
69
   */
70
  setFrontFace(value: boolean): void;
71

72
  /**
73
   * Set which faces to cull
74
   * @param value - Cull back faces
75
   */
76
  setCullMode(value: boolean): void;
77

78
  /**
79
   * Create state optimized for 2D rendering
80
   */
81
  static for2d(): State;
82
}
83
```
84

85
**Usage Examples:**
86

87
```typescript
88
import { State, BLEND_MODES } from "@pixi/core";
89

90
// Create default state
91
const defaultState = new State();
92

93
// Create 2D optimized state
94
const state2d = State.for2d();
95

96
// Custom state configuration
97
const customState = new State();
98
customState.blendMode = BLEND_MODES.ADD;
99
customState.setDepthTest(false);
100
customState.setCullFace(false);
101

102
// Apply state to renderer
103
renderer.state.setState(customState);
104

105
// Clone state for modifications
106
const modifiedState = defaultState.clone();
107
modifiedState.blendMode = BLEND_MODES.MULTIPLY;
108

109
// State management in rendering
110
function renderWithState(sprite, blendMode) {
111
  const currentState = State.for2d();
112
  currentState.blendMode = blendMode;
113
  
114
  renderer.state.setState(currentState);
115
  renderer.render(sprite);
116
}
117

118
// Batch state changes
119
const batchState = new State();
120
batchState.setBlendMode(BLEND_MODES.SCREEN);
121
batchState.setDepthTest(true);
122
batchState.setCullFace(true);
123
renderer.state.setState(batchState);
124
```
125

126
## Types
127

128
```typescript { .api }
129
enum BLEND_MODES {
130
  NORMAL = 0,
131
  ADD = 1,
132
  MULTIPLY = 2,
133
  SCREEN = 3,
134
  OVERLAY = 4,
135
  DARKEN = 5,
136
  LIGHTEN = 6,
137
  COLOR_DODGE = 7,
138
  COLOR_BURN = 8,
139
  HARD_LIGHT = 9,
140
  SOFT_LIGHT = 10,
141
  DIFFERENCE = 11,
142
  EXCLUSION = 12,
143
  HUE = 13,
144
  SATURATION = 14,
145
  COLOR = 15,
146
  LUMINOSITY = 16,
147
  NORMAL_NPM = 17,
148
  ADD_NPM = 18,
149
  SCREEN_NPM = 19,
150
  NONE = 20,
151
  SRC_OVER = 0,
152
  SRC_IN = 21,
153
  SRC_OUT = 22,
154
  SRC_ATOP = 23,
155
  DST_OVER = 24,
156
  DST_IN = 25,
157
  DST_OUT = 26,
158
  DST_ATOP = 27,
159
  ERASE = 26,
160
  SUBTRACT = 28,
161
  XOR = 29
162
}
163
```