# WebglGraphicsDevice Class · extends [`GraphicsDevice`](https://api.playcanvas.com/engine/classes/GraphicsDevice.md) · category: Graphics Source: https://github.com/playcanvas/engine/blob/f059dc005842f76e052cdf44d8370c8c7ec475ac/src/platform/graphics/webgl/webgl-graphics-device.js#L144 WebglGraphicsDevice extends the base [GraphicsDevice](https://api.playcanvas.com/engine/classes/GraphicsDevice.md) to provide rendering capabilities utilizing the WebGL 2.0 specification. ## Constructors ### constructor ```ts new WebglGraphicsDevice(canvas: HTMLCanvasElement, options?: object) ``` Creates a new WebglGraphicsDevice instance. **Parameters** - `canvas` (`HTMLCanvasElement`): The canvas to which the graphics device will render. - `options` (`object`, optional, default `{}`): Options passed when creating the WebGL context. - `options.alpha` (`boolean`, optional): Boolean that indicates if the canvas contains an alpha buffer. Defaults to true. - `options.antialias` (`boolean`, optional): Boolean that indicates whether or not to perform anti-aliasing if possible. Defaults to true. - `options.depth` (`boolean`, optional): Boolean that indicates that the drawing buffer is requested to have a depth buffer of at least 16 bits. Defaults to true. - `options.desynchronized` (`boolean`, optional): Boolean that hints the user agent to reduce the latency by desynchronizing the canvas paint cycle from the event loop. Defaults to false. - `options.failIfMajorPerformanceCaveat` (`boolean`, optional): Boolean that indicates if a context will be created if the system performance is low or if no hardware GPU is available. Defaults to false. - `options.gl` (`WebGL2RenderingContext`, optional): The rendering context to use. If not specified, a new context will be created. - `options.powerPreference` (`"default" | "high-performance" | "low-power"`, optional): A hint to the user agent indicating what configuration of GPU is suitable for the WebGL context. Possible values are: - 'default': Let the user agent decide which GPU configuration is most suitable. This is the default value. - 'high-performance': Prioritizes rendering performance over power consumption. - 'low-power': Prioritizes power saving over rendering performance. Defaults to 'default'. - `options.premultipliedAlpha` (`boolean`, optional): Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha. Defaults to true. - `options.preserveDrawingBuffer` (`boolean`, optional): If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author. Defaults to false. - `options.stencil` (`boolean`, optional): Boolean that indicates that the drawing buffer is requested to have a stencil buffer of at least 8 bits. Defaults to true. - `options.xrCompatible` (`boolean`, optional): Boolean that hints to the user agent to use a compatible graphics adapter for an immersive XR device. ## Properties ### transformFeedbackBuffers ```ts transformFeedbackBuffers: VertexBuffer[] | null | undefined ``` ## Accessors ### fullscreen ```ts get fullscreen(): boolean set fullscreen(fullscreen: boolean) ``` Gets whether the device is currently in fullscreen mode. ## Methods ### clear ```ts clear(options?: object): void ``` Clears the frame buffer of the currently set render target. **Parameters** - `options` (`object`, optional): Optional options object that controls the behavior of the clear operation defined as follows: - `options.color` (`number[]`, optional): The color to clear the color buffer to in the range 0 to 1 for each component. - `options.depth` (`number`, optional): The depth value to clear the depth buffer to in the range 0 to 1. Defaults to 1. - `options.flags` (`number`, optional): The buffers to clear (the types being color, depth and stencil). Can be any bitwise combination of: - [CLEARFLAG_COLOR](https://api.playcanvas.com/engine/variables/CLEARFLAG_COLOR.md) - [CLEARFLAG_DEPTH](https://api.playcanvas.com/engine/variables/CLEARFLAG_DEPTH.md) - [CLEARFLAG_STENCIL](https://api.playcanvas.com/engine/variables/CLEARFLAG_STENCIL.md) - `options.stencil` (`number`, optional): The stencil value to clear the stencil buffer to. Defaults to 0. **Example** ```ts // Clear color buffer to black and depth buffer to 1 device.clear(); // Clear just the color buffer to red device.clear({ color: [1, 0, 0, 1], flags: CLEARFLAG_COLOR }); // Clear color buffer to yellow and depth to 1.0 device.clear({ color: [1, 1, 0, 1], depth: 1, flags: CLEARFLAG_COLOR | CLEARFLAG_DEPTH }); ``` ### copyRenderTarget ```ts copyRenderTarget(source?: RenderTarget, dest?: RenderTarget, color?: boolean, depth?: boolean): boolean ``` Copies source render target into destination render target. Mostly used by post-effects. **Parameters** - `source` ([`RenderTarget`](https://api.playcanvas.com/engine/classes/RenderTarget.md), optional): The source render target. Defaults to frame buffer. - `dest` ([`RenderTarget`](https://api.playcanvas.com/engine/classes/RenderTarget.md), optional): The destination render target. Defaults to frame buffer. - `color` (`boolean`, optional): If true, will copy the color buffer. Defaults to false. - `depth` (`boolean`, optional): If true, will copy the depth buffer. Defaults to false. **Returns** `boolean`: True if the copy was successful, false otherwise. ### destroy ```ts destroy(): void ``` Destroy the graphics device. ### postInit ```ts postInit(): void ``` Function that executes after the device has been created. ### setBindGroup ```ts setBindGroup(index: number, bindGroup: BindGroup, offsets?: Uint32Array): void ``` **Parameters** - `index` (`number`): Index of the bind group slot - `bindGroup` (`BindGroup`): Bind group to attach - `offsets` (`Uint32Array`, optional): Byte offsets for all uniform buffers in the bind group. Unused on WebGL: every uniform buffer is bound as a whole buffer from offset zero (see below). ### setBlendState ```ts setBlendState(blendState: any): void ``` Sets the specified blend state. **Parameters** - `blendState` (`any`): New blend state. ### setCullMode ```ts setCullMode(cullMode: any): void ``` Controls how triangles are culled based on their face direction. The default cull mode is [CULLFACE_BACK](https://api.playcanvas.com/engine/variables/CULLFACE_BACK.md). **Parameters** - `cullMode` (`any`): The cull mode to set. Can be: - [CULLFACE_NONE](https://api.playcanvas.com/engine/variables/CULLFACE_NONE.md) - [CULLFACE_BACK](https://api.playcanvas.com/engine/variables/CULLFACE_BACK.md) - [CULLFACE_FRONT](https://api.playcanvas.com/engine/variables/CULLFACE_FRONT.md) ### setDepthState ```ts setDepthState(depthState: any): void ``` Sets the specified depth state. **Parameters** - `depthState` (`any`): New depth state. ### setFrontFace ```ts setFrontFace(frontFace: any): void ``` Controls whether polygons are front- or back-facing by setting a winding orientation. The default frontFace is [FRONTFACE_CCW](https://api.playcanvas.com/engine/variables/FRONTFACE_CCW.md). **Parameters** - `frontFace` (`any`): The front face to set. Can be: - [FRONTFACE_CW](https://api.playcanvas.com/engine/variables/FRONTFACE_CW.md) - [FRONTFACE_CCW](https://api.playcanvas.com/engine/variables/FRONTFACE_CCW.md) ### setScissor ```ts setScissor(x: number, y: number, w: number, h: number): void ``` Set the active scissor rectangle on the specified device. **Parameters** - `x` (`number`): The pixel space x-coordinate of the bottom left corner of the scissor rectangle. - `y` (`number`): The pixel space y-coordinate of the bottom left corner of the scissor rectangle. - `w` (`number`): The width of the scissor rectangle in pixels. - `h` (`number`): The height of the scissor rectangle in pixels. ### setShader ```ts setShader(shader: Shader, asyncCompile?: boolean): void ``` Sets the active shader to be used during subsequent draw calls. **Parameters** - `shader` ([`Shader`](https://api.playcanvas.com/engine/classes/Shader.md)): The shader to assign to the device. - `asyncCompile` (`boolean`, optional, default `false`): If true, rendering will be skipped until the shader is compiled, otherwise the rendering will wait for the shader compilation to finish. Defaults to false. ### setStencilState ```ts setStencilState(stencilFront: any, stencilBack: any): void ``` Sets the specified stencil state. If both stencilFront and stencilBack are null, stencil operation is disabled. **Parameters** - `stencilFront` (`any`): The front stencil parameters. Defaults to [StencilParameters.DEFAULT](https://api.playcanvas.com/engine/classes/StencilParameters.md#default) if not specified. - `stencilBack` (`any`): The back stencil parameters. Defaults to [StencilParameters.DEFAULT](https://api.playcanvas.com/engine/classes/StencilParameters.md#default) if not specified. ### setViewport ```ts setViewport(x: number, y: number, w: number, h: number): void ``` Set the active rectangle for rendering on the specified device. **Parameters** - `x` (`number`): The pixel space x-coordinate of the bottom left corner of the viewport. - `y` (`number`): The pixel space y-coordinate of the bottom left corner of the viewport. - `w` (`number`): The width of the viewport in pixels. - `h` (`number`): The height of the viewport in pixels. ## Inherited from [GraphicsDevice](https://api.playcanvas.com/engine/classes/GraphicsDevice.md) - `readonly canvas: HTMLCanvasElement` - `gpuProfiler: GpuProfiler` - `insideRenderPass: boolean = false` - `isHdr: boolean = false` - `readonly isNull: boolean = false` - `readonly isWebGPU: boolean = false` - `readonly maxAnisotropy: number` - `readonly maxColorAttachments: number = 1` - `readonly maxCubeMapSize: number` - `maxIndirectDispatchCount: number = 256` - `maxIndirectDrawCount: number = 1024` - `readonly maxSamples: number = 1` - `readonly maxSubgroupSize: number = 0` - `readonly maxTextureSize: number` - `readonly maxVolumeSize: number` - `readonly minSubgroupSize: number = 0` - `readonly precision: string` - `readonly samples: number` - `readonly scope: ScopeSpace` - `supportsClipDistances: boolean = false` - `readonly supportsCompute: boolean = false` - `readonly supportsDualSourceBlending: boolean = false` - `readonly supportsHtmlTextures: boolean = false` - `readonly supportsIndependentBlending: boolean = false` - `readonly supportsIndirectDraw: boolean = false` - `readonly supportsLinearIndexing: boolean = false` - `supportsMultiDraw: boolean = true` - `readonly supportsPacked4x8IntegerDotProduct: boolean = false` - `readonly supportsPointerCompositeAccess: boolean = false` - `readonly supportsPrimitiveIndex: boolean = false` - `readonly supportsShaderF16: boolean = false` - `readonly supportsStorageTextureRead: boolean = false` - `readonly supportsSubgroupId: boolean = false` - `readonly supportsSubgroups: boolean = false` - `readonly supportsSubgroupSizeControl: boolean = false` - `readonly supportsSubgroupUniformity: boolean = false` - `readonly supportsTextureAndSamplerLet: boolean = false` - `readonly supportsTextureFormatsTier1: boolean = false` - `readonly supportsTextureFormatsTier2: boolean = false` - `readonly supportsTransientAttachments: boolean = false` - `readonly supportsUnrestrictedPointerParameters: boolean = false` - `readonly textureFloatBlendable: boolean = false` - `readonly textureFloatFilterable: boolean = false` - `readonly textureFloatRenderable: boolean` - `readonly textureHalfFloatRenderable: boolean` - `readonly textureRG11B10Renderable: boolean = false` - `get deviceType(): "webgl2" | "webgpu"` - `get height(): number` - `get indirectDispatchBuffer(): StorageBuffer | null` - `get indirectDrawBuffer(): StorageBuffer | null` - `get maxPixelRatio(): number` · `set maxPixelRatio(ratio: number)` - `get width(): number` - `computeDispatch(computes: Compute[], name?: string): void` - `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler` - `getIndirectDispatchSlot(count?: number): number` - `getIndirectDrawSlot(count?: number): number` - `getRenderableHdrFormat(formats?: number[], filterable?: boolean, samples?: number, blendable?: boolean): number | undefined` - `getRenderTarget(): RenderTarget` - `hasEvent(name: string): boolean` - `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler` - `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle` - `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle` - `setDrawStates(blendState?: BlendState, depthState?: DepthState, cullMode?: number, frontFace?: number, stencilFront?: StencilParameters, stencilBack?: StencilParameters): void` - `setRenderTarget(renderTarget: RenderTarget | null): void` - `protected validateAttributes(shader: Shader, vertexBuffers: (VertexBuffer | null | undefined)[]): void`