Creates a new WebglGraphicsDevice instance.
The canvas to which the graphics device will render.
Optional options: { Options passed when creating the WebGL context.
Boolean that indicates if the canvas contains an alpha buffer. Defaults to true.
Boolean that indicates whether or not to perform anti-aliasing if possible. Defaults to true.
Boolean that indicates that the drawing buffer is requested to have a depth buffer of at least 16 bits. Defaults to true.
Boolean that hints the user agent to reduce the latency by desynchronizing the canvas paint cycle from the event loop. Defaults to false.
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.
The rendering context to use. If not specified, a new context will be created.
A hint to the user agent indicating what configuration of GPU is suitable for the WebGL context. Possible values are:
Defaults to 'default'.
Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha. Defaults to true.
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.
Boolean that indicates that the drawing buffer is requested to have a stencil buffer of at least 8 bits. Defaults to true.
Boolean that hints to the user agent to use a compatible graphics adapter for an immersive XR device.
Readonly canvasThe canvas DOM element that provides the underlying WebGL context used by the graphics device.
The GPU profiler.
Readonly isTrue if the deviceType is WebGPU
Readonly maxThe maximum supported texture anisotropy setting.
Readonly maxThe maximum supported number of color buffers attached to a render target.
Readonly maxThe maximum supported dimension of a cube map.
Readonly maxThe maximum supported dimension of a texture.
Readonly maxThe maximum supported dimension of a 3D texture (any axis).
Readonly precisionThe highest shader precision supported by this graphics device. Can be 'hiphp', 'mediump' or 'lowp'.
Readonly samplesThe number of hardware anti-aliasing samples used by the frame buffer.
Readonly scopeThe scope namespace for shader attributes and variables.
Readonly supportsTrue if the device supports compute shaders.
Readonly supportsTrue if Multiple Render Targets feature is supported. This refers to the ability to render to multiple color textures with a single draw call.
Readonly supportsTrue if the device can read from StorageTexture in the compute shader. By default, the
storage texture can be only used with the write operation.
When a shader uses this feature, it's recommended to use a requires directive to signal the
potential for non-portability at the top of the WGSL shader code:
requires readonly_and_readwrite_storage_textures;
Readonly supportsTrue if the device supports volume textures.
Readonly textureTrue if filtering can be applied when sampling float textures.
Readonly textureTrue if filtering can be applied when sampling 16-bit float textures.
The type of the device. Can be pc.DEVICETYPE_WEBGL2 or pc.DEVICETYPE_WEBGPU.
Fullscreen mode.
Height of the back buffer in pixels.
Maximum pixel ratio.
Check if high precision floating-point textures are supported.
Width of the back buffer in pixels.
Clears the frame buffer of the currently set render target.
Optional options: { Optional options object that controls the behavior of the clear operation defined as follows:
The color to clear the color buffer to in the range 0 to 1 for each component.
The depth value to clear the depth buffer to in the range 0 to 1. Defaults to 1.
The buffers to clear (the types being color, depth and stencil). Can be any bitwise combination of:
The stencil value to clear the stencil buffer to. Defaults to 0.
// 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: pc.CLEARFLAG_COLOR
});
// Clear color buffer to yellow and depth to 1.0
device.clear({
color: [1, 1, 0, 1],
depth: 1,
flags: pc.CLEARFLAG_COLOR | pc.CLEARFLAG_DEPTH
});
Dispatch multiple compute shaders inside a single compute shader pass.
An array of compute shaders to dispatch.
Copies source render target into destination render target. Mostly used by post-effects.
Optional source: RenderTargetThe source render target. Defaults to frame buffer.
Optional dest: RenderTargetThe destination render target. Defaults to frame buffer.
Optional color: booleanIf true will copy the color buffer. Defaults to false.
Optional depth: booleanIf true will copy the depth buffer. Defaults to false.
True if the copy was successful, false otherwise.
Submits a graphical primitive to the hardware for immediate rendering.
Primitive object describing how to submit current vertex/index buffers.
The offset of the first index or vertex to dispatch in the draw call.
The number of indices or vertices to dispatch in the draw call.
True to interpret the primitive as indexed, thereby using the currently set index buffer and false otherwise.
The type of primitive to render. Can be:
Optional numInstances: numberThe number of instances to render when using ANGLE_instanced_arrays. Defaults to 1.
Optional keepBuffers: booleanOptionally keep the current set of vertex / index buffers / VAO. This is used when rendering of multiple views, for example under WebXR.
// Render a single, unindexed triangle
device.draw({
type: pc.PRIMITIVE_TRIANGLES,
base: 0,
count: 3,
indexed: false
});
Fire an event, all additional arguments are passed on to the event listener.
Name of event to fire.
Optional arg1: anyFirst argument that is passed to the event handler.
Optional arg2: anySecond argument that is passed to the event handler.
Optional arg3: anyThird argument that is passed to the event handler.
Optional arg4: anyFourth argument that is passed to the event handler.
Optional arg5: anyFifth argument that is passed to the event handler.
Optional arg6: anySixth argument that is passed to the event handler.
Optional arg7: anySeventh argument that is passed to the event handler.
Optional arg8: anyEighth argument that is passed to the event handler.
Self for chaining.
obj.fire('test', 'This is the message');
Queries the currently set render target on the device.
The current render target.
// Get the current render target
const renderTarget = device.getRenderTarget();
Get a renderable HDR pixel format supported by the graphics device.
Optional formats: number[] = ...An array of pixel formats to check for support. Can contain:
Optional filterable: boolean = trueIf true, the format also needs to be filterable. Defaults to true.
The first supported renderable HDR format or undefined if none is supported.
Test if there are any handlers bound to an event name.
The name of the event to test.
True if the object has handlers bound to the specified event name.
obj.on('test', function () { }); // bind an event to 'test'
obj.hasEvent('test'); // returns true
obj.hasEvent('hello'); // returns false
Detach an event handler from an event. If callback is not provided then all callbacks are unbound from the event, if scope is not provided then all events with the callback will be unbound.
Optional name: stringName of the event to unbind.
Optional callback: HandleEventCallbackFunction to be unbound.
Optional scope: objectScope that was used as the this when the event is fired.
Self for chaining.
const handler = function () {
};
obj.on('test', handler);
obj.off(); // Removes all events
obj.off('test'); // Removes all events called 'test'
obj.off('test', handler); // Removes all handler functions, called 'test'
obj.off('test', handler, this); // Removes all handler functions, called 'test' with scope this
Attach an event handler to an event.
Name of the event to bind the callback to.
Function that is called when event is fired. Note the callback is limited to 8 arguments.
Optional scope: object = ...Object to use as 'this' when the event is fired, defaults to current this.
Can be used for removing event in the future.
obj.on('test', function (a, b) {
console.log(a + b);
});
obj.fire('test', 1, 2); // prints 3 to the console
const evt = obj.on('test', function (a, b) {
console.log(a + b);
});
// some time later
evt.off();
Attach an event handler to an event. This handler will be removed after being fired once.
Name of the event to bind the callback to.
Function that is called when event is fired. Note the callback is limited to 8 arguments.
Optional scope: object = ...Object to use as 'this' when the event is fired, defaults to current this.
obj.once('test', function (a, b) {
console.log(a + b);
});
obj.fire('test', 1, 2); // prints 3 to the console
obj.fire('test', 1, 2); // not going to get handled
Sets the current index buffer on the graphics device. On subsequent calls to GraphicsDevice#draw, the specified index buffer will be used to provide index data for any indexed primitives.
The index buffer to assign to the device.
Sets the specified render target on the device. If null is passed as a parameter, the back buffer becomes the current target for all rendering operations.
The render target to activate.
// Set a render target to receive all rendering output
device.setRenderTarget(renderTarget);
// Set the back buffer to receive all rendering output
device.setRenderTarget(null);
Set the active scissor rectangle on the specified device.
The pixel space x-coordinate of the bottom left corner of the scissor rectangle.
The pixel space y-coordinate of the bottom left corner of the scissor rectangle.
The width of the scissor rectangle in pixels.
The height of the scissor rectangle in pixels.
Sets the active shader to be used during subsequent draw calls.
The shader to assign to the device.
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.
Sets the current vertex buffer on the graphics device. On subsequent calls to GraphicsDevice#draw, the specified vertex buffer(s) will be used to provide vertex data for any primitives.
The vertex buffer to assign to the device.
Set the active rectangle for rendering on the specified device.
The pixel space x-coordinate of the bottom left corner of the viewport.
The pixel space y-coordinate of the bottom left corner of the viewport.
The width of the viewport in pixels.
The height of the viewport in pixels.
WebglGraphicsDevice extends the base GraphicsDevice to provide rendering capabilities utilizing the WebGL 2.0 specification.