@playcanvas/web-components 0.10.0 → 0.11.0

package/src/app.ts

@@ -4,6 +4,7 @@ import {
     CameraComponent,
     createGraphicsDevice,
     ElementInput,
+    Entity,
     FILLMODE_FILL_WINDOW,
     GraphNode,
     Keyboard,
@@ -69,15 +70,21 @@ import {
 import { AssetElement } from './asset';
 import { AsyncElement } from './async-element';
 import { EntityElement } from './entity';
+import { LoadingBar } from './loading-bar';
 import { MaterialElement } from './material';
 import { ModuleElement } from './module';
-import { parseBool, parseEnum } from './parse';
+import { parseBool, parseEnum, parseNumber } from './parse';
 
 /**
  * The AppElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-app/ | `<pc-app>`} elements.
  * The AppElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
+ *
+ * @fires {ProgressEvent} progress - Fired while the application preloads its assets. `loaded` and
+ * `total` are 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 has `loaded` equal to `total`. Does
+ * not bubble.
  */
 class AppElement extends AsyncElement {
     /**
@@ -91,14 +98,32 @@ class AppElement extends AsyncElement {
 
     private _antialias = true;
 
-    private _depth = true;
+    private _depthBuffer = true;
 
-    private _stencil = true;
+    private _stencilBuffer = true;
 
-    private _highResolution = true;
+    private _maxPixelRatio = Infinity;
+
+    private _loadingBar = true;
+
+    /**
+     * Set once the graphics options above have been handed to `createGraphicsDevice`, after which
+     * writing any of them changes nothing. Guards the warning in {@link _warnIfBooted}, and is
+     * cleared on disconnect so a re-connected element boots from its current attributes.
+     */
+    private _optionsLocked = false;
+
+    private _bar: LoadingBar | null = null;
 
     private _hierarchyReady = false;
 
+    /**
+     * The elements backing this application's entities, keyed by the entity itself. Registered
+     * by EntityElement at creation and removed when an entity is destroyed, this joins engine
+     * scene nodes back to their owning elements by identity - never by name.
+     */
+    private _entityElements = new Map<GraphNode, EntityElement>();
+
     private _picker: Picker | null = null;
 
     private _hasPointerListeners: { [key: string]: boolean } = {
@@ -111,6 +136,9 @@ class AppElement extends AsyncElement {
 
     private _hoveredEntity: EntityElement | null = null;
 
+    // Identifies the newest in-flight hover pick, so out-of-order results can be discarded
+    private _pickToken = 0;
+
     private _pointerHandlers: { [key: string]: EventListener | null } = {
         pointermove: null,
         pointerdown: null,
@@ -119,13 +147,27 @@ class AppElement extends AsyncElement {
 
     private _app: AppBase | null = null;
 
+    private _loadProgress = 0;
+
     /**
-     * The PlayCanvas application instance. Available once the element is ready — await
-     * {@link whenReady} or the element's `ready()` promise before accessing it.
-     * @returns The application instance.
+     * The PlayCanvas application instance. `null` until the element is ready, and again once it
+     * has been removed from the document — await {@link whenReady} or the element's `ready()`
+     * promise before accessing it.
+     * @returns The application instance, or `null`.
      */
-    get app(): AppBase {
-        return this._app!;
+    get app(): AppBase | null {
+        return this._app;
+    }
+
+    /**
+     * 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.
+     * @returns The preload progress.
+     */
+    get loadProgress(): number {
+        return this._loadProgress;
     }
 
     /**
@@ -141,6 +183,12 @@ class AppElement extends AsyncElement {
     }
 
     async connectedCallback() {
+        // Created before the first await, so the bar is visible while modules and the graphics
+        // device are created, and exists before any disconnect could need to clean it up
+        if (this._loadingBar && !this._bar) {
+            this._bar = new LoadingBar(this);
+        }
+
         // Get all pc-module elements that are direct children of the pc-app element
         const moduleElements = this.querySelectorAll<ModuleElement>(':scope > pc-module');
 
@@ -159,15 +207,21 @@ class AppElement extends AsyncElement {
         };
         const deviceTypes = backendToDeviceTypes[this._backend] || [];
 
+        this._optionsLocked = true;
+
         const device = await createGraphicsDevice(this._canvas, {
             // @ts-ignore - alpha needs to be documented
             alpha: this._alpha,
             antialias: this._antialias,
-            depth: this._depth,
+            depth: this._depthBuffer,
             deviceTypes: deviceTypes,
-            stencil: this._stencil
+            stencil: this._stencilBuffer
         });
-        device.maxPixelRatio = this._highResolution ? window.devicePixelRatio : 1;
+
+        // Assigned rather than resolved to a number here: the engine caps against the live
+        // window.devicePixelRatio on every resize, so an uncapped Infinity keeps following the
+        // display when a window moves between monitors of differing density.
+        device.maxPixelRatio = this._maxPixelRatio;
 
         const createOptions = new AppOptions();
         createOptions.graphicsDevice = device;
@@ -234,11 +288,12 @@ class AppElement extends AsyncElement {
         createOptions.batchManager = BatchManager;
         createOptions.xr = XrManager;
 
-        this._app = new AppBase(this._canvas);
-        this.app.init(createOptions);
+        const app = new AppBase(this._canvas);
+        this._app = app;
+        app.init(createOptions);
 
-        this.app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
-        this.app.setCanvasResolution(RESOLUTION_AUTO);
+        app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+        app.setCanvasResolution(RESOLUTION_AUTO);
 
         this._pickerCreate();
 
@@ -248,7 +303,7 @@ class AppElement extends AsyncElement {
             assetElement.createAsset();
             const asset = assetElement.asset;
             if (asset) {
-                this.app!.assets.add(asset);
+                app.assets.add(asset);
             }
         });
 
@@ -261,20 +316,46 @@ class AppElement extends AsyncElement {
         // Create all entities
         const entityElements = this.querySelectorAll<EntityElement>('pc-entity');
         Array.from(entityElements).forEach((entityElement) => {
-            entityElement.createEntity(this.app!);
+            entityElement.createEntity(app);
         });
 
         // Build hierarchy
         entityElements.forEach((entityElement) => {
-            entityElement.buildHierarchy(this.app!);
+            entityElement.buildHierarchy(app);
         });
 
         this._hierarchyReady = true;
 
+        // Forward the engine's preload lifecycle as DOM ProgressEvents on this element. The
+        // listener must be attached before preload() is called: an asset that is already loaded
+        // ticks synchronously inside it.
+        const total = app.assets.list({ preload: true }).length;
+        let loaded = 0;
+        const onPreloadProgress = () => {
+            loaded += 1;
+            this._loadProgress = loaded / total;
+            this._bar?.progress(loaded, total);
+            this.dispatchEvent(new ProgressEvent('progress', { lengthComputable: true, loaded, total }));
+        };
+        app.on('preload:progress', onPreloadProgress);
+
+        this._loadProgress = total === 0 ? 1 : 0;
+        this._bar?.progress(0, total);
+        this.dispatchEvent(new ProgressEvent('progress', { lengthComputable: true, loaded: 0, total }));
+
         // Load assets before starting the application
-        this.app.preload(() => {
+        app.preload(() => {
+            // Scope the counter to this preload pass, so a later app.preload() call by user code
+            // cannot push `loaded` past `total`
+            app.off('preload:progress', onPreloadProgress);
+            this._loadProgress = 1;
+
             // Start the application
-            this.app!.start();
+            app.start();
+
+            // Dismiss the bar only once a frame has actually rendered; ready fires before the
+            // first rAF tick
+            app.once('frameend', () => this._bar?.complete());
 
             // Handle window resize to keep the canvas responsive
             window.addEventListener('resize', this._onWindowResize);
@@ -284,13 +365,19 @@ class AppElement extends AsyncElement {
     }
 
     disconnectedCallback() {
+        this._optionsLocked = false;
         this._pickerDestroy();
 
-        // Clean up the application
-        if (this.app) {
-            this.app.destroy();
+        // Clean up the application. Destroying it destroys every entity, whose destroy hooks
+        // unregister them - clear() covers any entity the engine no longer reached.
+        if (this._app) {
+            this._app.destroy();
             this._app = null;
         }
+        this._entityElements.clear();
+        this._loadProgress = 0;
+        this._bar?.destroy();
+        this._bar = null;
 
         // Remove event listeners
         window.removeEventListener('resize', this._onWindowResize);
@@ -312,10 +399,18 @@ class AppElement extends AsyncElement {
         const { width, height } = this.app!.graphicsDevice;
         this._picker = new Picker(this.app!, width, height);
 
-        // Create bound handlers but don't attach them yet
-        this._pointerHandlers.pointermove = this._onPointerMove.bind(this) as EventListener;
-        this._pointerHandlers.pointerdown = this._onPointerDown.bind(this) as EventListener;
-        this._pointerHandlers.pointerup = this._onPointerUp.bind(this) as EventListener;
+        // Create bound handlers but don't attach them yet. The handlers pick asynchronously, so
+        // each is wrapped to discard the promise - a listener must not return one, and nothing
+        // awaits the result.
+        const listener = (handler: (event: PointerEvent) => Promise<void>): EventListener => {
+            return (event: Event) => {
+                handler.call(this, event as PointerEvent);
+            };
+        };
+
+        this._pointerHandlers.pointermove = listener(this._onPointerMove);
+        this._pointerHandlers.pointerdown = listener(this._onPointerDown);
+        this._pointerHandlers.pointerup = listener(this._onPointerUp);
 
         // Listen for pointer listeners being added/removed
         ['pointermove', 'pointerdown', 'pointerup', 'pointerenter', 'pointerleave'].forEach((type) => {
@@ -356,6 +451,79 @@ class AppElement extends AsyncElement {
         };
     }
 
+    /**
+     * Registers the element that created an entity. Called by EntityElement when it creates its
+     * entity.
+     *
+     * @param entity - The entity.
+     * @param element - The element that created it.
+     * @ignore
+     */
+    _registerEntityElement(entity: Entity, element: EntityElement) {
+        this._entityElements.set(entity, element);
+    }
+
+    /**
+     * Removes the registration for a destroyed entity. Called by EntityElement.
+     *
+     * @param entity - The entity.
+     * @ignore
+     */
+    _unregisterEntityElement(entity: Entity) {
+        this._entityElements.delete(entity);
+    }
+
+    /**
+     * Returns the `<pc-entity>` element whose backing entity is `entity`, or `null` if the
+     * entity was not created by an element of this application - for example, a node inside a
+     * model's instantiated hierarchy, or an entity created through the engine API.
+     *
+     * @param entity - The entity to look up.
+     * @returns The element backing the entity, or `null`.
+     */
+    elementFromEntity(entity: Entity): EntityElement | null {
+        return this._entityElements.get(entity) ?? null;
+    }
+
+    /**
+     * Resolves the element that owns a picked node: the nearest node up the parent chain -
+     * starting with the node itself - that was created by a `<pc-entity>` of this application.
+     * A hit inside a model's instantiated hierarchy therefore resolves to the element hosting
+     * the model.
+     *
+     * @param node - The picked node, or `null`.
+     * @returns The owning element, or `null`.
+     */
+    private _elementFromNode(node: GraphNode | null): EntityElement | null {
+        while (node !== null) {
+            const element = this._entityElements.get(node);
+            if (element) {
+                return element;
+            }
+            node = node.parent;
+        }
+        return null;
+    }
+
+    /**
+     * Like {@link _elementFromNode}, but skips elements without a listener for `type`, so a hit
+     * on an unlistened child still reaches a listening ancestor.
+     *
+     * @param node - The picked node, or `null`.
+     * @param type - The pointer event type a listener is required for.
+     * @returns The nearest listening element, or `null`.
+     */
+    private _elementWithListener(node: GraphNode | null, type: string): EntityElement | null {
+        while (node !== null) {
+            const element = this._entityElements.get(node);
+            if (element?.hasListeners(type)) {
+                return element;
+            }
+            node = node.parent;
+        }
+        return null;
+    }
+
     // New helper to convert CSS coordinates to canvas (picker) coordinates
     private _getPickerCoordinates(event: PointerEvent): { x: number, y: number } {
         // Get the canvas' bounding rectangle in CSS pixels.
@@ -369,32 +537,44 @@ class AppElement extends AsyncElement {
         return { x, y };
     }
 
-    _onPointerMove(event: PointerEvent) {
-        if (!this._picker || !this.app) return;
-
+    /**
+     * Picks the scene under the pointer and returns the graph node that was hit, or `null`.
+     *
+     * The read back is asynchronous because the synchronous {@link Picker.getSelection} is not
+     * supported on WebGPU, where it returns an empty selection rather than failing - which
+     * silently disabled every `onpointer*` handler once WebGPU became the resolved backend. The
+     * async variant works on both backends and does not block the main thread on a GPU read.
+     *
+     * @param event - The pointer event to pick under.
+     * @returns The graph node under the pointer, or `null` if nothing was hit.
+     */
+    private async _pickNode(event: PointerEvent): Promise<GraphNode | null> {
         const camera = this.app!.root.findComponent('camera') as CameraComponent;
-        if (!camera) return;
+        if (!camera) return null;
 
-        // Use the helper to convert event coordinates into canvas/picker coordinates.
         const { x, y } = this._getPickerCoordinates(event);
 
-        this._picker.prepare(camera, this.app!.scene);
-        const selection = this._picker.getSelection(x, y);
-
-        // Get the currently hovered entity by walking up the hierarchy
-        let newHoverEntity: EntityElement | null = null;
-        if (selection.length > 0) {
-            const item = selection[0];
-            let currentNode: GraphNode | null = item instanceof MeshInstance ? item.node : (item as GSplatComponent).entity;
-            while (currentNode !== null) {
-                const entityElement = this.querySelector(`pc-entity[name="${currentNode.name}"]`) as EntityElement;
-                if (entityElement) {
-                    newHoverEntity = entityElement;
-                    break;
-                }
-                currentNode = currentNode.parent;
-            }
-        }
+        this._picker!.prepare(camera, this.app!.scene);
+        const selection = await this._picker!.getSelectionAsync(x, y);
+        if (selection.length === 0) return null;
+
+        const item = selection[0];
+        return item instanceof MeshInstance ? item.node : (item as GSplatComponent).entity;
+    }
+
+    async _onPointerMove(event: PointerEvent) {
+        if (!this._picker || !this.app) return;
+
+        // Moves arrive faster than a pick resolves, so results can land out of order. Only the
+        // newest pick may update the hover state - an older one describes a pointer position the
+        // user has already left.
+        const token = ++this._pickToken;
+        const node = await this._pickNode(event);
+        if (token !== this._pickToken || !this._picker) return;
+
+        // The hovered element is the nearest one up the node's parent chain, listening or not -
+        // dispatch is gated per event type below
+        const newHoverEntity = this._elementFromNode(node);
 
         // Handle enter/leave events
         if (this._hoveredEntity !== newHoverEntity) {
@@ -415,51 +595,27 @@ class AppElement extends AsyncElement {
         }
     }
 
-    _onPointerDown(event: PointerEvent) {
+    async _onPointerDown(event: PointerEvent) {
         if (!this._picker || !this.app) return;
 
-        const camera = this.app!.root.findComponent('camera') as CameraComponent;
-        if (!camera) return;
-
-        // Convert the event's pointer coordinates
-        const { x, y } = this._getPickerCoordinates(event);
+        const node = await this._pickNode(event);
+        if (!this._picker) return; // the element disconnected while the pick was in flight
 
-        this._picker.prepare(camera, this.app!.scene);
-        const selection = this._picker.getSelection(x, y);
-
-        if (selection.length > 0) {
-            const item = selection[0];
-            let currentNode: GraphNode | null = item instanceof MeshInstance ? item.node : (item as GSplatComponent).entity;
-            while (currentNode !== null) {
-                const entityElement = this.querySelector(`pc-entity[name="${currentNode.name}"]`) as EntityElement;
-                if (entityElement && entityElement.hasListeners('pointerdown')) {
-                    entityElement.dispatchEvent(new PointerEvent('pointerdown', event));
-                    break;
-                }
-                currentNode = currentNode.parent;
-            }
+        const entityElement = this._elementWithListener(node, 'pointerdown');
+        if (entityElement) {
+            entityElement.dispatchEvent(new PointerEvent('pointerdown', event));
         }
     }
 
-    _onPointerUp(event: PointerEvent) {
+    async _onPointerUp(event: PointerEvent) {
         if (!this._picker || !this.app) return;
 
-        const camera = this.app!.root.findComponent('camera') as CameraComponent;
-        if (!camera) return;
-
-        // Convert CSS coordinates to picker coordinates
-        const { x, y } = this._getPickerCoordinates(event);
-
-        this._picker.prepare(camera, this.app!.scene);
-        const selection = this._picker.getSelection(x, y);
+        const node = await this._pickNode(event);
+        if (!this._picker) return; // the element disconnected while the pick was in flight
 
-        if (selection.length > 0) {
-            const item = selection[0];
-            const node = item instanceof MeshInstance ? item.node : (item as GSplatComponent).entity;
-            const entityElement = this.querySelector(`pc-entity[name="${node.name}"]`) as EntityElement;
-            if (entityElement && entityElement.hasListeners('pointerup')) {
-                entityElement.dispatchEvent(new PointerEvent('pointerup', event));
-            }
+        const entityElement = this._elementWithListener(node, 'pointerup');
+        if (entityElement) {
+            entityElement.dispatchEvent(new PointerEvent('pointerup', event));
         }
     }
 
@@ -496,15 +652,30 @@ class AppElement extends AsyncElement {
     }
 
     /**
-     * Sets the alpha flag.
+     * Warns that a graphics option was written too late to have any effect. These options are read
+     * once, when the element connects and creates its graphics device, so a later write updates
+     * only the element's own property - silently, without this.
+     *
+     * @param name - The name of the option, as its attribute.
+     */
+    private _warnIfBooted(name: string) {
+        if (this._optionsLocked) {
+            console.warn(`Attribute '${name}' on <pc-app> is only read when the application boots, so this change has no effect. Set it before the element is connected, or remove and re-insert the element to reboot with the new value.`);
+        }
+    }
+
+    /**
+     * 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.
      * @param value - The alpha flag.
      */
     set alpha(value: boolean) {
+        this._warnIfBooted('alpha');
         this._alpha = value;
     }
 
     /**
-     * Gets the alpha flag.
+     * Gets whether the frame buffer has an alpha channel.
      * @returns The alpha flag.
      */
     get alpha() {
@@ -512,15 +683,16 @@ class AppElement extends AsyncElement {
     }
 
     /**
-     * Sets the antialias flag.
+     * Sets whether the frame buffer is anti-aliased. Read only when the application boots.
      * @param value - The antialias flag.
      */
     set antialias(value: boolean) {
+        this._warnIfBooted('antialias');
         this._antialias = value;
     }
 
     /**
-     * Gets the antialias flag.
+     * Gets whether the frame buffer is anti-aliased.
      * @returns The antialias flag.
      */
     get antialias() {
@@ -529,10 +701,11 @@ class AppElement extends AsyncElement {
 
     /**
      * Sets the graphics backend. Defaults to 'webgpu', which falls back to 'webgl2' if WebGPU
-     * is not supported by the browser.
+     * is not supported by the browser. Read only when the application boots.
      * @param value - The graphics backend ('webgpu', 'webgl2', or 'null').
      */
     set backend(value: 'webgpu' | 'webgl2' | 'null') {
+        this._warnIfBooted('backend');
         this._backend = value;
     }
 
@@ -545,19 +718,21 @@ class AppElement extends AsyncElement {
     }
 
     /**
-     * Sets the depth flag.
-     * @param value - The depth 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.
+     * @param value - The depth buffer flag.
      */
-    set depth(value: boolean) {
-        this._depth = value;
+    set depthBuffer(value: boolean) {
+        this._warnIfBooted('depth-buffer');
+        this._depthBuffer = value;
     }
 
     /**
-     * Gets the depth flag.
-     * @returns The depth flag.
+     * Gets whether the frame buffer has a depth buffer.
+     * @returns The depth buffer flag.
      */
-    get depth() {
-        return this._depth;
+    get depthBuffer() {
+        return this._depthBuffer;
     }
 
     /**
@@ -570,43 +745,74 @@ class AppElement extends AsyncElement {
     }
 
     /**
-     * Sets the high resolution flag. When true, the application will render at the device's
-     * physical resolution. When false, the application will render at CSS resolution.
-     * @param value - The high resolution 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`.
+     * @param value - The loading bar flag.
+     */
+    set loadingBar(value: boolean) {
+        this._loadingBar = value;
+        if (!value && this._bar) {
+            this._bar.destroy();
+            this._bar = null;
+        }
+    }
+
+    /**
+     * Gets whether the application shows its built-in loading bar while it boots and preloads
+     * its assets.
+     * @returns The loading bar flag.
      */
-    set highResolution(value: boolean) {
-        this._highResolution = value;
+    get loadingBar() {
+        return this._loadingBar;
+    }
+
+    /**
+     * 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.
+     * @param value - The maximum pixel ratio.
+     */
+    set maxPixelRatio(value: number) {
+        this._maxPixelRatio = value;
         if (this.app) {
-            this.app.graphicsDevice.maxPixelRatio = value ? window.devicePixelRatio : 1;
+            this.app.graphicsDevice.maxPixelRatio = value;
+            this.app.resizeCanvas();
         }
     }
 
     /**
-     * Gets the high resolution flag.
-     * @returns The high resolution flag.
+     * Gets the cap on the pixel ratio the application renders at.
+     * @returns The maximum pixel ratio.
      */
-    get highResolution() {
-        return this._highResolution;
+    get maxPixelRatio() {
+        return this._maxPixelRatio;
     }
 
     /**
-     * Sets the stencil flag.
-     * @param value - The stencil flag.
+     * Sets whether the frame buffer has a stencil buffer, which stencil-based effects and UI
+     * masking need. Read only when the application boots.
+     * @param value - The stencil buffer flag.
      */
-    set stencil(value: boolean) {
-        this._stencil = value;
+    set stencilBuffer(value: boolean) {
+        this._warnIfBooted('stencil-buffer');
+        this._stencilBuffer = value;
     }
 
     /**
-     * Gets the stencil flag.
-     * @returns The stencil flag.
+     * Gets whether the frame buffer has a stencil buffer.
+     * @returns The stencil buffer flag.
      */
-    get stencil() {
-        return this._stencil;
+    get stencilBuffer() {
+        return this._stencilBuffer;
     }
 
     static get observedAttributes() {
-        return ['alpha', 'antialias', 'backend', 'depth', 'stencil', 'high-resolution'];
+        return ['alpha', 'antialias', 'backend', 'depth-buffer', 'loading-bar', 'max-pixel-ratio', 'stencil-buffer'];
     }
 
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
@@ -620,14 +826,17 @@ class AppElement extends AsyncElement {
             case 'backend':
                 this.backend = parseEnum(newValue, ['webgpu', 'webgl2', 'null'], 'webgpu', name);
                 break;
-            case 'depth':
-                this.depth = parseBool(newValue, true);
+            case 'depth-buffer':
+                this.depthBuffer = parseBool(newValue, true);
+                break;
+            case 'loading-bar':
+                this.loadingBar = parseBool(newValue, true);
                 break;
-            case 'high-resolution':
-                this.highResolution = parseBool(newValue, true);
+            case 'max-pixel-ratio':
+                this.maxPixelRatio = parseNumber(newValue, Infinity, name);
                 break;
-            case 'stencil':
-                this.stencil = parseBool(newValue, true);
+            case 'stencil-buffer':
+                this.stencilBuffer = parseBool(newValue, true);
                 break;
         }
     }