0
# Renderers
1

2
Rendering system providing WebGL-based graphics output with comprehensive material support, post-processing capabilities, and performance optimizations. The renderer converts 3D scenes into 2D pixels for display.
3

4
## Capabilities
5

6
### WebGL Renderer
7

8
Primary renderer using WebGL 2.0 for hardware-accelerated graphics rendering with extensive configuration options.
9

10
```typescript { .api }
11
import { 
12
  WebGLRenderer, 
13
  Scene, 
14
  Camera, 
15
  Color, 
16
  Vector2, 
17
  Vector4,
18
  WebGLRenderTarget,
19
  Material
20
} from 'three';
21

22
interface WebGLRendererParameters {
23
  /** Canvas element or null for auto-creation */
24
  canvas?: HTMLCanvasElement;
25
  
26
  /** WebGL context or null for auto-creation */
27
  context?: WebGLRenderingContext | WebGL2RenderingContext;
28
  
29
  /** Enable depth buffer */
30
  depth?: boolean;
31
  
32
  /** Enable stencil buffer */
33
  stencil?: boolean;
34
  
35
  /** Enable alpha channel */
36
  alpha?: boolean;
37
  
38
  /** Enable antialiasing */
39
  antialias?: boolean;
40
  
41
  /** Premultiply alpha */
42
  premultipliedAlpha?: boolean;
43
  
44
  /** Preserve drawing buffer */
45
  preserveDrawingBuffer?: boolean;
46
  
47
  /** Power preference: 'default' | 'high-performance' | 'low-power' */
48
  powerPreference?: 'default' | 'high-performance' | 'low-power';
49
  
50
  /** Fail if major performance caveat */
51
  failIfMajorPerformanceCaveat?: boolean;
52
  
53
  /** Use reversed depth buffer */
54
  reversedDepthBuffer?: boolean;
55
}
56

57
/**
58
 * WebGL-based renderer with comprehensive 3D graphics capabilities
59
 */
60
class WebGLRenderer {
61
  /** Type flag for WebGL renderer detection */
62
  readonly isWebGLRenderer: true;
63
  
64
  /** DOM element for rendering */
65
  domElement: HTMLCanvasElement;
66
  
67
  /** WebGL rendering context */
68
  readonly context: WebGLRenderingContext | WebGL2RenderingContext;
69
  
70
  /** Auto-clear flags */
71
  autoClear: boolean;
72
  autoClearColor: boolean;
73
  autoClearDepth: boolean;
74
  autoClearStencil: boolean;
75
  
76
  /** Sorting objects flag */
77
  sortObjects: boolean;
78
  
79
  /** Clipping planes */
80
  clippingPlanes: Plane[];
81
  localClippingEnabled: boolean;
82
  
83
  /** Output color space */
84
  outputColorSpace: string;
85
  
86
  /** Use legacy lights mode */
87
  useLegacyLights: boolean;
88
  
89
  /** Tone mapping settings */
90
  toneMapping: number;
91
  toneMappingExposure: number;
92
  
93
  /** Shadow map settings */
94
  shadowMap: {
95
    enabled: boolean;
96
    autoUpdate: boolean;
97
    needsUpdate: boolean;
98
    type: number;
99
  };
100
  
101
  /** Physical correct lights */
102
  physicallyCorrectLights: boolean;
103
  
104
  /** WebXR manager */
105
  xr: WebXRManager;
106
  
107
  /** Renderer capabilities */
108
  capabilities: WebGLCapabilities;
109
  
110
  /** Extensions manager */
111
  extensions: WebGLExtensions;
112
  
113
  /** Renderer properties */
114
  properties: WebGLProperties;
115
  
116
  /** Render state */
117
  state: WebGLState;
118
  
119
  /** Render info */
120
  info: {
121
    autoReset: boolean;
122
    memory: { geometries: number; textures: number };
123
    render: { calls: number; triangles: number; points: number; lines: number; frame: number };
124
    programs: number;
125
  };
126
  
127
  /**
128
   * Create WebGL renderer
129
   * @param parameters - Configuration options
130
   */
131
  constructor(parameters?: WebGLRendererParameters);
132
  
133
  /**
134
   * Get WebGL context
135
   * @returns WebGL context
136
   */
137
  getContext(): WebGLRenderingContext | WebGL2RenderingContext;
138
  
139
  /**
140
   * Get context attributes
141
   * @returns Context attributes object
142
   */
143
  getContextAttributes(): WebGLContextAttributes;
144
  
145
  /**
146
   * Force context loss (for testing)
147
   */
148
  forceContextLoss(): void;
149
  
150
  /**
151
   * Force context restore (for testing)
152
   */
153
  forceContextRestore(): void;
154
  
155
  /**
156
   * Get pixel ratio
157
   * @returns Current pixel ratio
158
   */
159
  getPixelRatio(): number;
160
  
161
  /**
162
   * Set pixel ratio
163
   * @param value - Pixel ratio value
164
   */
165
  setPixelRatio(value: number): void;
166
  
167
  /**
168
   * Get renderer size
169
   * @param target - Target vector to store size
170
   * @returns Size vector
171
   */
172
  getSize(target: Vector2): Vector2;
173
  
174
  /**
175
   * Set renderer size
176
   * @param width - Render width in pixels
177
   * @param height - Render height in pixels
178
   * @param updateStyle - Update canvas style (default: true)
179
   */
180
  setSize(width: number, height: number, updateStyle?: boolean): void;
181
  
182
  /**
183
   * Get drawing buffer size
184
   * @param target - Target vector to store size
185
   * @returns Drawing buffer size
186
   */
187
  getDrawingBufferSize(target: Vector2): Vector2;
188
  
189
  /**
190
   * Set drawing buffer size
191
   * @param width - Buffer width
192
   * @param height - Buffer height
193
   * @param pixelRatio - Pixel ratio
194
   */
195
  setDrawingBufferSize(width: number, height: number, pixelRatio: number): void;
196
  
197
  /**
198
   * Get current viewport
199
   * @param target - Target vector to store viewport
200
   * @returns Viewport vector (x, y, width, height)
201
   */
202
  getCurrentViewport(target: Vector4): Vector4;
203
  
204
  /**
205
   * Get viewport
206
   * @param target - Target vector to store viewport
207
   * @returns Viewport vector
208
   */
209
  getViewport(target: Vector4): Vector4;
210
  
211
  /**
212
   * Set viewport
213
   * @param x - X offset
214
   * @param y - Y offset  
215
   * @param width - Viewport width
216
   * @param height - Viewport height
217
   */
218
  setViewport(x: number, y: number, width: number, height: number): void;
219
  setViewport(viewport: Vector4): void;
220
  
221
  /**
222
   * Get scissor region
223
   * @param target - Target vector to store scissor
224
   * @returns Scissor vector
225
   */
226
  getScissor(target: Vector4): Vector4;
227
  
228
  /**
229
   * Set scissor test region
230
   * @param x - X offset
231
   * @param y - Y offset
232
   * @param width - Scissor width
233
   * @param height - Scissor height
234
   */
235
  setScissor(x: number, y: number, width: number, height: number): void;
236
  setScissor(scissor: Vector4): void;
237
  
238
  /**
239
   * Get scissor test enabled state
240
   * @returns True if scissor test enabled
241
   */
242
  getScissorTest(): boolean;
243
  
244
  /**
245
   * Enable/disable scissor test
246
   * @param boolean - Enable scissor test
247
   */
248
  setScissorTest(boolean: boolean): void;
249
  
250
  /**
251
   * Set opaque sort function
252
   * @param method - Sort comparison function
253
   */
254
  setOpaqueSort(method: (a: any, b: any) => number): void;
255
  
256
  /**
257
   * Set transparent sort function
258
   * @param method - Sort comparison function
259
   */
260
  setTransparentSort(method: (a: any, b: any) => number): void;
261
  
262
  /**
263
   * Get clear color
264
   * @param target - Target color object
265
   * @returns Clear color
266
   */
267
  getClearColor(target: Color): Color;
268
  
269
  /**
270
   * Set clear color
271
   * @param color - Clear color
272
   * @param alpha - Clear alpha (optional)
273
   */
274
  setClearColor(color: Color | string | number, alpha?: number): void;
275
  
276
  /**
277
   * Get clear alpha
278
   * @returns Clear alpha value
279
   */
280
  getClearAlpha(): number;
281
  
282
  /**
283
   * Set clear alpha
284
   * @param alpha - Clear alpha value (0-1)
285
   */
286
  setClearAlpha(alpha: number): void;
287
  
288
  /**
289
   * Clear buffers
290
   * @param color - Clear color buffer
291
   * @param depth - Clear depth buffer
292
   * @param stencil - Clear stencil buffer
293
   */
294
  clear(color?: boolean, depth?: boolean, stencil?: boolean): void;
295
  
296
  /**
297
   * Clear color buffer
298
   */
299
  clearColor(): void;
300
  
301
  /**
302
   * Clear depth buffer
303
   */
304
  clearDepth(): void;
305
  
306
  /**
307
   * Clear stencil buffer
308
   */
309
  clearStencil(): void;
310
  
311
  /**
312
   * Dispose renderer resources
313
   */
314
  dispose(): void;
315
  
316
  /**
317
   * Render scene with camera
318
   * @param scene - Scene to render
319
   * @param camera - Camera for rendering
320
   */
321
  render(scene: Scene, camera: Camera): void;
322
  
323
  /**
324
   * Get active cube face
325
   * @returns Active cube face index
326
   */
327
  getActiveCubeFace(): number;
328
  
329
  /**
330
   * Get active mipmap level
331
   * @returns Active mipmap level
332
   */
333
  getActiveMipmapLevel(): number;
334
  
335
  /**
336
   * Get render target
337
   * @returns Current render target or null
338
   */
339
  getRenderTarget(): WebGLRenderTarget | null;
340
  
341
  /**
342
   * Set render target
343
   * @param renderTarget - Render target or null for canvas
344
   * @param activeCubeFace - Active cube face (for cube targets)
345
   * @param activeMipmapLevel - Active mipmap level
346
   */
347
  setRenderTarget(
348
    renderTarget: WebGLRenderTarget | null, 
349
    activeCubeFace?: number, 
350
    activeMipmapLevel?: number
351
  ): void;
352
  
353
  /**
354
   * Read pixels from framebuffer
355
   * @param x - X coordinate
356
   * @param y - Y coordinate
357
   * @param width - Read width
358
   * @param height - Read height
359
   * @param buffer - Target buffer
360
   * @param activeCubeFaceIndex - Cube face index (optional)
361
   */
362
  readRenderTargetPixels(
363
    renderTarget: WebGLRenderTarget,
364
    x: number,
365
    y: number,
366
    width: number,
367
    height: number,
368
    buffer: any,
369
    activeCubeFaceIndex?: number
370
  ): void;
371
  
372
  /**
373
   * Copy framebuffer to texture
374
   * @param texture - Target texture
375
   * @param position - Copy position
376
   * @param srcRegion - Source region (optional)
377
   */
378
  copyFramebufferToTexture(texture: Texture, position: Vector2, srcRegion?: Vector4): void;
379
  
380
  /**
381
   * Copy texture to texture
382
   * @param srcTexture - Source texture
383
   * @param dstTexture - Destination texture
384
   * @param srcRegion - Source region (optional)
385
   * @param dstPosition - Destination position (optional)
386
   * @param level - Mipmap level (optional)
387
   */
388
  copyTextureToTexture(
389
    srcTexture: Texture,
390
    dstTexture: Texture,
391
    srcRegion?: Vector4,
392
    dstPosition?: Vector2,
393
    level?: number
394
  ): void;
395
  
396
  /**
397
   * Copy texture to 3D texture
398
   * @param srcTexture - Source texture
399
   * @param dstTexture - Destination 3D texture
400
   * @param srcRegion - Source region (optional)
401
   * @param dstPosition - Destination position (optional)
402
   * @param level - Mipmap level (optional)
403
   */
404
  copyTextureToTexture3D(
405
    srcTexture: Texture,
406
    dstTexture: Texture,
407
    srcRegion?: Vector4,
408
    dstPosition?: Vector3,
409
    level?: number
410
  ): void;
411
  
412
  /**
413
   * Initialize texture
414
   * @param texture - Texture to initialize
415
   */
416
  initTexture(texture: Texture): void;
417
  
418
  /**
419
   * Reset GL state
420
   */
421
  resetState(): void;
422
}
423
```
424

425
**Usage Examples:**
426

427
```typescript
428
import { WebGLRenderer, Scene, PerspectiveCamera, Color } from 'three';
429

430
// Basic renderer setup
431
const renderer = new WebGLRenderer({
432
  antialias: true,
433
  alpha: true
434
});
435
renderer.setSize(window.innerWidth, window.innerHeight);
436
renderer.setPixelRatio(window.devicePixelRatio);
437
document.body.appendChild(renderer.domElement);
438

439
// Rendering configuration
440
renderer.setClearColor(new Color(0x000000), 0);
441
renderer.shadowMap.enabled = true;
442
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
443
renderer.outputColorSpace = THREE.SRGBColorSpace;
444

445
// Tone mapping
446
renderer.toneMapping = THREE.ACESFilmicToneMapping;
447
renderer.toneMappingExposure = 1.0;
448

449
// Render loop
450
function animate() {
451
  renderer.render(scene, camera);
452
  requestAnimationFrame(animate);
453
}
454

455
// Handle resize
456
function onWindowResize() {
457
  camera.aspect = window.innerWidth / window.innerHeight;
458
  camera.updateProjectionMatrix();
459
  renderer.setSize(window.innerWidth, window.innerHeight);
460
}
461
```
462

463
### Render Targets
464

465
Framebuffer objects for off-screen rendering, post-processing, and render-to-texture effects.
466

467
```typescript { .api }
468
import { 
469
  RenderTarget,
470
  WebGLRenderTarget,
471
  WebGL3DRenderTarget,
472
  WebGLArrayRenderTarget,
473
  WebGLCubeRenderTarget,
474
  Texture,
475
  DepthTexture,
476
  EventDispatcher
477
} from 'three';
478

479
interface RenderTargetOptions {
480
  /** Generate mipmaps */
481
  generateMipmaps?: boolean;
482
  
483
  /** Magnification filter */
484
  magFilter?: number;
485
  
486
  /** Minification filter */
487
  minFilter?: number;
488
  
489
  /** Texture format */
490
  format?: number;
491
  
492
  /** Texture type */
493
  type?: number;
494
  
495
  /** Internal format */
496
  internalFormat?: string | null;
497
  
498
  /** S-axis wrapping */
499
  wrapS?: number;
500
  
501
  /** T-axis wrapping */
502
  wrapT?: number;
503
  
504
  /** Anisotropy level */
505
  anisotropy?: number;
506
  
507
  /** Color space */
508
  colorSpace?: string;
509
  
510
  /** Enable depth buffer */
511
  depthBuffer?: boolean;
512
  
513
  /** Enable stencil buffer */
514
  stencilBuffer?: boolean;
515
  
516
  /** Resolve depth buffer */
517
  resolveDepthBuffer?: boolean;
518
  
519
  /** Resolve stencil buffer */
520
  resolveStencilBuffer?: boolean;
521
  
522
  /** Depth texture */
523
  depthTexture?: DepthTexture | null;
524
  
525
  /** MSAA samples */
526
  samples?: number;
527
  
528
  /** Color attachments count */
529
  count?: number;
530
  
531
  /** 3D texture depth */
532
  depth?: number;
533
  
534
  /** Multiview rendering */
535
  multiview?: boolean;
536
}
537

538
/**
539
 * Base render target class for off-screen rendering
540
 */
541
class RenderTarget extends EventDispatcher {
542
  /** Type flag for render target detection */
543
  readonly isRenderTarget: true;
544
  
545
  /** Render target width */
546
  width: number;
547
  
548
  /** Render target height */  
549
  height: number;
550
  
551
  /** Render target depth (for 3D targets) */
552
  depth: number;
553
  
554
  /** Scissor test region */
555
  scissor: Vector4;
556
  
557
  /** Enable scissor test */
558
  scissorTest: boolean;
559
  
560
  /** Viewport region */
561
  viewport: Vector4;
562
  
563
  /** Color attachments */
564
  textures: Texture[];
565
  
566
  /** Depth texture */
567
  depthTexture: DepthTexture | null;
568
  
569
  /** Number of MSAA samples */
570
  samples: number;
571
  
572
  /** Multiview flag */
573
  multiview: boolean;
574
  
575
  /**
576
   * Create render target
577
   * @param width - Target width (default: 1)
578
   * @param height - Target height (default: 1)
579
   * @param options - Configuration options
580
   */
581
  constructor(width?: number, height?: number, options?: RenderTargetOptions);
582
  
583
  /**
584
   * Set size of render target
585
   * @param width - New width
586
   * @param height - New height
587
   * @param depth - New depth (for 3D targets)
588
   * @returns This render target for chaining
589
   */
590
  setSize(width: number, height: number, depth?: number): this;
591
  
592
  /**
593
   * Clone render target
594
   * @returns Cloned render target
595
   */
596
  clone(): this;
597
  
598
  /**
599
   * Copy properties from another render target
600
   * @param source - Source render target
601
   * @returns This render target for chaining
602
   */
603
  copy(source: RenderTarget): this;
604
  
605
  /**
606
   * Dispose render target resources
607
   */
608
  dispose(): void;
609
}
610

611
/**
612
 * WebGL render target for 2D off-screen rendering
613
 */
614
class WebGLRenderTarget extends RenderTarget {
615
  /** Type flag for WebGL render target detection */
616
  readonly isWebGLRenderTarget: true;
617
  
618
  /**
619
   * Create WebGL render target
620
   * @param width - Target width (default: 1)
621
   * @param height - Target height (default: 1)
622
   * @param options - Configuration options
623
   */
624
  constructor(width?: number, height?: number, options?: RenderTargetOptions);
625
}
626

627
/**
628
 * WebGL 3D render target for volume rendering
629
 */
630
class WebGL3DRenderTarget extends WebGLRenderTarget {
631
  /** Type flag for WebGL 3D render target detection */
632
  readonly isWebGL3DRenderTarget: true;
633
  
634
  /**
635
   * Create WebGL 3D render target
636
   * @param width - Target width (default: 1)
637
   * @param height - Target height (default: 1)
638
   * @param depth - Target depth (default: 1)
639
   * @param options - Configuration options
640
   */
641
  constructor(width?: number, height?: number, depth?: number, options?: RenderTargetOptions);
642
}
643

644
/**
645
 * WebGL array render target for layered rendering
646
 */
647
class WebGLArrayRenderTarget extends WebGLRenderTarget {
648
  /** Type flag for WebGL array render target detection */
649
  readonly isWebGLArrayRenderTarget: true;
650
  
651
  /**
652
   * Create WebGL array render target
653
   * @param width - Target width (default: 1)
654
   * @param height - Target height (default: 1)
655
   * @param depth - Array layers (default: 1)
656
   * @param options - Configuration options
657
   */
658
  constructor(width?: number, height?: number, depth?: number, options?: RenderTargetOptions);
659
}
660

661
/**
662
 * WebGL cube render target for environment mapping
663
 */
664
class WebGLCubeRenderTarget extends WebGLRenderTarget {
665
  /** Type flag for WebGL cube render target detection */
666
  readonly isWebGLCubeRenderTarget: true;
667
  
668
  /**
669
   * Create WebGL cube render target
670
   * @param size - Cube face size (default: 1)
671
   * @param options - Configuration options
672
   */
673
  constructor(size?: number, options?: RenderTargetOptions);
674
  
675
  /**
676
   * Convert to cube texture from equirectangular
677
   * @param renderer - WebGL renderer
678
   * @param texture - Source equirectangular texture
679
   * @returns Converted cube texture
680
   */
681
  fromEquirectangularTexture(renderer: WebGLRenderer, texture: Texture): this;
682
  
683
  /**
684
   * Clear render target
685
   * @param renderer - WebGL renderer
686
   * @param color - Clear color
687
   * @param depth - Clear depth
688
   * @param stencil - Clear stencil
689
   */
690
  clear(renderer: WebGLRenderer, color?: boolean, depth?: boolean, stencil?: boolean): void;
691
}
692
```
693

694
**Usage Examples:**
695

696
```typescript
697
import { 
698
  WebGLRenderer, 
699
  WebGLRenderTarget, 
700
  WebGLCubeRenderTarget,
701
  Scene, 
702
  Camera,
703
  RGBAFormat,
704
  FloatType,
705
  LinearFilter
706
} from 'three';
707

708
// Basic render target for post-processing
709
const renderTarget = new WebGLRenderTarget(512, 512, {
710
  format: RGBAFormat,
711
  type: FloatType,
712
  minFilter: LinearFilter,
713
  magFilter: LinearFilter,
714
  generateMipmaps: false
715
});
716

717
// Render to texture
718
renderer.setRenderTarget(renderTarget);
719
renderer.render(scene, camera);
720
renderer.setRenderTarget(null); // Back to canvas
721

722
// Use rendered texture
723
const renderedTexture = renderTarget.texture;
724
material.map = renderedTexture;
725

726
// Cube render target for environment mapping
727
const cubeRenderTarget = new WebGLCubeRenderTarget(256);
728
const cubeCamera = new CubeCamera(1, 1000, cubeRenderTarget);
729

730
// Update cube map
731
cubeCamera.position.copy(reflectiveObject.position);
732
cubeCamera.update(renderer, scene);
733

734
// Use environment map
735
material.envMap = cubeRenderTarget.texture;
736

737
// Multi-target rendering (WebGL2)
738
const colorTarget = new WebGLRenderTarget(512, 512);
739
const depthTarget = new WebGLRenderTarget(512, 512, {
740
  format: DepthFormat,
741
  type: UnsignedIntType
742
});
743

744
// HDR render target
745
const hdrTarget = new WebGLRenderTarget(1024, 1024, {
746
  type: FloatType,
747
  format: RGBAFormat,
748
  generateMipmaps: false
749
});
750
```
751

752
### WebGL Utilities and Extensions
753

754
Supporting classes for WebGL functionality and extension management.
755

756
```typescript { .api }
757
import { 
758
  WebGLCapabilities,
759
  WebGLExtensions, 
760
  WebGLProperties,
761
  WebGLState,
762
  WebGLInfo
763
} from 'three';
764

765
/**
766
 * WebGL capabilities detection and limits
767
 */
768
class WebGLCapabilities {
769
  /** WebGL version (1 or 2) */
770
  readonly isWebGL2: boolean;
771
  
772
  /** Precision settings */
773
  precision: string;
774
  
775
  /** Maximum texture size */
776
  maxTextures: number;
777
  maxVertexTextures: number;
778
  maxTextureSize: number;
779
  maxCubemapSize: number;
780
  maxAttributes: number;
781
  maxVertexUniforms: number;
782
  maxVaryings: number;
783
  maxFragmentUniforms: number;
784
  
785
  /** Feature support */
786
  vertexTextures: boolean;
787
  floatFragmentTextures: boolean;
788
  floatVertexTextures: boolean;
789
  maxSamples: number;
790
  
791
  /**
792
   * Get maximum precision
793
   * @param precision - Requested precision
794
   * @returns Supported precision
795
   */
796
  getMaxPrecision(precision: string): string;
797
}
798

799
/**
800
 * WebGL extensions manager
801
 */
802
class WebGLExtensions {
803
  /**
804
   * Get WebGL extension
805
   * @param name - Extension name
806
   * @returns Extension object or null
807
   */
808
  get(name: string): any;
809
  
810
  /**
811
   * Check if extension exists
812
   * @param name - Extension name
813
   * @returns True if extension available
814
   */
815
  has(name: string): boolean;
816
}
817

818
/**
819
 * WebGL state management
820
 */
821
class WebGLState {
822
  /** Current GL state */
823
  buffers: {
824
    color: WebGLColorBuffer;
825
    depth: WebGLDepthBuffer;
826
    stencil: WebGLStencilBuffer;
827
  };
828
  
829
  /**
830
   * Enable GL capability
831
   * @param id - GL constant
832
   */
833
  enable(id: number): void;
834
  
835
  /**
836
   * Disable GL capability
837
   * @param id - GL constant
838
   */
839
  disable(id: number): void;
840
  
841
  /**
842
   * Set blend function
843
   * @param src - Source factor
844
   * @param dst - Destination factor
845
   * @param srcAlpha - Source alpha factor
846
   * @param dstAlpha - Destination alpha factor
847
   */
848
  setBlending(
849
    blending: number,
850
    blendEquation?: number,
851
    blendSrc?: number,
852
    blendDst?: number,
853
    blendEquationAlpha?: number,
854
    blendSrcAlpha?: number,
855
    blendDstAlpha?: number,
856
    premultipliedAlpha?: boolean
857
  ): void;
858
  
859
  /**
860
   * Set material properties
861
   * @param material - Material object
862
   * @param frontFaceCW - Front face winding
863
   */
864
  setMaterial(material: Material, frontFaceCW: boolean): void;
865
  
866
  /**
867
   * Set flip sided
868
   * @param flipSided - Flip faces
869
   */
870
  setFlipSided(flipSided: boolean): void;
871
  
872
  /**
873
   * Set cull face
874
   * @param cullFace - Cull face mode
875
   */
876
  setCullFace(cullFace: number): void;
877
  
878
  /**
879
   * Set line width
880
   * @param width - Line width
881
   */
882
  setLineWidth(width: number): void;
883
  
884
  /**
885
   * Set polygon offset
886
   * @param polygonOffset - Enable offset
887
   * @param factor - Offset factor
888
   * @param units - Offset units
889
   */
890
  setPolygonOffset(polygonOffset: boolean, factor?: number, units?: number): void;
891
  
892
  /**
893
   * Reset WebGL state
894
   */
895
  reset(): void;
896
}
897

898
/**
899
 * Renderer performance info
900
 */
901
class WebGLInfo {
902
  /** Auto reset per frame */
903
  autoReset: boolean;
904
  
905
  /** Memory usage */
906
  memory: {
907
    geometries: number;
908
    textures: number;
909
  };
910
  
911
  /** Render statistics */
912
  render: {
913
    frame: number;
914
    calls: number;
915
    triangles: number;
916
    points: number;
917
    lines: number;
918
  };
919
  
920
  /** Program count */
921
  programs: WebGLProgram[] | null;
922
  
923
  /**
924
   * Update render statistics
925
   * @param count - Triangle/point/line count
926
   * @param mode - Drawing mode
927
   * @param instanceCount - Instance count
928
   */
929
  update(count: number, mode: number, instanceCount: number): void;
930
  
931
  /**
932
   * Reset statistics
933
   */
934
  reset(): void;
935
}
936
```
937

938
**Usage Examples:**
939

940
```typescript
941
// Check WebGL capabilities
942
const capabilities = renderer.capabilities;
943
console.log('WebGL2:', capabilities.isWebGL2);
944
console.log('Max texture size:', capabilities.maxTextureSize);
945
console.log('Float textures:', capabilities.floatFragmentTextures);
946

947
// Check extensions
948
const extensions = renderer.extensions;
949
const vaoExt = extensions.get('OES_vertex_array_object');
950
const anisotropy = extensions.get('EXT_texture_filter_anisotropic');
951

952
// Monitor performance
953
const info = renderer.info;
954
console.log('Draw calls:', info.render.calls);
955
console.log('Triangles:', info.render.triangles);
956
console.log('Geometries in memory:', info.memory.geometries);
957

958
// Manual state management
959
const state = renderer.state;
960
state.setBlending(NoBlending);
961
state.setCullFace(CullFaceBack);
962
state.setLineWidth(2);
963
```
964

965
### Post-processing Support
966

967
```typescript { .api }
968
import { PMREMGenerator, WebGLRenderer, Texture, CubeTexture } from 'three';
969

970
/**
971
 * Pre-filtered environment map generator for IBL
972
 */
973
class PMREMGenerator {
974
  /**
975
   * Create PMREM generator
976
   * @param renderer - WebGL renderer
977
   */
978
  constructor(renderer: WebGLRenderer);
979
  
980
  /**
981
   * Generate PMREM from cube texture
982
   * @param cubeTexture - Source cube texture
983
   * @param samples - Sample count (optional)
984
   * @returns Generated render target
985
   */
986
  fromCubemap(cubeTexture: CubeTexture, samples?: number): WebGLRenderTarget;
987
  
988
  /**
989
   * Generate PMREM from equirectangular texture
990
   * @param equirectangular - Source equirectangular texture
991
   * @param samples - Sample count (optional)
992
   * @returns Generated render target
993
   */
994
  fromEquirectangular(equirectangular: Texture, samples?: number): WebGLRenderTarget;
995
  
996
  /**
997
   * Generate PMREM from scene
998
   * @param scene - Source scene
999
   * @param sigma - Roughness value
1000
   * @param near - Camera near plane
1001
   * @param far - Camera far plane
1002
   * @returns Generated render target
1003
   */
1004
  fromScene(scene: Scene, sigma?: number, near?: number, far?: number): WebGLRenderTarget;
1005
  
1006
  /**
1007
   * Compile equirectangular shader
1008
   * @returns Compiled shader
1009
   */
1010
  compileCubemapShader(): void;
1011
  
1012
  /**
1013
   * Compile equirectangular shader
1014
   * @returns Compiled shader
1015
   */
1016
  compileEquirectangularShader(): void;
1017
  
1018
  /**
1019
   * Dispose generator resources
1020
   */
1021
  dispose(): void;
1022
}
1023
```
1024

1025
**Usage Examples:**
1026

1027
```typescript
1028
// Environment map processing
1029
const pmremGenerator = new PMREMGenerator(renderer);
1030
pmremGenerator.compileEquirectangularShader();
1031

1032
// From equirectangular texture
1033
const envMap = textureLoader.load('environment.hdr');
1034
const envMapRT = pmremGenerator.fromEquirectangular(envMap);
1035
scene.environment = envMapRT.texture;
1036

1037
// From cube texture
1038
const cubeTexture = cubeLoader.load([...]);
1039
const cubeRT = pmremGenerator.fromCubemap(cubeTexture);
1040
scene.environment = cubeRT.texture;
1041

1042
// Cleanup
1043
pmremGenerator.dispose();
1044
```
1045

1046
The rendering system provides comprehensive WebGL-based graphics output with extensive configuration options, off-screen rendering capabilities, and performance monitoring tools. The WebGL renderer serves as the primary interface for converting 3D scenes into rendered images with full material and lighting support.