Gets whether the frame buffer has an alpha channel.
The alpha flag.
Sets whether the frame buffer has an alpha channel, which is what lets the page show through wherever the scene has not drawn. Read only when the application boots.
The alpha flag.
Gets whether the frame buffer is anti-aliased.
The antialias flag.
Sets whether the frame buffer is anti-aliased. Read only when the application boots.
The antialias flag.
The PlayCanvas application instance. null until the element is ready, and again once it
has been removed from the document — await whenReady or the element's ready()
promise before accessing it.
The application instance, or null.
Gets the graphics backend.
The graphics backend.
Sets the graphics backend. Defaults to 'webgpu', which falls back to 'webgl2' if WebGPU is not supported by the browser. Read only when the application boots.
The graphics backend ('webgpu', 'webgl2', or 'null').
The nearest ancestor <pc-app> element, or null if this element has no <pc-app>
ancestor. The search starts at the parent, so an element never resolves to itself.
The closest app element, or null.
The nearest ancestor element that fronts an entity — <pc-entity>, <pc-model> or
<pc-node> — or null if this element has no such ancestor. The search starts at the
parent, so an element never resolves to itself.
The closest entity-fronting element, or null.
Gets whether the frame buffer has a depth buffer.
The depth buffer flag.
Sets whether the frame buffer has a depth buffer, which the renderer needs to resolve which surface is nearest the camera. Read only when the application boots.
The depth buffer flag.
Gets whether the application shows its built-in loading bar while it boots and preloads its assets.
The loading bar flag.
Sets whether the application shows its built-in loading bar while it boots and preloads its
assets. Enabled by default; setting false removes the bar immediately, while setting
true has no effect until the element is next connected. The bar can be themed with the
CSS custom properties --pc-loading-bar-color, --pc-loading-bar-background and
--pc-loading-bar-height.
The loading bar flag.
The asset preload progress of the application, as a fraction from 0 to 1. It is 0 until
preloading begins (and again once the element has been removed from the document), and 1
once preloading has finished — including when there was nothing to preload. Read this to
initialize a loading UI; subsequent updates arrive via the progress event.
The preload progress.
Gets the cap on the pixel ratio the application renders at.
The maximum pixel ratio.
Sets the cap on the pixel ratio the application renders at. The canvas is sized by the
smaller of this value and the display's own device pixel ratio, so the default of Infinity
renders at full physical resolution, 1 renders at CSS resolution, and an intermediate
value such as 2 keeps a dense display sharp without paying for every one of its pixels.
Must be greater than 0. Unlike the other graphics options, this applies immediately.
The maximum pixel ratio.
Gets whether the frame buffer has a stencil buffer.
The stencil buffer flag.
Sets whether the frame buffer has a stencil buffer, which stencil-based effects and UI masking need. Read only when the application boots.
The stencil buffer flag.
Protected_Called when the element is fully initialized and ready. Subclasses should call this when
they're ready. Resolves the ready promise and dispatches a bubbling, composed ready
event. Signals at most once per readiness cycle: a repeat call before _resetReady
has re-armed the promise does nothing.
Protected_Returns the ready promise to its pending state. Subclasses should call this when the
resource their readiness announced is torn down (typically from disconnectedCallback),
so that a later re-initialization can signal readiness again. Does nothing while the
promise is still pending — an in-flight waiter carries over to the next readiness cycle
rather than being stranded on a promise nothing will ever resolve.
Returns the <pc-entity>, <pc-model> or <pc-node> element whose backing entity is
entity, or null if the entity is not fronted by an element of this application - for
example, an unbound node inside a model's instantiated hierarchy, or an entity created
through the engine API.
The entity to look up.
The element fronting the entity, or null.
Returns a promise that resolves with this element when it's ready. This is the low-level primitive underlying whenReady, which is the recommended way to wait for elements.
Readiness tracks the element's current lifecycle: once a ready element is torn down (for example by removing it from the document), this returns a fresh promise that resolves when the element is next ready. A promise obtained earlier stays resolved — call this again after re-inserting an element rather than reusing a promise from before its removal.
A promise that resolves with this element when it's ready.
The AppElement interface provides properties and methods for manipulating
<pc-app>elements. The AppElement interface also inherits the properties and methods of the HTMLElement interface.The element is sized like a replaced element such as
<video>: a block-level box that the page's CSS controls, 300x150 by default. The application's canvas always fills the element, and the drawing buffer resolution follows the element's size (capped bymax-pixel-ratio), tracked live via a ResizeObserver — so the element can be embedded at any size, resized by its container, or made fullscreen with ordinary CSS such aswidth: 100vw; height: 100dvh.Fires
progress - Fired while the application preloads its assets.
loadedandtotalare asset counts, not bytes, and an asset that fails to load still counts as loaded. Fired at least once per boot, and the final event always hasloadedequal tototal. Does not bubble.Fires
error - Fired when the application cannot boot because no graphics device could be created (for example, a browser with WebGL disabled).
messagenames the requested backends anderrorholds the underlying failure. The element never becomes ready andappstaysnull— listen for this event to show a fallback UI. Removing the element and re-inserting it retries the boot with its current attributes. Does not bubble.