WebglGraphicsDevice(canvas, [options]) 

Creates a new WebglGraphicsDevice instance.

Parameters

canvas	HTMLCanvasElement	The canvas to which the graphics device will render.
options	object	Options passed when creating the WebGL context.
options.alpha	boolean	Boolean that indicates if the canvas contains an alpha buffer.
options.depth	boolean	Boolean that indicates that the drawing buffer is requested to have a depth buffer of at least 16 bits.
options.stencil	boolean	Boolean that indicates that the drawing buffer is requested to have a stencil buffer of at least 8 bits.
options.antialias	boolean	Boolean that indicates whether or not to perform anti-aliasing if possible.
options.premultipliedAlpha	boolean	Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.
options.preserveDrawingBuffer	boolean	If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.
options.powerPreference	'default', 'high-performance', 'low-power'	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.
options.failIfMajorPerformanceCaveat	boolean	Boolean that indicates if a context will be created if the system performance is low or if no hardware GPU is available.
options.preferWebGl2	boolean	Boolean that indicates if a WebGl2 context should be preferred.
options.desynchronized	boolean	Boolean that hints the user agent to reduce the latency by desynchronizing the canvas paint cycle from the event loop.
options.xrCompatible	boolean	Boolean that hints to the user agent to use a compatible graphics adapter for an immersive XR device.
options.gl	WebGLRenderingContext, WebGL2RenderingContext	The rendering context to use. If not specified, a new context will be created.

booleanfullscreen 

Fullscreen mode.

numberheight 

Height of the back buffer in pixels.

booleantextureFloatHighPrecision 

Check if high precision floating-point textures are supported.

booleantextureHalfFloatUpdatable 

Check if texture with half float format can be updated with data.

numberwidth 

Width of the back buffer in pixels.

clear([options]) 

Clears the frame buffer of the currently set render target.

// Clear color buffer to black and depth buffer to 1.0
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
});

Parameters

options	object	Optional options object that controls the behavior of the clear operation defined as follows:
options.color	number[]	The color to clear the color buffer to in the range 0.0 to 1.0 for each component.
options.depth	number	The depth value to clear the depth buffer to in the range 0.0 to 1.0.
options.flags	number	The buffers to clear (the types being color, depth and stencil). Can be any bitwise combination of: CLEARFLAG_COLOR CLEARFLAG_DEPTH CLEARFLAG_STENCIL
options.stencil	number	The stencil value to clear the stencil buffer to. Defaults to 0.

copyRenderTarget([source], [dest], [color], [depth]) 

Copies source render target into destination render target. Mostly used by post-effects.

Parameters

source	RenderTarget	The source render target. Defaults to frame buffer.
dest	RenderTarget	The destination render target. Defaults to frame buffer.
color	boolean	If true will copy the color buffer. Defaults to false.
depth	boolean	If true will copy the depth buffer. Defaults to false.

Returns

boolean

True if the copy was successful, false otherwise.

destroy() 

Destroy the graphics device.

draw(primitive, [numInstances], [keepBuffers]) 

Submits a graphical primitive to the hardware for immediate rendering.

// Render a single, unindexed triangle
device.draw({
    type: pc.PRIMITIVE_TRIANGLES,
    base: 0,
    count: 3,
    indexed: false
});

Parameters

primitive	object	Primitive object describing how to submit current vertex/index buffers.
primitive.type	number	The type of primitive to render. Can be: PRIMITIVE_POINTS PRIMITIVE_LINES PRIMITIVE_LINELOOP PRIMITIVE_LINESTRIP PRIMITIVE_TRIANGLES PRIMITIVE_TRISTRIP PRIMITIVE_TRIFAN
primitive.base	number	The offset of the first index or vertex to dispatch in the draw call.
primitive.count	number	The number of indices or vertices to dispatch in the draw call.
primitive.indexed	boolean	True to interpret the primitive as indexed, thereby using the currently set index buffer and false otherwise.
numInstances	number	The number of instances to render when using ANGLE_instanced_arrays. Defaults to 1.
keepBuffers	boolean	Optionally keep the current set of vertex / index buffers / VAO. This is used when rendering of multiple views, for example under WebXR.

setScissor(x, y, w, h) 

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(shader) 

Sets the active shader to be used during subsequent draw calls.

Parameters

shader

Shader

The shader to set to assign to the device.

Returns

boolean

True if the shader was successfully set, false otherwise.

setViewport(x, y, w, h) 

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.

numberboneLimit 

The maximum number of supported bones using uniform buffers.

[read only]

HTMLCanvasElementcanvas 

The canvas DOM element that provides the underlying WebGL context used by the graphics device.

[read only]

DEVICETYPE_WEBGL1, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGPUdeviceType 

The type of the device. Can be one of pc.DEVICETYPE_WEBGL1, pc.DEVICETYPE_WEBGL2 or pc.DEVICETYPE_WEBGPU.

booleanfullscreen 

Fullscreen mode.

GpuProfilergpuProfiler 

The GPU profiler.

numberheight 

Height of the back buffer in pixels.

booleaninsideRenderPass 

booleanisWebGPU 

True if the deviceType is WebGPU

[read only]

numbermaxAnisotropy 

The maximum supported texture anisotropy setting.

[read only]

numbermaxColorAttachments 

The maximum supported number of color buffers attached to a render target.

[read only]

numbermaxCubeMapSize 

The maximum supported dimension of a cube map.

[read only]

numbermaxPixelRatio 

Maximum pixel ratio.

numbermaxTextureSize 

The maximum supported dimension of a texture.

[read only]

numbermaxVolumeSize 

The maximum supported dimension of a 3D texture (any axis).

[read only]

stringprecision 

The highest shader precision supported by this graphics device. Can be 'hiphp', 'mediump' or 'lowp'.

[read only]

numbersamples 

The number of hardware anti-aliasing samples used by the frame buffer.

[read only]

ScopeSpacescope 

The scope namespace for shader attributes and variables.

[read only]

Shader[]shaders 

booleansupportsInstancing 

True if hardware instancing is supported.

[read only]

booleansupportsMrt 

True if Multiple Render Targets feature is supported. This refers to the ability to render to multiple color textures with a single draw call.

[read only]

booleansupportsVolumeTextures 

True if the device supports volume textures.

[read only]

RenderTarget[]targets 

booleantextureFloatRenderable 

True if 32-bit floating-point textures can be used as a frame buffer.

[read only]

booleantextureHalfFloatRenderable 

True if 16-bit floating-point textures can be used as a frame buffer.

[read only]

Texture[]textures 

numberwidth 

Width of the back buffer in pixels.

fire(name, [arg1], [arg2], [arg3], [arg4], [arg5], [arg6], [arg7], [arg8]) 

Fire an event, all additional arguments are passed on to the event listener.

obj.fire('test', 'This is the message');

Parameters

name	string	Name of event to fire.
arg1	*	First argument that is passed to the event handler.
arg2	*	Second argument that is passed to the event handler.
arg3	*	Third argument that is passed to the event handler.
arg4	*	Fourth argument that is passed to the event handler.
arg5	*	Fifth argument that is passed to the event handler.
arg6	*	Sixth argument that is passed to the event handler.
arg7	*	Seventh argument that is passed to the event handler.
arg8	*	Eighth argument that is passed to the event handler.

Returns

EventHandler

Self for chaining.

getRenderTarget() 

Queries the currently set render target on the device.

// Get the current render target
const renderTarget = device.getRenderTarget();

Returns

RenderTarget

The current render target.

hasEvent(name) 

Test if there are any handlers bound to an event name.

obj.on('test', function () { }); // bind an event to 'test'
obj.hasEvent('test'); // returns true
obj.hasEvent('hello'); // returns false

Parameters

name

string

The name of the event to test.

Returns

boolean

True if the object has handlers bound to the specified event name.

off([name], [callback], [scope]) 

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.

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

Parameters

name	string	Name of the event to unbind.
callback	HandleEventCallback	Function to be unbound.
scope	object	Scope that was used as the this when the event is fired.

Returns

EventHandler

Self for chaining.

on(name, callback, [scope]) 

Attach an event handler to an event.

obj.on('test', function (a, b) {
    console.log(a + b);
});
obj.fire('test', 1, 2); // prints 3 to the console

Parameters

name	string	Name of the event to bind the callback to.
callback	HandleEventCallback	Function that is called when event is fired. Note the callback is limited to 8 arguments.
scope	object	Object to use as 'this' when the event is fired, defaults to current this.

Returns

EventHandler

Self for chaining.

once(name, callback, [scope]) 

Attach an event handler to an event. This handler will be removed after being fired once.

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

Parameters

name	string	Name of the event to bind the callback to.
callback	HandleEventCallback	Function that is called when event is fired. Note the callback is limited to 8 arguments.
scope	object	Object to use as 'this' when the event is fired, defaults to current this.

Returns

EventHandler

Self for chaining.

postInit() 

Function that executes after the device has been created.

setBlendState(blendState) 

Sets the specified blend state.

Parameters

blendState

BlendState

New blend state.

setCullMode(cullMode) 

Controls how triangles are culled based on their face direction. The default cull mode is CULLFACE_BACK.

Parameters

cullMode

number

The cull mode to set. Can be: CULLFACE_NONE CULLFACE_BACK CULLFACE_FRONT

setDepthState(depthState) 

Sets the specified depth state.

Parameters

depthState

DepthState

New depth state.

setIndexBuffer(indexBuffer) 

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.

Parameters

indexBuffer

IndexBuffer

The index buffer to assign to the device.

setRenderTarget(renderTarget) 

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.

// Set a render target to receive all rendering output
device.setRenderTarget(renderTarget);

// Set the back buffer to receive all rendering output
device.setRenderTarget(null);

Parameters

renderTarget

RenderTarget

The render target to activate.

setStencilState([stencilFront], [stencilBack]) 

Sets the specified stencil state. If both stencilFront and stencilBack are null, stencil operation is disabled.

Parameters

stencilFront	StencilParameters	The front stencil parameters. Defaults to StencilParameters.DEFAULT if not specified.
stencilBack	StencilParameters	The back stencil parameters. Defaults to StencilParameters.DEFAULT if not specified.

setVertexBuffer(vertexBuffer) 

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.

Parameters

vertexBuffer

VertexBuffer

The vertex buffer to assign to the device.

resizecanvas 

Fired when the canvas is resized.

Parameters

width	number	The new width of the canvas in pixels.
height	number	The new height of the canvas in pixels.