From d35b238b9d251d35f9b15ec67a5a25c6de29e2d6 Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Thu, 2 Mar 2023 16:02:12 +0000
Subject: [PATCH 01/14] add the active device type property to the engine

---
 src/platform/graphics/graphics-device.js               | 7 +++++++
 src/platform/graphics/webgl/webgl-graphics-device.js   | 7 +++++--
 src/platform/graphics/webgpu/webgpu-graphics-device.js | 3 ++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/platform/graphics/graphics-device.js b/src/platform/graphics/graphics-device.js
index 2f4286c0c40..b98885f3b81 100644
--- a/src/platform/graphics/graphics-device.js
+++ b/src/platform/graphics/graphics-device.js
@@ -36,6 +36,13 @@ class GraphicsDevice extends EventHandler {
      */
     isWebGPU = false;
 
+    /**
+     * The type of graphics device that the system could initialize. Can be one of pc.DEVICETYPE_WEBGL1, pc.DEVICETYPE_WEBGL2 or pc.DEVICETYPE_WEBGPU.
+     *
+     * @type {pc.DEVICETYPE_WEBGL1 | pc.DEVICETYPE_WEBGL2 | pc.DEVICETYPE_WEBGPU}
+     */
+    activeDeviceType;
+
     /**
      * The scope namespace for shader attributes and variables.
      *
diff --git a/src/platform/graphics/webgl/webgl-graphics-device.js b/src/platform/graphics/webgl/webgl-graphics-device.js
index c2ca41a8bb0..465bd750be2 100644
--- a/src/platform/graphics/webgl/webgl-graphics-device.js
+++ b/src/platform/graphics/webgl/webgl-graphics-device.js
@@ -20,7 +20,9 @@ import {
     UNIFORMTYPE_TEXTURE2D, UNIFORMTYPE_TEXTURECUBE, UNIFORMTYPE_FLOATARRAY, UNIFORMTYPE_TEXTURE2D_SHADOW,
     UNIFORMTYPE_TEXTURECUBE_SHADOW, UNIFORMTYPE_TEXTURE3D, UNIFORMTYPE_VEC2ARRAY, UNIFORMTYPE_VEC3ARRAY, UNIFORMTYPE_VEC4ARRAY,
     semanticToLocation,
-    PRIMITIVE_TRISTRIP
+    PRIMITIVE_TRISTRIP,
+    DEVICETYPE_WEBGL2,
+    DEVICETYPE_WEBGL1
 } from '../constants.js';
 
 import { GraphicsDevice } from '../graphics-device.js';
@@ -406,7 +408,8 @@ class WebglGraphicsDevice extends GraphicsDevice {
             gl = canvas.getContext(names[i], options);
 
             if (gl) {
-                this.webgl2 = (names[i] === 'webgl2');
+                this.webgl2 = (names[i] === DEVICETYPE_WEBGL2);
+                this.activeDeviceType = (names[i] === DEVICETYPE_WEBGL2) ? DEVICETYPE_WEBGL2 : DEVICETYPE_WEBGL1;
                 break;
             }
         }
diff --git a/src/platform/graphics/webgpu/webgpu-graphics-device.js b/src/platform/graphics/webgpu/webgpu-graphics-device.js
index 9faf7f6f71c..094a96fcc70 100644
--- a/src/platform/graphics/webgpu/webgpu-graphics-device.js
+++ b/src/platform/graphics/webgpu/webgpu-graphics-device.js
@@ -1,7 +1,7 @@
 import { Debug, DebugHelper } from '../../../core/debug.js';
 
 import {
-    PIXELFORMAT_RGBA32F, PIXELFORMAT_RGBA8, PIXELFORMAT_BGRA8, CULLFACE_BACK
+    PIXELFORMAT_RGBA32F, PIXELFORMAT_RGBA8, PIXELFORMAT_BGRA8, CULLFACE_BACK, DEVICETYPE_WEBGPU
 } from '../constants.js';
 import { GraphicsDevice } from '../graphics-device.js';
 import { RenderTarget } from '../render-target.js';
@@ -70,6 +70,7 @@ class WebgpuGraphicsDevice extends GraphicsDevice {
     constructor(canvas, options = {}) {
         super(canvas);
         this.isWebGPU = true;
+        this.activeDeviceType = DEVICETYPE_WEBGPU;
 
         // TODO: refactor as needed
         this.writeRed = true;

From 061d0404b2725649de8e46b25a682058cc94242e Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Thu, 2 Mar 2023 16:05:07 +0000
Subject: [PATCH 02/14] update the examples browser to support switching the
 device type

---
 examples/package-lock.json              |  14 +--
 examples/package.json                   |   2 +-
 examples/scripts/iframe/index.mustache  |   4 +-
 examples/src/app/control-panel.tsx      |  14 +--
 examples/src/app/example.tsx            | 118 +++++++++++++++++++++---
 examples/src/app/helpers/formatters.mjs |   2 +-
 examples/src/static/styles.css          |  31 +++++++
 7 files changed, 157 insertions(+), 28 deletions(-)

diff --git a/examples/package-lock.json b/examples/package-lock.json
index 674011be423..9949ffd0ad8 100644
--- a/examples/package-lock.json
+++ b/examples/package-lock.json
@@ -16,7 +16,7 @@
         "@monaco-editor/react": "^4.4.5",
         "@playcanvas/eslint-config": "^1.1.1",
         "@playcanvas/observer": "1.3.6",
-        "@playcanvas/pcui": "^4.0.0",
+        "@playcanvas/pcui": "^4.0.3",
         "@rollup/plugin-alias": "^4.0.2",
         "@rollup/plugin-commonjs": "^22.0.0",
         "@rollup/plugin-node-resolve": "^13.3.0",
@@ -372,9 +372,9 @@
       "dev": true
     },
     "node_modules/@playcanvas/pcui": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@playcanvas/pcui/-/pcui-4.0.0.tgz",
-      "integrity": "sha512-TG3VroX0TqMZSAKPazCCd3HtJamzcnKATljY+acTYSev8vv1jC5ZsjAXdlnS7xK39vDGooCs4kL5fWZf+PUK3A==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@playcanvas/pcui/-/pcui-4.0.3.tgz",
+      "integrity": "sha512-NuL/t+R7qF0ZrTX9m8Vx2i0LHo71N0SOYOf5ZmKq4sHKHYzK/SYTKFIIVgalbxgEsHog2YOAD6Rn2S1yOMX+PA==",
       "dev": true,
       "dependencies": {
         "@playcanvas/observer": "^1.3.6"
@@ -5591,9 +5591,9 @@
       "dev": true
     },
     "@playcanvas/pcui": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@playcanvas/pcui/-/pcui-4.0.0.tgz",
-      "integrity": "sha512-TG3VroX0TqMZSAKPazCCd3HtJamzcnKATljY+acTYSev8vv1jC5ZsjAXdlnS7xK39vDGooCs4kL5fWZf+PUK3A==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@playcanvas/pcui/-/pcui-4.0.3.tgz",
+      "integrity": "sha512-NuL/t+R7qF0ZrTX9m8Vx2i0LHo71N0SOYOf5ZmKq4sHKHYzK/SYTKFIIVgalbxgEsHog2YOAD6Rn2S1yOMX+PA==",
       "dev": true,
       "requires": {
         "@playcanvas/observer": "^1.3.6"
diff --git a/examples/package.json b/examples/package.json
index 57abb0a7a51..a88151a3635 100644
--- a/examples/package.json
+++ b/examples/package.json
@@ -48,7 +48,7 @@
     "@monaco-editor/react": "^4.4.5",
     "@playcanvas/eslint-config": "^1.1.1",
     "@playcanvas/observer": "1.3.6",
-    "@playcanvas/pcui": "^4.0.0",
+    "@playcanvas/pcui": "^4.0.3",
     "@rollup/plugin-alias": "^4.0.2",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
diff --git a/examples/scripts/iframe/index.mustache b/examples/scripts/iframe/index.mustache
index dbcfaec7255..81ab9364b82 100644
--- a/examples/scripts/iframe/index.mustache
+++ b/examples/scripts/iframe/index.mustache
@@ -62,7 +62,7 @@
                     presets: ["react", "typescript", "env"]
                 }).code;
             }
-            window.exampleFunction = new Function('canvas', 'data', exampleFunction);
+            window.exampleFunction = new Function('canvas', 'deviceType', 'data', exampleFunction);
         }
         window.loadFunction = example.load;
         window.files = window.top.editedFiles || example.constructor.FILES;
@@ -181,6 +181,8 @@
                     return data;
                 } else if (arg === 'pcx') {
                     return pcx;
+                } else if (arg === 'deviceType') {
+                    return window.top.preferredGraphicsDevice || 'webgpu';
                 }
             });
             window.exampleFunction.apply(this, args);
diff --git a/examples/src/app/control-panel.tsx b/examples/src/app/control-panel.tsx
index 40200eeb468..16dc323793b 100644
--- a/examples/src/app/control-panel.tsx
+++ b/examples/src/app/control-panel.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import MonacoEditor from "@monaco-editor/react";
-import { Button, Container, Panel } from '@playcanvas/pcui/react';
+import { Button, Container } from '@playcanvas/pcui/react';
 
 const ControlPanel = (props: any) => {
     const [state, setState] = useState({
@@ -17,8 +17,8 @@ const ControlPanel = (props: any) => {
             showCode: false,
             collapsed: false
         });
-        document.getElementById('paramButton').classList.toggle('selected');
-        document.getElementById('codeButton').classList.toggle('selected');
+        document.getElementById('paramButton').classList.add('selected');
+        document.getElementById('codeButton').classList.remove('selected');
         const controls = document.getElementById('controlPanel-controls');
         controls.classList.remove('pcui-hidden');
     };
@@ -31,8 +31,8 @@ const ControlPanel = (props: any) => {
             showCode: true,
             collapsed: false
         });
-        document.getElementById('paramButton').classList.toggle('selected');
-        document.getElementById('codeButton').classList.toggle('selected');
+        document.getElementById('paramButton').classList.remove('selected');
+        document.getElementById('codeButton').classList.add('selected');
         const controls = document.getElementById('controlPanel-controls');
         controls.classList.add('pcui-hidden');
     };
@@ -48,7 +48,7 @@ const ControlPanel = (props: any) => {
         }
     });
 
-    return <Panel id='controlPanel' class={[window.top.innerWidth > 600 && !props.controls ? 'empty' : 'null', window.top.innerWidth < 601 ? 'mobile' : null]} resizable='top' headerText={window.top.innerWidth < 601 ? (props.controls ? 'CODE & CONTROLS' : 'CODE') : 'CONTROLS'} collapsible={true} collapsed={state.collapsed}>
+    return <Container id='controls-wrapper' class={props.controls ? 'has-controls' : null}>
         { window.top.innerWidth < 601 && props.controls && <Container id= 'controlPanel-tabs' class='tabs-container'>
             <Button text='CODE' id='codeButton' class={state.showCode ? 'selected' : null} onClick={onClickCodeTab}/>
             <Button text='PARAMETERS' class={state.showParameters ? 'selected' : null} id='paramButton' onClick={onClickParametersTab} />
@@ -65,7 +65,7 @@ const ControlPanel = (props: any) => {
             value={props.files ? props.files[0].text : ''}
         />
         }
-    </Panel>;
+    </Container>;
 };
 
 export default ControlPanel;
diff --git a/examples/src/app/example.tsx b/examples/src/app/example.tsx
index fefba641424..701cb6f83be 100644
--- a/examples/src/app/example.tsx
+++ b/examples/src/app/example.tsx
@@ -1,10 +1,21 @@
 import React, { Component } from 'react';
-import { Container, Spinner } from '@playcanvas/pcui/react';
+import { Container, Spinner, SelectInput, Panel } from '@playcanvas/pcui/react';
+import { SelectInput as SelectInputClass } from '@playcanvas/pcui';
 import { File } from './helpers/types';
 import examples from './helpers/example-data.mjs';
 // @ts-ignore: library file import
 import { withRouter } from 'react-router-dom';
 import ControlPanel from './control-panel';
+import { Application, DEVICETYPE_WEBGPU, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGL1 } from '../../../build/playcanvas';
+import { Observer } from '@playcanvas/observer';
+
+const deviceTypeNames = {
+    [DEVICETYPE_WEBGL1]: 'WebGL 1',
+    [DEVICETYPE_WEBGL2]: 'WebGL 2',
+    [DEVICETYPE_WEBGPU]: 'WebGPU'
+};
+
+const controlsObserver = new Observer();
 
 const Controls = (props: any) => {
     const controlsFunction = (examples as any).paths[props.path].example.prototype.controls;
@@ -38,6 +49,17 @@ class ControlLoader extends Component <ControlLoaderProps, ControlLoaderState> {
             this.setState({
                 exampleLoaded: true
             });
+
+
+            const pollHandler = setInterval(appCreationPoll, 50);
+            function appCreationPoll() {
+                if ((window as any).pc.app) {
+                    clearInterval(pollHandler);
+                    const app: Application = (window as any).pc.app;
+                    const activeDevice = app.graphicsDevice.activeDeviceType;
+                    controlsObserver.emit('updateActiveDevice', activeDevice);
+                }
+            }
         });
     }
 
@@ -71,6 +93,74 @@ interface ExampleState {
 
 class Example extends Component <ExampleProps, ExampleState> {
     editorValue: string;
+    deviceTypeSelectInputRef;
+
+    constructor(props: any) {
+        super(props);
+        this.deviceTypeSelectInputRef = React.createRef();
+
+        controlsObserver.on('updateActiveDevice', this.onSetActiveGraphicsDevice);
+    }
+
+    get defaultFiles() {
+        return (examples as any).paths[this.path].files;
+    }
+
+    get path() {
+        return `/${this.props.match.params.category}/${this.props.match.params.example}`;
+    }
+
+    get deviceTypeSelectInput() {
+        return (this.deviceTypeSelectInputRef.current as { element: SelectInputClass }).element;
+    }
+
+    set preferredGraphicsDevice(value: string) {
+        (window as any).prefferedGraphicsDevice = value;
+    }
+
+    get preferredGraphicsDevice() {
+        return (window as any).prefferedGraphicsDevice;
+    }
+
+    setDisabledOptions = (preferredDevice = 'webgpu', activeDevice: string) => {
+        const selectInput = this.deviceTypeSelectInput;
+        if ((preferredDevice === DEVICETYPE_WEBGL2 || preferredDevice === DEVICETYPE_WEBGPU) && activeDevice === DEVICETYPE_WEBGL1) {
+            selectInput.fallbackOrder = [DEVICETYPE_WEBGPU, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGL1];
+            selectInput.disabledOptions = {
+                [DEVICETYPE_WEBGPU]: 'WebGPU (not supported)',
+                [DEVICETYPE_WEBGL2]: 'WebGL 2 (not supported)'
+            };
+        } else if (preferredDevice === DEVICETYPE_WEBGL1 && activeDevice === DEVICETYPE_WEBGL2) {
+            selectInput.fallbackOrder = [DEVICETYPE_WEBGL1, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGPU];
+            selectInput.disabledOptions = {
+                [DEVICETYPE_WEBGL1]: 'WebGL 1 (not supported)'
+            };
+        } else if (preferredDevice === DEVICETYPE_WEBGPU && activeDevice !== DEVICETYPE_WEBGPU) {
+            selectInput.fallbackOrder = [DEVICETYPE_WEBGPU, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGL1];
+            selectInput.disabledOptions = {
+                [DEVICETYPE_WEBGPU]: 'WebGPU (not supported)'
+            };
+        } else {
+            selectInput.disabledOptions = null;
+        }
+    };
+
+    onSetActiveGraphicsDevice = (value: string) => {
+        if (!this.preferredGraphicsDevice) {
+            this.preferredGraphicsDevice = value;
+            this.deviceTypeSelectInput.value = value;
+        }
+        this.setDisabledOptions(this.preferredGraphicsDevice, value);
+    };
+
+    onSetPreferredGraphicsDevice = (value: string) => {
+        this.deviceTypeSelectInput.disabledOptions = null;
+        this.deviceTypeSelectInput.value = value;
+        this.preferredGraphicsDevice = value;
+        // reload the iframe after updating the device
+        const exampleIframe: HTMLIFrameElement = document.getElementById('exampleIframe') as HTMLIFrameElement;
+        exampleIframe.contentWindow.location.reload();
+    };
 
     componentDidMount() {
         window.localStorage.removeItem(this.path);
@@ -78,7 +168,7 @@ class Example extends Component <ExampleProps, ExampleState> {
     }
 
     shouldComponentUpdate(nextProps: Readonly<ExampleProps>): boolean {
-        return this.props.match.params.category !== nextProps.match.params.category || this.props.match.params.example !== nextProps.match.params.example;
+        return this.props.match.params.category !== nextProps.match.params.category || this.props.match.params.example !== nextProps.match.params.example || this.props.files !== nextProps.files;
     }
 
     componentDidUpdate() {
@@ -87,20 +177,26 @@ class Example extends Component <ExampleProps, ExampleState> {
         this.props.setFiles(this.defaultFiles);
     }
 
-    get defaultFiles() {
-        return (examples as any).paths[this.path].files;
-    }
-
-    get path() {
-        return `/${this.props.match.params.category}/${this.props.match.params.example}`;
-    }
-
     render() {
         const iframePath = `/iframe${this.path}`;
         return <Container id="canvas-container">
             <Spinner size={50}/>
             <iframe id="exampleIframe" key={iframePath} src={iframePath}></iframe>
-            <ControlLoader path={this.path} files={this.props.files} />
+            <Panel id='controlPanel' class={[window.top.innerWidth < 601 ? 'mobile' : null]} resizable='top' headerText={window.top.innerWidth < 601 ? 'CODE & CONTROLS' : 'CONTROLS'} collapsible={true} collapsed={window.top.innerWidth < 601}>
+                <SelectInput
+                    id='deviceTypeSelectInput'
+                    options={[
+                        { t: deviceTypeNames[DEVICETYPE_WEBGL1], v: DEVICETYPE_WEBGL1 },
+                        { t: deviceTypeNames[DEVICETYPE_WEBGL2], v: DEVICETYPE_WEBGL2 },
+                        { t: deviceTypeNames[DEVICETYPE_WEBGPU], v: DEVICETYPE_WEBGPU }
+                    ]}
+                    onSelect={this.onSetPreferredGraphicsDevice}
+                    prefix='Active Device: '
+                    // @ts-ignore this is setting a legacy ref
+                    ref={this.deviceTypeSelectInputRef}
+                />
+                <ControlLoader path={this.path} files={this.props.files} />
+            </Panel>
         </Container>;
     }
 }
diff --git a/examples/src/app/helpers/formatters.mjs b/examples/src/app/helpers/formatters.mjs
index 725df102e94..eebe13a4baf 100644
--- a/examples/src/app/helpers/formatters.mjs
+++ b/examples/src/app/helpers/formatters.mjs
@@ -14,7 +14,7 @@ const findClosingBracketMatchIndex = (str, pos) => {
 
 const getTypeScriptFunctionFromText = (text) => {
     const transformedCode = text;
-    const functionSignatureStartString = 'example(canvas: HTMLCanvasElement';
+    const functionSignatureStartString = 'example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2';
     const indexOfFunctionSignatureStart = transformedCode.indexOf(functionSignatureStartString);
     const functionSignatureEndString = '): void ';
     const indexOfFunctionSignatureEnd = indexOfFunctionSignatureStart + transformedCode.substring(indexOfFunctionSignatureStart).indexOf(functionSignatureEndString) + functionSignatureEndString.length;
diff --git a/examples/src/static/styles.css b/examples/src/static/styles.css
index b40c0998640..f9bc17b4eb3 100644
--- a/examples/src/static/styles.css
+++ b/examples/src/static/styles.css
@@ -397,6 +397,37 @@ body {
     min-width: 46px;
 }
 
+#controlPanel > .pcui-panel-content {
+    background-color: #364346;
+}
+
+#controls-wrapper {
+    position: absolute;
+    width: 100%;
+    height: calc(100% - 48px);
+}
+
+#controls-wrapper.has-controls {
+    height: calc(100% - 100px);
+}
+
+#deviceTypeSelectInput {
+    margin: 8px;
+    min-width: 200px;
+}
+
+#deviceTypeSelectInput > .pcui-select-input-container-value > .pcui-select-input-value {
+    height: 32px;
+    border-radius: 4px;
+    display: flex;
+    text-align: center;
+    align-items: center;
+}
+
+#deviceTypeSelectInput > .pcui-select-input-container-value > .pcui-select-input-icon {
+    top: 4px;
+}
+
 .filter-input {
     margin: 8px 8px 0px 8px !important;
     width: calc(100% - 16px);

From e27d96caa2ec965c08513e7dc42ae2bd15de8675 Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Thu, 2 Mar 2023 16:05:29 +0000
Subject: [PATCH 03/14] update examples to use the deviceType property

---
 examples/src/examples/animation/blend-trees-1d.tsx   | 10 ++++++++--
 .../examples/animation/blend-trees-2d-cartesian.tsx  |  2 +-
 .../animation/blend-trees-2d-directional.tsx         |  2 +-
 .../src/examples/animation/component-properties.tsx  |  2 +-
 examples/src/examples/animation/events.tsx           |  2 +-
 examples/src/examples/animation/layer-masks.tsx      |  2 +-
 examples/src/examples/animation/locomotion.tsx       |  2 +-
 examples/src/examples/animation/tween.tsx            |  2 +-
 examples/src/examples/camera/first-person.tsx        |  2 +-
 examples/src/examples/camera/fly.tsx                 |  2 +-
 examples/src/examples/camera/orbit.tsx               |  2 +-
 examples/src/examples/graphics/area-lights.tsx       | 10 ++++++++--
 examples/src/examples/graphics/area-picker.tsx       | 10 ++++++++--
 examples/src/examples/graphics/asset-viewer.tsx      | 10 ++++++++--
 examples/src/examples/graphics/batching-dynamic.tsx  | 10 ++++++++--
 examples/src/examples/graphics/box-reflection.tsx    | 10 ++++++++--
 .../src/examples/graphics/clustered-area-lights.tsx  | 10 ++++++++--
 .../src/examples/graphics/clustered-lighting.tsx     | 10 ++++++++--
 .../src/examples/graphics/clustered-omni-shadows.tsx | 10 ++++++++--
 .../src/examples/graphics/clustered-spot-shadows.tsx | 10 ++++++++--
 examples/src/examples/graphics/grab-pass.tsx         | 10 ++++++++--
 examples/src/examples/graphics/ground-fog.tsx        | 10 ++++++++--
 .../src/examples/graphics/hardware-instancing.tsx    | 10 ++++++++--
 examples/src/examples/graphics/hierarchy.tsx         | 10 ++++++++--
 examples/src/examples/graphics/layers.tsx            | 10 ++++++++--
 .../src/examples/graphics/light-physical-units.tsx   | 10 ++++++++--
 examples/src/examples/graphics/lights-baked-a-o.tsx  | 10 ++++++++--
 examples/src/examples/graphics/lights-baked.tsx      | 10 ++++++++--
 examples/src/examples/graphics/lights.tsx            | 10 ++++++++--
 examples/src/examples/graphics/lines.tsx             | 10 ++++++++--
 .../src/examples/graphics/material-anisotropic.tsx   | 10 ++++++++--
 examples/src/examples/graphics/material-basic.tsx    | 10 ++++++++--
 .../src/examples/graphics/material-clear-coat.tsx    | 10 ++++++++--
 examples/src/examples/graphics/material-physical.tsx | 10 ++++++++--
 .../graphics/material-translucent-specular.tsx       | 10 ++++++++--
 examples/src/examples/graphics/mesh-decals.tsx       | 10 ++++++++--
 examples/src/examples/graphics/mesh-deformation.tsx  | 10 ++++++++--
 examples/src/examples/graphics/mesh-generation.tsx   | 10 ++++++++--
 examples/src/examples/graphics/mesh-morph-many.tsx   | 10 ++++++++--
 examples/src/examples/graphics/mesh-morph.tsx        | 10 ++++++++--
 examples/src/examples/graphics/model-asset.tsx       | 10 ++++++++--
 examples/src/examples/graphics/model-outline.tsx     | 10 ++++++++--
 .../src/examples/graphics/model-textured-box.tsx     | 10 ++++++++--
 examples/src/examples/graphics/multi-view.tsx        | 10 ++++++++--
 examples/src/examples/graphics/paint-mesh.tsx        |  2 +-
 examples/src/examples/graphics/painter.tsx           |  2 +-
 .../src/examples/graphics/particles-anim-index.tsx   |  2 +-
 .../examples/graphics/particles-random-sprites.tsx   |  2 +-
 examples/src/examples/graphics/particles-snow.tsx    |  2 +-
 examples/src/examples/graphics/particles-spark.tsx   |  2 +-
 .../src/examples/graphics/point-cloud-simulation.tsx |  2 +-
 examples/src/examples/graphics/point-cloud.tsx       |  2 +-
 examples/src/examples/graphics/portal.tsx            |  2 +-
 examples/src/examples/graphics/post-effects.tsx      | 10 ++++++++--
 examples/src/examples/graphics/render-asset.tsx      | 10 ++++++++--
 examples/src/examples/graphics/render-cubemap.tsx    | 10 ++++++++--
 examples/src/examples/graphics/render-to-texture.tsx | 10 ++++++++--
 examples/src/examples/graphics/shader-burn.tsx       | 10 ++++++++--
 examples/src/examples/graphics/shader-compile.tsx    |  2 +-
 examples/src/examples/graphics/shader-toon.tsx       | 10 ++++++++--
 examples/src/examples/graphics/shader-wobble.tsx     | 10 ++++++++--
 examples/src/examples/graphics/shadow-cascades.tsx   | 10 ++++++++--
 examples/src/examples/graphics/shapes.tsx            | 10 ++++++++--
 examples/src/examples/graphics/texture-basis.tsx     |  2 +-
 .../src/examples/graphics/transform-feedback.tsx     |  2 +-
 examples/src/examples/graphics/video-texture.tsx     |  2 +-
 examples/src/examples/input/gamepad.tsx              | 12 ++++++++++--
 examples/src/examples/input/keyboard.tsx             | 10 ++++++++--
 examples/src/examples/input/mouse.tsx                | 10 ++++++++--
 examples/src/examples/loaders/draco-glb.tsx          | 10 ++++++++--
 examples/src/examples/loaders/glb.tsx                | 10 ++++++++--
 examples/src/examples/loaders/gltf-export.tsx        |  2 +-
 examples/src/examples/loaders/loaders-gl.tsx         |  2 +-
 examples/src/examples/loaders/obj.tsx                |  2 +-
 examples/src/examples/loaders/usdz-export.tsx        |  2 +-
 examples/src/examples/misc/hello-world.tsx           |  2 +-
 examples/src/examples/misc/mini-stats.tsx            |  2 +-
 examples/src/examples/misc/spineboy.tsx              | 10 ++++++++--
 examples/src/examples/physics/compound-collision.tsx |  2 +-
 examples/src/examples/physics/falling-shapes.tsx     |  2 +-
 examples/src/examples/physics/offset-collision.tsx   |  2 +-
 examples/src/examples/physics/raycast.tsx            |  2 +-
 examples/src/examples/physics/vehicle.tsx            | 10 ++++++++--
 examples/src/examples/sound/positional.tsx           |  2 +-
 .../src/examples/user-interface/button-basic.tsx     | 10 ++++++++--
 .../src/examples/user-interface/button-sprite.tsx    | 10 ++++++++--
 .../src/examples/user-interface/custom-shader.tsx    | 10 ++++++++--
 .../src/examples/user-interface/layout-group.tsx     | 10 ++++++++--
 .../src/examples/user-interface/particle-system.tsx  | 10 ++++++++--
 examples/src/examples/user-interface/scroll-view.tsx | 10 ++++++++--
 .../examples/user-interface/text-auto-font-size.tsx  | 10 ++++++++--
 examples/src/examples/user-interface/text-emojis.tsx | 10 ++++++++--
 .../examples/user-interface/text-localization.tsx    | 10 ++++++++--
 .../src/examples/user-interface/text-typewriter.tsx  | 10 ++++++++--
 examples/src/examples/user-interface/text.tsx        | 10 ++++++++--
 .../src/examples/user-interface/world-to-screen.tsx  | 10 ++++++++--
 examples/src/examples/user-interface/world-ui.tsx    | 10 ++++++++--
 examples/src/examples/xr/ar-basic.tsx                |  2 +-
 examples/src/examples/xr/ar-hit-test.tsx             |  2 +-
 examples/src/examples/xr/vr-basic.tsx                |  2 +-
 examples/src/examples/xr/vr-controllers.tsx          |  2 +-
 examples/src/examples/xr/vr-hands.tsx                |  2 +-
 examples/src/examples/xr/vr-movement.tsx             |  2 +-
 examples/src/examples/xr/xr-picking.tsx              |  2 +-
 104 files changed, 547 insertions(+), 167 deletions(-)

diff --git a/examples/src/examples/animation/blend-trees-1d.tsx b/examples/src/examples/animation/blend-trees-1d.tsx
index 4c71ded8810..1de32bd5c30 100644
--- a/examples/src/examples/animation/blend-trees-1d.tsx
+++ b/examples/src/examples/animation/blend-trees-1d.tsx
@@ -16,7 +16,7 @@ class BlendTrees1DExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             'model': new pc.Asset('model', 'container', { url: '/static/assets/models/bitmoji.glb' }),
@@ -26,7 +26,13 @@ class BlendTrees1DExample {
             'bloom': new pc.Asset('bloom', 'script', { url: '/static/scripts/posteffects/posteffect-bloom.js' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/animation/blend-trees-2d-cartesian.tsx b/examples/src/examples/animation/blend-trees-2d-cartesian.tsx
index 3ceb2de68e7..745b1c9e3ee 100644
--- a/examples/src/examples/animation/blend-trees-2d-cartesian.tsx
+++ b/examples/src/examples/animation/blend-trees-2d-cartesian.tsx
@@ -89,7 +89,7 @@ class BlendTrees2DCartesianExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/blend-trees-2d-directional.tsx b/examples/src/examples/animation/blend-trees-2d-directional.tsx
index c4a42979cf1..93718f03261 100644
--- a/examples/src/examples/animation/blend-trees-2d-directional.tsx
+++ b/examples/src/examples/animation/blend-trees-2d-directional.tsx
@@ -80,7 +80,7 @@ class BlendTrees2DDirectionalExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/component-properties.tsx b/examples/src/examples/animation/component-properties.tsx
index 206513126bd..c97305059d3 100644
--- a/examples/src/examples/animation/component-properties.tsx
+++ b/examples/src/examples/animation/component-properties.tsx
@@ -16,7 +16,7 @@ class ComponentPropertiesExample {
     }
 
 
-    example(canvas: HTMLCanvasElement, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/events.tsx b/examples/src/examples/animation/events.tsx
index 2c3c18b5960..5546e88b554 100644
--- a/examples/src/examples/animation/events.tsx
+++ b/examples/src/examples/animation/events.tsx
@@ -4,7 +4,7 @@ class EventsExample {
     static CATEGORY = 'Animation';
     static NAME = 'Events';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/layer-masks.tsx b/examples/src/examples/animation/layer-masks.tsx
index 9a8a77b0cb7..60a7f5fc837 100644
--- a/examples/src/examples/animation/layer-masks.tsx
+++ b/examples/src/examples/animation/layer-masks.tsx
@@ -38,7 +38,7 @@ class LayerMasksExample {
     }
 
 
-    example(canvas: HTMLCanvasElement, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
             touch: new pc.TouchDevice(document.body)
diff --git a/examples/src/examples/animation/locomotion.tsx b/examples/src/examples/animation/locomotion.tsx
index ab9148f9445..4894fe91b17 100644
--- a/examples/src/examples/animation/locomotion.tsx
+++ b/examples/src/examples/animation/locomotion.tsx
@@ -18,7 +18,7 @@ class LocomotionExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/animation/tween.tsx b/examples/src/examples/animation/tween.tsx
index f09ff1ade8a..1ee6882a5de 100644
--- a/examples/src/examples/animation/tween.tsx
+++ b/examples/src/examples/animation/tween.tsx
@@ -12,7 +12,7 @@ class TweenExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
         app.start();
diff --git a/examples/src/examples/camera/first-person.tsx b/examples/src/examples/camera/first-person.tsx
index 810ecf195e6..76bcd117254 100644
--- a/examples/src/examples/camera/first-person.tsx
+++ b/examples/src/examples/camera/first-person.tsx
@@ -6,7 +6,7 @@ class FirstPersonExample {
     static NAME = 'First Person';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/camera/fly.tsx b/examples/src/examples/camera/fly.tsx
index 15941289d60..43258beb04e 100644
--- a/examples/src/examples/camera/fly.tsx
+++ b/examples/src/examples/camera/fly.tsx
@@ -6,7 +6,7 @@ class FlyExample {
     static NAME = 'Fly';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/camera/orbit.tsx b/examples/src/examples/camera/orbit.tsx
index 5f54277b969..4b2d08affdf 100644
--- a/examples/src/examples/camera/orbit.tsx
+++ b/examples/src/examples/camera/orbit.tsx
@@ -6,7 +6,7 @@ class OrbitExample {
     static NAME = 'Orbit';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/graphics/area-lights.tsx b/examples/src/examples/graphics/area-lights.tsx
index 821803fd34a..721d78d0ffc 100644
--- a/examples/src/examples/graphics/area-lights.tsx
+++ b/examples/src/examples/graphics/area-lights.tsx
@@ -6,7 +6,7 @@ class AreaLightsExample {
     static NAME = 'Area Lights';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'color': new pc.Asset('color', 'texture', { url: '/static/assets/textures/seaside-rocks01-color.jpg' }),
@@ -17,7 +17,13 @@ class AreaLightsExample {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/area-picker.tsx b/examples/src/examples/graphics/area-picker.tsx
index 7935551e846..6f5d23a9d21 100644
--- a/examples/src/examples/graphics/area-picker.tsx
+++ b/examples/src/examples/graphics/area-picker.tsx
@@ -4,14 +4,20 @@ class AreaPickerExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Area Picker';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'bloom': new pc.Asset('bloom', 'script', { url: '/static/scripts/posteffects/posteffect-bloom.js' }),
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/asset-viewer.tsx b/examples/src/examples/graphics/asset-viewer.tsx
index 3ecb63a4533..627fbe44ead 100644
--- a/examples/src/examples/graphics/asset-viewer.tsx
+++ b/examples/src/examples/graphics/asset-viewer.tsx
@@ -17,7 +17,7 @@ class AssetViewerExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             orbitCamera: new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
@@ -30,7 +30,13 @@ class AssetViewerExample {
             checkerboard: new pc.Asset('checkerboard', 'texture', { url: '/static/assets/textures/checkboard.png' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/batching-dynamic.tsx b/examples/src/examples/graphics/batching-dynamic.tsx
index 42dc1d47b30..a01fc4b6c55 100644
--- a/examples/src/examples/graphics/batching-dynamic.tsx
+++ b/examples/src/examples/graphics/batching-dynamic.tsx
@@ -4,9 +4,15 @@ class BatchingDynamicExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Batching Dynamic';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/box-reflection.tsx b/examples/src/examples/graphics/box-reflection.tsx
index 39c8eac7fcd..6e4ee90fbd0 100644
--- a/examples/src/examples/graphics/box-reflection.tsx
+++ b/examples/src/examples/graphics/box-reflection.tsx
@@ -35,7 +35,7 @@ class BoxReflectionExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             'script1': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
@@ -44,7 +44,13 @@ class BoxReflectionExample {
             'normal': new pc.Asset('normal', 'texture', { url: '/static/assets/textures/normal-map.png' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/clustered-area-lights.tsx b/examples/src/examples/graphics/clustered-area-lights.tsx
index 476f7e1edc2..55b75421ccc 100644
--- a/examples/src/examples/graphics/clustered-area-lights.tsx
+++ b/examples/src/examples/graphics/clustered-area-lights.tsx
@@ -20,7 +20,7 @@ class AreaLightsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, data:any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data:any): void {
 
         data.set('settings', {
             material: {
@@ -38,7 +38,13 @@ class AreaLightsExample {
             'luts': new pc.Asset('luts', 'json', { url: '/static/assets/json/area-light-luts.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/clustered-lighting.tsx b/examples/src/examples/graphics/clustered-lighting.tsx
index af3df6a480d..ca751897e76 100644
--- a/examples/src/examples/graphics/clustered-lighting.tsx
+++ b/examples/src/examples/graphics/clustered-lighting.tsx
@@ -5,14 +5,20 @@ class ClusteredLightingExample {
     static NAME = 'Clustered Lighting';
     static ENGINE = 'PERFORMANCE';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
             'normal': new pc.Asset('normal', 'texture', { url: '/static/assets/textures/normal-map.png' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/clustered-omni-shadows.tsx b/examples/src/examples/graphics/clustered-omni-shadows.tsx
index 76197047aba..c56b50b6ff9 100644
--- a/examples/src/examples/graphics/clustered-omni-shadows.tsx
+++ b/examples/src/examples/graphics/clustered-omni-shadows.tsx
@@ -31,7 +31,7 @@ class ClusteredOmniShadowsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
@@ -44,7 +44,13 @@ class ClusteredOmniShadowsExample {
             "xmas_posz": new pc.Asset("xmas_posz", "texture", { url: "/static/assets/cubemaps/xmas_faces/xmas_posz.png" })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/clustered-spot-shadows.tsx b/examples/src/examples/graphics/clustered-spot-shadows.tsx
index 68f928695cb..3e6b37d19b9 100644
--- a/examples/src/examples/graphics/clustered-spot-shadows.tsx
+++ b/examples/src/examples/graphics/clustered-spot-shadows.tsx
@@ -62,7 +62,7 @@ class ClusteredSpotShadowsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
@@ -72,7 +72,13 @@ class ClusteredSpotShadowsExample {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/grab-pass.tsx b/examples/src/examples/graphics/grab-pass.tsx
index 50e067ca290..1c225df2032 100644
--- a/examples/src/examples/graphics/grab-pass.tsx
+++ b/examples/src/examples/graphics/grab-pass.tsx
@@ -75,7 +75,7 @@ class GrabPassExample {
         `
     };
 
-    example(canvas: HTMLCanvasElement, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'normal': new pc.Asset('normal', 'texture', { url: '/static/assets/textures/normal-map.png' }),
@@ -83,7 +83,13 @@ class GrabPassExample {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/ground-fog.tsx b/examples/src/examples/graphics/ground-fog.tsx
index 3cf6ee933ab..9c75b27694e 100644
--- a/examples/src/examples/graphics/ground-fog.tsx
+++ b/examples/src/examples/graphics/ground-fog.tsx
@@ -101,7 +101,7 @@ class GroundFogExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, files: { 'shader.vert': string, 'shader.frag': string }, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
@@ -110,7 +110,13 @@ class GroundFogExample {
             'texture': new pc.Asset('color', 'texture', { url: '/static/assets/textures/clouds.jpg' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/hardware-instancing.tsx b/examples/src/examples/graphics/hardware-instancing.tsx
index f0ccec556df..3a3ff7ae51e 100644
--- a/examples/src/examples/graphics/hardware-instancing.tsx
+++ b/examples/src/examples/graphics/hardware-instancing.tsx
@@ -4,13 +4,19 @@ class HardwareInstancingExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Hardware Instancing';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/hierarchy.tsx b/examples/src/examples/graphics/hierarchy.tsx
index 5096d869ed3..9049a4bdce6 100644
--- a/examples/src/examples/graphics/hierarchy.tsx
+++ b/examples/src/examples/graphics/hierarchy.tsx
@@ -4,9 +4,15 @@ class HierarchyExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Hierarchy';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/layers.tsx b/examples/src/examples/graphics/layers.tsx
index 79bff7fbbad..0a8106a9230 100644
--- a/examples/src/examples/graphics/layers.tsx
+++ b/examples/src/examples/graphics/layers.tsx
@@ -4,9 +4,15 @@ class LayersExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Layers';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/light-physical-units.tsx b/examples/src/examples/graphics/light-physical-units.tsx
index a9cf9ca393a..11f62549ad6 100644
--- a/examples/src/examples/graphics/light-physical-units.tsx
+++ b/examples/src/examples/graphics/light-physical-units.tsx
@@ -54,7 +54,7 @@ class LightPhysicalUnitsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             orbitCamera: new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
@@ -67,7 +67,13 @@ class LightPhysicalUnitsExample {
             luts: new pc.Asset('luts', 'json', { url: '/static/assets/json/area-light-luts.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/lights-baked-a-o.tsx b/examples/src/examples/graphics/lights-baked-a-o.tsx
index d88dedb76fe..99ea67a1205 100644
--- a/examples/src/examples/graphics/lights-baked-a-o.tsx
+++ b/examples/src/examples/graphics/lights-baked-a-o.tsx
@@ -68,7 +68,7 @@ class LightsBakedAOExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
@@ -76,7 +76,13 @@ class LightsBakedAOExample {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/lights-baked.tsx b/examples/src/examples/graphics/lights-baked.tsx
index 93c2a8eb0a1..c064b589a7c 100644
--- a/examples/src/examples/graphics/lights-baked.tsx
+++ b/examples/src/examples/graphics/lights-baked.tsx
@@ -4,9 +4,15 @@ class LightsBakedExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Lights Baked';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/lights.tsx b/examples/src/examples/graphics/lights.tsx
index 0a9019f3526..f5584a12bf8 100644
--- a/examples/src/examples/graphics/lights.tsx
+++ b/examples/src/examples/graphics/lights.tsx
@@ -52,7 +52,7 @@ class LightsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, data:any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data:any): void {
         function createMaterial(colors: any) {
             const material: any = new pc.StandardMaterial();
             for (const param in colors) {
@@ -73,7 +73,13 @@ class LightsExample {
             "xmas_posz": new pc.Asset("xmas_posz", "texture", { url: "/static/assets/cubemaps/xmas_faces/xmas_posz.png" })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/lines.tsx b/examples/src/examples/graphics/lines.tsx
index cd8922d97a1..4d392ada1aa 100644
--- a/examples/src/examples/graphics/lines.tsx
+++ b/examples/src/examples/graphics/lines.tsx
@@ -4,13 +4,19 @@ class LinesExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Lines';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/material-anisotropic.tsx b/examples/src/examples/graphics/material-anisotropic.tsx
index 8c45b3a653b..a4272b135d4 100644
--- a/examples/src/examples/graphics/material-anisotropic.tsx
+++ b/examples/src/examples/graphics/material-anisotropic.tsx
@@ -4,14 +4,20 @@ class LightsExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Anisotropic';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/arial.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/material-basic.tsx b/examples/src/examples/graphics/material-basic.tsx
index 30e8e392f5a..bebb27a3b2f 100644
--- a/examples/src/examples/graphics/material-basic.tsx
+++ b/examples/src/examples/graphics/material-basic.tsx
@@ -4,14 +4,20 @@ class MaterialBasicExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Basic';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/arial.json' }),
             'rocks': new pc.Asset("rocks", "texture", { url: "/static/assets/textures/seaside-rocks01-diffuse-alpha.png" })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/material-clear-coat.tsx b/examples/src/examples/graphics/material-clear-coat.tsx
index a5100fc02df..85a5b528ece 100644
--- a/examples/src/examples/graphics/material-clear-coat.tsx
+++ b/examples/src/examples/graphics/material-clear-coat.tsx
@@ -4,7 +4,7 @@ class MaterialClearCoatExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Clear Coat';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
@@ -13,7 +13,13 @@ class MaterialClearCoatExample {
             'other': new pc.Asset('other', 'texture', { url: '/static/assets/textures/flakes5o.png' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/material-physical.tsx b/examples/src/examples/graphics/material-physical.tsx
index aecd60ff16f..e1edfac1e31 100644
--- a/examples/src/examples/graphics/material-physical.tsx
+++ b/examples/src/examples/graphics/material-physical.tsx
@@ -4,14 +4,20 @@ class MaterialPhysicalExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Physical';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/arial.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/material-translucent-specular.tsx b/examples/src/examples/graphics/material-translucent-specular.tsx
index 5aed68af3f5..f8775b319a2 100644
--- a/examples/src/examples/graphics/material-translucent-specular.tsx
+++ b/examples/src/examples/graphics/material-translucent-specular.tsx
@@ -4,14 +4,20 @@ class MaterialTranslucentSpecularExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Translucent Specular';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/arial.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/mesh-decals.tsx b/examples/src/examples/graphics/mesh-decals.tsx
index cafd36c69f9..7f0d3df52a2 100644
--- a/examples/src/examples/graphics/mesh-decals.tsx
+++ b/examples/src/examples/graphics/mesh-decals.tsx
@@ -4,13 +4,19 @@ class MeshDecalsExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Decals';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'spark': new pc.Asset('spark', 'texture', { url: '/static/assets/textures/spark.png' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/mesh-deformation.tsx b/examples/src/examples/graphics/mesh-deformation.tsx
index e3f040aa02a..3cc83220928 100644
--- a/examples/src/examples/graphics/mesh-deformation.tsx
+++ b/examples/src/examples/graphics/mesh-deformation.tsx
@@ -4,14 +4,20 @@ class MeshDeformationExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Deformation';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' }),
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/mesh-generation.tsx b/examples/src/examples/graphics/mesh-generation.tsx
index 07c90ca2c51..51043bd92b6 100644
--- a/examples/src/examples/graphics/mesh-generation.tsx
+++ b/examples/src/examples/graphics/mesh-generation.tsx
@@ -4,13 +4,19 @@ class MeshGenerationExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Generation';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'playcanvasGrey': new pc.Asset('playcanvasGrey', 'texture', { url: '/static/assets/textures/playcanvas-grey.png' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/mesh-morph-many.tsx b/examples/src/examples/graphics/mesh-morph-many.tsx
index a69de98990f..7c01daff1f3 100644
--- a/examples/src/examples/graphics/mesh-morph-many.tsx
+++ b/examples/src/examples/graphics/mesh-morph-many.tsx
@@ -4,13 +4,19 @@ class MeshMorphManyExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Morph Many';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/mesh-morph.tsx b/examples/src/examples/graphics/mesh-morph.tsx
index f35d6371e34..64c5c5fdcf1 100644
--- a/examples/src/examples/graphics/mesh-morph.tsx
+++ b/examples/src/examples/graphics/mesh-morph.tsx
@@ -4,9 +4,15 @@ class MeshMorphExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Morph';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/model-asset.tsx b/examples/src/examples/graphics/model-asset.tsx
index 7d66ca0a41e..7c4876423f1 100644
--- a/examples/src/examples/graphics/model-asset.tsx
+++ b/examples/src/examples/graphics/model-asset.tsx
@@ -4,13 +4,19 @@ class ModelAssetExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Model Asset';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/model-outline.tsx b/examples/src/examples/graphics/model-outline.tsx
index e1711cab266..5b98b7b7bf4 100644
--- a/examples/src/examples/graphics/model-outline.tsx
+++ b/examples/src/examples/graphics/model-outline.tsx
@@ -4,13 +4,19 @@ class ModelOutlineExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Model Outline';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'outline': new pc.Asset('outline', 'script', { url: '/static/scripts/posteffects/posteffect-outline.js' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/model-textured-box.tsx b/examples/src/examples/graphics/model-textured-box.tsx
index f9cdfcfb59e..8a8a5b28fe9 100644
--- a/examples/src/examples/graphics/model-textured-box.tsx
+++ b/examples/src/examples/graphics/model-textured-box.tsx
@@ -4,13 +4,19 @@ class ModelTexturedBoxExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Model Textured Box';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'clouds': new pc.Asset('clouds', 'texture', { url: '/static/assets/textures/clouds.jpg' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/multi-view.tsx b/examples/src/examples/graphics/multi-view.tsx
index 358f87025d9..7f99b2004ce 100644
--- a/examples/src/examples/graphics/multi-view.tsx
+++ b/examples/src/examples/graphics/multi-view.tsx
@@ -4,7 +4,7 @@ class MultiViewExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Multi View';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // set up and load draco module, as the glb we load is draco compressed
         pc.WasmModule.setConfig('DracoDecoderModule', {
@@ -22,7 +22,13 @@ class MultiViewExample {
                 'board': new pc.Asset('statue', 'container', { url: '/static/assets/models/chess-board.glb' })
             };
 
-            pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+            const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
                 const createOptions = new pc.AppOptions();
                 createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/paint-mesh.tsx b/examples/src/examples/graphics/paint-mesh.tsx
index 98e34baa811..c8cff185f79 100644
--- a/examples/src/examples/graphics/paint-mesh.tsx
+++ b/examples/src/examples/graphics/paint-mesh.tsx
@@ -49,7 +49,7 @@ class PaintMeshExample {
             }`
     };
 
-    example(canvas: HTMLCanvasElement, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas);
diff --git a/examples/src/examples/graphics/painter.tsx b/examples/src/examples/graphics/painter.tsx
index dc8a65ba3bb..3e7a5a0ed1b 100644
--- a/examples/src/examples/graphics/painter.tsx
+++ b/examples/src/examples/graphics/painter.tsx
@@ -4,7 +4,7 @@ class PainterExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Painter';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/particles-anim-index.tsx b/examples/src/examples/graphics/particles-anim-index.tsx
index 558e9478607..a90d2adf9ca 100644
--- a/examples/src/examples/graphics/particles-anim-index.tsx
+++ b/examples/src/examples/graphics/particles-anim-index.tsx
@@ -6,7 +6,7 @@ class ParticlesAnimIndexExample {
     static NAME = 'Particles: Anim Index';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/particles-random-sprites.tsx b/examples/src/examples/graphics/particles-random-sprites.tsx
index f23cb00607a..b7380f721df 100644
--- a/examples/src/examples/graphics/particles-random-sprites.tsx
+++ b/examples/src/examples/graphics/particles-random-sprites.tsx
@@ -6,7 +6,7 @@ class ParticlesRandomSpritesExample {
     static NAME = 'Particles: Random Sprites';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/graphics/particles-snow.tsx b/examples/src/examples/graphics/particles-snow.tsx
index 9a9e56760c8..122dc62df31 100644
--- a/examples/src/examples/graphics/particles-snow.tsx
+++ b/examples/src/examples/graphics/particles-snow.tsx
@@ -6,7 +6,7 @@ class ParticlesSnowExample {
     static NAME = 'Particles: Snow';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/particles-spark.tsx b/examples/src/examples/graphics/particles-spark.tsx
index dae8fd9be80..df4f8f1f37f 100644
--- a/examples/src/examples/graphics/particles-spark.tsx
+++ b/examples/src/examples/graphics/particles-spark.tsx
@@ -6,7 +6,7 @@ class ParticlesSparkExample {
     static NAME = 'Particles: Spark';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/point-cloud-simulation.tsx b/examples/src/examples/graphics/point-cloud-simulation.tsx
index 9297b4a3c83..442d76a97ec 100644
--- a/examples/src/examples/graphics/point-cloud-simulation.tsx
+++ b/examples/src/examples/graphics/point-cloud-simulation.tsx
@@ -51,7 +51,7 @@ void main(void)
     };
 
 
-    example(canvas: HTMLCanvasElement, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
         app.start();
diff --git a/examples/src/examples/graphics/point-cloud.tsx b/examples/src/examples/graphics/point-cloud.tsx
index 35eeca1d9ff..91d4bb9c1a0 100644
--- a/examples/src/examples/graphics/point-cloud.tsx
+++ b/examples/src/examples/graphics/point-cloud.tsx
@@ -53,7 +53,7 @@ void main(void)
     };
 
 
-    example(canvas: HTMLCanvasElement, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/graphics/portal.tsx b/examples/src/examples/graphics/portal.tsx
index 03d04f80823..69cfcfb7b9e 100644
--- a/examples/src/examples/graphics/portal.tsx
+++ b/examples/src/examples/graphics/portal.tsx
@@ -5,7 +5,7 @@ class PortalExample {
     static NAME = 'Portal';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/graphics/post-effects.tsx b/examples/src/examples/graphics/post-effects.tsx
index 9207b3b25fd..0c3a73f2efc 100644
--- a/examples/src/examples/graphics/post-effects.tsx
+++ b/examples/src/examples/graphics/post-effects.tsx
@@ -79,7 +79,7 @@ class PostEffectsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         // set up and load draco module, as the glb we load is draco compressed
         pc.WasmModule.setConfig('DracoDecoderModule', {
@@ -99,7 +99,13 @@ class PostEffectsExample {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/render-asset.tsx b/examples/src/examples/graphics/render-asset.tsx
index 8a13616a0ce..744cdd21a0a 100644
--- a/examples/src/examples/graphics/render-asset.tsx
+++ b/examples/src/examples/graphics/render-asset.tsx
@@ -4,7 +4,7 @@ class RenderAssetExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Render Asset';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
@@ -12,7 +12,13 @@ class RenderAssetExample {
             'cube': new pc.Asset('cube', 'container', { url: '/static/assets/models/playcanvas-cube.glb' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/render-cubemap.tsx b/examples/src/examples/graphics/render-cubemap.tsx
index 867bb64b987..1019a4bd56a 100644
--- a/examples/src/examples/graphics/render-cubemap.tsx
+++ b/examples/src/examples/graphics/render-cubemap.tsx
@@ -4,14 +4,20 @@ class RenderCubemapExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Render Cubemap';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/utils/cubemap-renderer.js' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/render-to-texture.tsx b/examples/src/examples/graphics/render-to-texture.tsx
index fa9908bd324..e2a7fa1bb1e 100644
--- a/examples/src/examples/graphics/render-to-texture.tsx
+++ b/examples/src/examples/graphics/render-to-texture.tsx
@@ -4,7 +4,7 @@ class RenderToTextureExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Render to Texture';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Overview:
         // There are 3 layers used:
@@ -20,7 +20,13 @@ class RenderToTextureExample {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/shader-burn.tsx b/examples/src/examples/graphics/shader-burn.tsx
index 170c8ab9053..c5aa5e9b52f 100644
--- a/examples/src/examples/graphics/shader-burn.tsx
+++ b/examples/src/examples/graphics/shader-burn.tsx
@@ -41,14 +41,20 @@ void main(void)
 }`
     };
 
-    example(canvas: HTMLCanvasElement, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' }),
             'clouds': new pc.Asset('clouds', 'texture', { url: '/static/assets/textures/clouds.jpg' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/shader-compile.tsx b/examples/src/examples/graphics/shader-compile.tsx
index 6934621c494..957f0f34201 100644
--- a/examples/src/examples/graphics/shader-compile.tsx
+++ b/examples/src/examples/graphics/shader-compile.tsx
@@ -4,7 +4,7 @@ class ShaderCompileExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Shader Compile';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // This example servers as a test framework for large shader compilation speed test. Enable tracking for it.
         pc.Tracing.set(pc.TRACEID_SHADER_COMPILE, true);
diff --git a/examples/src/examples/graphics/shader-toon.tsx b/examples/src/examples/graphics/shader-toon.tsx
index ef035158165..ff0e8bcd4c3 100644
--- a/examples/src/examples/graphics/shader-toon.tsx
+++ b/examples/src/examples/graphics/shader-toon.tsx
@@ -60,13 +60,19 @@ void main(void)
 `
     };
 
-    example(canvas: HTMLCanvasElement, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/shader-wobble.tsx b/examples/src/examples/graphics/shader-wobble.tsx
index 5d1c6881154..996d1ac3f72 100644
--- a/examples/src/examples/graphics/shader-wobble.tsx
+++ b/examples/src/examples/graphics/shader-wobble.tsx
@@ -35,13 +35,19 @@ void main(void)
 }`
     };
 
-    example(canvas: HTMLCanvasElement, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/shadow-cascades.tsx b/examples/src/examples/graphics/shadow-cascades.tsx
index e43cb55ecac..2d72b2ffbf6 100644
--- a/examples/src/examples/graphics/shadow-cascades.tsx
+++ b/examples/src/examples/graphics/shadow-cascades.tsx
@@ -39,7 +39,7 @@ class ShadowCascadesExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
@@ -47,7 +47,13 @@ class ShadowCascadesExample {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/shapes.tsx b/examples/src/examples/graphics/shapes.tsx
index a53aa8c74e4..204ced1f3b3 100644
--- a/examples/src/examples/graphics/shapes.tsx
+++ b/examples/src/examples/graphics/shapes.tsx
@@ -4,9 +4,15 @@ class ShapesExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Shapes';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/graphics/texture-basis.tsx b/examples/src/examples/graphics/texture-basis.tsx
index 5cd1b5601c8..be44f4ff8ff 100644
--- a/examples/src/examples/graphics/texture-basis.tsx
+++ b/examples/src/examples/graphics/texture-basis.tsx
@@ -10,7 +10,7 @@ class TextureBasisExample {
     // The normalmap has been converted with the following arguments:
     //   basisu seaside-rocks01-normal.jpg -normal_map -swizzle gggr -renorm -q 255 -mipmap
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // initialize basis
         pc.basisInitialize({
diff --git a/examples/src/examples/graphics/transform-feedback.tsx b/examples/src/examples/graphics/transform-feedback.tsx
index 3232a7e2ef2..335f37b4ed1 100644
--- a/examples/src/examples/graphics/transform-feedback.tsx
+++ b/examples/src/examples/graphics/transform-feedback.tsx
@@ -90,7 +90,7 @@ void main(void)
     };
 
 
-    example(canvas: HTMLCanvasElement, files: { 'shaderFeedback.vert': string, 'shaderCloud.vert': string, 'shaderCloud.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shaderFeedback.vert': string, 'shaderCloud.vert': string, 'shaderCloud.frag': string }): void {
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/graphics/video-texture.tsx b/examples/src/examples/graphics/video-texture.tsx
index 1cf81c2ec87..5e19cd1420a 100644
--- a/examples/src/examples/graphics/video-texture.tsx
+++ b/examples/src/examples/graphics/video-texture.tsx
@@ -6,7 +6,7 @@ class VideoTextureExample {
     static NAME = 'Video Texture';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/input/gamepad.tsx b/examples/src/examples/input/gamepad.tsx
index c52f0516e65..5fb3cc296c7 100644
--- a/examples/src/examples/input/gamepad.tsx
+++ b/examples/src/examples/input/gamepad.tsx
@@ -4,14 +4,22 @@ class GamepadExample {
     static CATEGORY = 'Input';
     static NAME = 'Gamepad';
 
-    example(canvas: HTMLCanvasElement): void {
+
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+        // Create the application and start the update loop
 
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/input/keyboard.tsx b/examples/src/examples/input/keyboard.tsx
index 6df32ee5ad5..7e70424fa01 100644
--- a/examples/src/examples/input/keyboard.tsx
+++ b/examples/src/examples/input/keyboard.tsx
@@ -6,14 +6,20 @@ class KeyboardExample {
     static NAME = 'Keyboard';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/input/mouse.tsx b/examples/src/examples/input/mouse.tsx
index 52e7c88abd2..91539273047 100644
--- a/examples/src/examples/input/mouse.tsx
+++ b/examples/src/examples/input/mouse.tsx
@@ -6,13 +6,19 @@ class MouseExample {
     static NAME = 'Mouse';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/loaders/draco-glb.tsx b/examples/src/examples/loaders/draco-glb.tsx
index f6f8fc965df..8a9ac7df579 100644
--- a/examples/src/examples/loaders/draco-glb.tsx
+++ b/examples/src/examples/loaders/draco-glb.tsx
@@ -4,7 +4,7 @@ class DracoGlbExample {
     static CATEGORY = 'Loaders';
     static NAME = 'Draco GLB';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         pc.WasmModule.setConfig('DracoDecoderModule', {
             glueUrl: '/static/lib/draco/draco.wasm.js',
@@ -16,7 +16,13 @@ class DracoGlbExample {
 
         function demo() {
 
-            pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+            const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
                 const createOptions = new pc.AppOptions();
                 createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/loaders/glb.tsx b/examples/src/examples/loaders/glb.tsx
index 1eaf5b22b2a..fbcaa150595 100644
--- a/examples/src/examples/loaders/glb.tsx
+++ b/examples/src/examples/loaders/glb.tsx
@@ -4,7 +4,7 @@ class GlbExample {
     static CATEGORY = 'Loaders';
     static NAME = 'GLB';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // The example demonstrates loading of glb file, which contains meshes,
         // lights and cameras, and switches between the cameras every 2 seconds.
@@ -13,7 +13,13 @@ class GlbExample {
             'scene': new pc.Asset('scene', 'container', { url: '/static/assets/models/geometry-camera-light.glb' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/loaders/gltf-export.tsx b/examples/src/examples/loaders/gltf-export.tsx
index d1009053457..0c8d40e3f92 100644
--- a/examples/src/examples/loaders/gltf-export.tsx
+++ b/examples/src/examples/loaders/gltf-export.tsx
@@ -13,7 +13,7 @@ class GltfExportExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, pcx: any, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, pcx: any, data: any): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/loaders/loaders-gl.tsx b/examples/src/examples/loaders/loaders-gl.tsx
index 86eaecc2f2f..50bc0e2ef77 100644
--- a/examples/src/examples/loaders/loaders-gl.tsx
+++ b/examples/src/examples/loaders/loaders-gl.tsx
@@ -44,7 +44,7 @@ void main(void)
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
         // This example uses draco point cloud loader library from https://loaders.gl/
         // Note that many additional formats are supported by the library and can be used.
 
diff --git a/examples/src/examples/loaders/obj.tsx b/examples/src/examples/loaders/obj.tsx
index 7b778564bba..a3d6618a2fa 100644
--- a/examples/src/examples/loaders/obj.tsx
+++ b/examples/src/examples/loaders/obj.tsx
@@ -4,7 +4,7 @@ class ObjExample {
     static CATEGORY = 'Loaders';
     static NAME = 'OBJ';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/loaders/usdz-export.tsx b/examples/src/examples/loaders/usdz-export.tsx
index 947b1a969c6..0d30614a2cc 100644
--- a/examples/src/examples/loaders/usdz-export.tsx
+++ b/examples/src/examples/loaders/usdz-export.tsx
@@ -13,7 +13,7 @@ class UsdzExportExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, pcx: any, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, pcx: any, data: any): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/misc/hello-world.tsx b/examples/src/examples/misc/hello-world.tsx
index 0739a42a82e..3915f4c5405 100644
--- a/examples/src/examples/misc/hello-world.tsx
+++ b/examples/src/examples/misc/hello-world.tsx
@@ -4,7 +4,7 @@ class HelloWorldExample {
     static CATEGORY = 'Misc';
     static NAME = 'Hello World';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/misc/mini-stats.tsx b/examples/src/examples/misc/mini-stats.tsx
index 9bdedcd0f14..e0e63dcc198 100644
--- a/examples/src/examples/misc/mini-stats.tsx
+++ b/examples/src/examples/misc/mini-stats.tsx
@@ -7,7 +7,7 @@ class MiniStatsExample {
     static ENGINE = 'PERFORMANCE';
     static MINISTATS = true;
 
-    example(canvas: HTMLCanvasElement, pcx: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, pcx: any): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
         app.start();
diff --git a/examples/src/examples/misc/spineboy.tsx b/examples/src/examples/misc/spineboy.tsx
index 13606d9deb7..77713ec4eb2 100644
--- a/examples/src/examples/misc/spineboy.tsx
+++ b/examples/src/examples/misc/spineboy.tsx
@@ -4,7 +4,7 @@ class SpineboyExample {
     static CATEGORY = 'Misc';
     static NAME = 'Spineboy';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'skeleton': new pc.Asset('skeleton', 'json', { url: '/static/assets/spine/spineboy-pro.json' }),
@@ -13,7 +13,13 @@ class SpineboyExample {
             'spinescript': new pc.Asset('spinescript', 'script', { url: '/static/scripts/spine/playcanvas-spine.3.8.js' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/physics/compound-collision.tsx b/examples/src/examples/physics/compound-collision.tsx
index 925ec2a393d..623eeb8a0ce 100644
--- a/examples/src/examples/physics/compound-collision.tsx
+++ b/examples/src/examples/physics/compound-collision.tsx
@@ -4,7 +4,7 @@ class CompoundCollisionExample {
     static CATEGORY = 'Physics';
     static NAME = 'Compound Collision';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/physics/falling-shapes.tsx b/examples/src/examples/physics/falling-shapes.tsx
index 0aff6451643..4aef21bb04e 100644
--- a/examples/src/examples/physics/falling-shapes.tsx
+++ b/examples/src/examples/physics/falling-shapes.tsx
@@ -6,7 +6,7 @@ class FallingShapesExample {
     static NAME = 'Falling Shapes';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
             // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/physics/offset-collision.tsx b/examples/src/examples/physics/offset-collision.tsx
index 2297605f0a2..f4c6a5bcca9 100644
--- a/examples/src/examples/physics/offset-collision.tsx
+++ b/examples/src/examples/physics/offset-collision.tsx
@@ -5,7 +5,7 @@ class OffsetCollisionExample {
     static CATEGORY = 'Physics';
     static NAME = 'Offset Collision';
 
-    example(canvas: HTMLCanvasElement, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/physics/raycast.tsx b/examples/src/examples/physics/raycast.tsx
index e30020c5f54..19b62dae5f2 100644
--- a/examples/src/examples/physics/raycast.tsx
+++ b/examples/src/examples/physics/raycast.tsx
@@ -6,7 +6,7 @@ class RaycastExample {
     static NAME = 'Raycast';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/physics/vehicle.tsx b/examples/src/examples/physics/vehicle.tsx
index 74f5fb4a8f5..c74f82045dc 100644
--- a/examples/src/examples/physics/vehicle.tsx
+++ b/examples/src/examples/physics/vehicle.tsx
@@ -4,7 +4,7 @@ class VehicleExample {
     static CATEGORY = 'Physics';
     static NAME = 'Vehicle';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         pc.WasmModule.setConfig('Ammo', {
             glueUrl: '/static/lib/ammo/ammo.wasm.js',
@@ -24,7 +24,13 @@ class VehicleExample {
                 'script4': new pc.Asset('script4', 'script', { url: '/static/scripts/physics/vehicle.js' })
             };
 
-            pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+            const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
                 const createOptions = new pc.AppOptions();
                 createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/sound/positional.tsx b/examples/src/examples/sound/positional.tsx
index 1e4f3cd4b6b..d73d42618e8 100644
--- a/examples/src/examples/sound/positional.tsx
+++ b/examples/src/examples/sound/positional.tsx
@@ -6,7 +6,7 @@ class PositionalExample {
     static NAME = 'Positional';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/user-interface/button-basic.tsx b/examples/src/examples/user-interface/button-basic.tsx
index 632d373702f..00290c5f79a 100644
--- a/examples/src/examples/user-interface/button-basic.tsx
+++ b/examples/src/examples/user-interface/button-basic.tsx
@@ -4,13 +4,19 @@ class ButtonBasicExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Button Basic';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/user-interface/button-sprite.tsx b/examples/src/examples/user-interface/button-sprite.tsx
index 46c05314953..1cccbfb88ef 100644
--- a/examples/src/examples/user-interface/button-sprite.tsx
+++ b/examples/src/examples/user-interface/button-sprite.tsx
@@ -6,14 +6,20 @@ class ButtonSpriteExample {
     static NAME = 'Button Sprite';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' }),
             'red_button_atlas': new pc.Asset('red_button_atlas', 'texture', { url: '/static/assets/button/red_button_atlas.png' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/user-interface/custom-shader.tsx b/examples/src/examples/user-interface/custom-shader.tsx
index ca7cc34a396..af809d79e68 100644
--- a/examples/src/examples/user-interface/custom-shader.tsx
+++ b/examples/src/examples/user-interface/custom-shader.tsx
@@ -65,13 +65,19 @@ void main(void)
 }`
     };
 
-    example(canvas: HTMLCanvasElement, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             "playcanvas": new pc.Asset("playcanvas", "texture", { url: "/static/assets/textures/playcanvas.png" })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/user-interface/layout-group.tsx b/examples/src/examples/user-interface/layout-group.tsx
index c43a4d80045..5c6e5c5ad03 100644
--- a/examples/src/examples/user-interface/layout-group.tsx
+++ b/examples/src/examples/user-interface/layout-group.tsx
@@ -6,13 +6,19 @@ class LayoutGroupExample {
     static NAME = 'Layout Group';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/user-interface/particle-system.tsx b/examples/src/examples/user-interface/particle-system.tsx
index 35f62944b78..25deb7da92a 100644
--- a/examples/src/examples/user-interface/particle-system.tsx
+++ b/examples/src/examples/user-interface/particle-system.tsx
@@ -6,14 +6,20 @@ class ParticleSystemExample {
     static NAME = 'Particle System';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' }),
             'spark': new pc.Asset('spark', 'texture', { url: '/static/assets/textures/spark.png' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/user-interface/scroll-view.tsx b/examples/src/examples/user-interface/scroll-view.tsx
index 6a1b9603a05..7817bf60c1a 100644
--- a/examples/src/examples/user-interface/scroll-view.tsx
+++ b/examples/src/examples/user-interface/scroll-view.tsx
@@ -4,13 +4,19 @@ class ScrollViewExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Scroll View';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/user-interface/text-auto-font-size.tsx b/examples/src/examples/user-interface/text-auto-font-size.tsx
index 4ffec0491be..b311546f698 100644
--- a/examples/src/examples/user-interface/text-auto-font-size.tsx
+++ b/examples/src/examples/user-interface/text-auto-font-size.tsx
@@ -4,13 +4,19 @@ class TextAutoFontSizeExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Auto Font Size';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/user-interface/text-emojis.tsx b/examples/src/examples/user-interface/text-emojis.tsx
index debcc83f439..9d6e1023430 100644
--- a/examples/src/examples/user-interface/text-emojis.tsx
+++ b/examples/src/examples/user-interface/text-emojis.tsx
@@ -4,13 +4,19 @@ class TextEmojisExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Emojis';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/arial.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/user-interface/text-localization.tsx b/examples/src/examples/user-interface/text-localization.tsx
index 786eaaa7c49..602cfc46682 100644
--- a/examples/src/examples/user-interface/text-localization.tsx
+++ b/examples/src/examples/user-interface/text-localization.tsx
@@ -4,13 +4,19 @@ class TextLocalizationExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Localization';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/user-interface/text-typewriter.tsx b/examples/src/examples/user-interface/text-typewriter.tsx
index 2068fe1d011..03a9379567c 100644
--- a/examples/src/examples/user-interface/text-typewriter.tsx
+++ b/examples/src/examples/user-interface/text-typewriter.tsx
@@ -4,13 +4,19 @@ class TextTypewriterExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Typewriter';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/user-interface/text.tsx b/examples/src/examples/user-interface/text.tsx
index 948b6b8cbc8..8c52fd1d277 100644
--- a/examples/src/examples/user-interface/text.tsx
+++ b/examples/src/examples/user-interface/text.tsx
@@ -4,13 +4,19 @@ class TextExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/user-interface/world-to-screen.tsx b/examples/src/examples/user-interface/world-to-screen.tsx
index 7b296f90c8f..7ead99c07a7 100644
--- a/examples/src/examples/user-interface/world-to-screen.tsx
+++ b/examples/src/examples/user-interface/world-to-screen.tsx
@@ -6,14 +6,20 @@ class WorldToScreenExample {
     static NAME = 'World to Screen';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             "checkboard": new pc.Asset("checkboard", "texture", { url: "/static/assets/textures/checkboard.png" }),
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/user-interface/world-ui.tsx b/examples/src/examples/user-interface/world-ui.tsx
index 416be533681..fccc18c06c4 100644
--- a/examples/src/examples/user-interface/world-ui.tsx
+++ b/examples/src/examples/user-interface/world-ui.tsx
@@ -4,7 +4,7 @@ class WorldUiExample {
     static CATEGORY = 'User Interface';
     static NAME = 'World UI';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             "checkboard": new pc.Asset("checkboard", "texture", { url: "/static/assets/textures/checkboard.png" }),
@@ -12,7 +12,13 @@ class WorldUiExample {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' })
         };
 
-        pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {
+        const gfxOptions = {
+            deviceTypes: [deviceType],
+            glslangUrl: '/static/lib/glslang/glslang.js',
+            twgslUrl: '/static/lib/twgsl/twgsl.js'
+        };
+
+        pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {
 
             const createOptions = new pc.AppOptions();
             createOptions.graphicsDevice = device;
diff --git a/examples/src/examples/xr/ar-basic.tsx b/examples/src/examples/xr/ar-basic.tsx
index f559076c86a..5df59dec2f6 100644
--- a/examples/src/examples/xr/ar-basic.tsx
+++ b/examples/src/examples/xr/ar-basic.tsx
@@ -4,7 +4,7 @@ class ArBasicExample {
     static CATEGORY = 'XR';
     static NAME = 'AR Basic';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/ar-hit-test.tsx b/examples/src/examples/xr/ar-hit-test.tsx
index be609042bb4..2643617f2b0 100644
--- a/examples/src/examples/xr/ar-hit-test.tsx
+++ b/examples/src/examples/xr/ar-hit-test.tsx
@@ -4,7 +4,7 @@ class ArHitTestExample {
     static CATEGORY = 'XR';
     static NAME = 'AR Hit Test';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-basic.tsx b/examples/src/examples/xr/vr-basic.tsx
index 3a07fb5b917..88955d4bf94 100644
--- a/examples/src/examples/xr/vr-basic.tsx
+++ b/examples/src/examples/xr/vr-basic.tsx
@@ -4,7 +4,7 @@ class VrBasicExample {
     static CATEGORY = 'XR';
     static NAME = 'VR Basic';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-controllers.tsx b/examples/src/examples/xr/vr-controllers.tsx
index 2063460148d..725ef892ee4 100644
--- a/examples/src/examples/xr/vr-controllers.tsx
+++ b/examples/src/examples/xr/vr-controllers.tsx
@@ -6,7 +6,7 @@ class VrControllersExample {
     static NAME = 'VR Controllers';
 
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-hands.tsx b/examples/src/examples/xr/vr-hands.tsx
index 6dc42de17d7..7c11f8e35c6 100644
--- a/examples/src/examples/xr/vr-hands.tsx
+++ b/examples/src/examples/xr/vr-hands.tsx
@@ -4,7 +4,7 @@ class VrHandsExample {
     static CATEGORY = 'XR';
     static NAME = 'VR Hands';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-movement.tsx b/examples/src/examples/xr/vr-movement.tsx
index c4024ebee0d..d6f81ed7a71 100644
--- a/examples/src/examples/xr/vr-movement.tsx
+++ b/examples/src/examples/xr/vr-movement.tsx
@@ -4,7 +4,7 @@ class VrMovementExample {
     static CATEGORY = 'XR';
     static NAME = 'VR Movement';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/xr-picking.tsx b/examples/src/examples/xr/xr-picking.tsx
index e9a8f69a7bc..147b7b0ec37 100644
--- a/examples/src/examples/xr/xr-picking.tsx
+++ b/examples/src/examples/xr/xr-picking.tsx
@@ -4,7 +4,7 @@ class XrPickingExample {
     static CATEGORY = 'XR';
     static NAME = 'XR Picking';
 
-    example(canvas: HTMLCanvasElement): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {

From 8dff7e03cff71548b0aadd82f7f3ed04c8625784 Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Thu, 2 Mar 2023 16:49:32 +0000
Subject: [PATCH 04/14] ui fixes

---
 examples/src/app/code-editor.tsx |  3 ++-
 examples/src/app/example.tsx     |  8 ++++++--
 examples/src/static/styles.css   | 16 +++++++++-------
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/examples/src/app/code-editor.tsx b/examples/src/app/code-editor.tsx
index 94ec3e7df68..641fdedea3c 100644
--- a/examples/src/app/code-editor.tsx
+++ b/examples/src/app/code-editor.tsx
@@ -140,7 +140,8 @@ const CodeEditor = (props: CodeEditorProps) => {
             options={{
                 scrollbar: {
                     horizontal: 'visible'
-                }
+                },
+                readOnly: false
             }}
         />
     </Panel>;
diff --git a/examples/src/app/example.tsx b/examples/src/app/example.tsx
index 701cb6f83be..e544fb8cc97 100644
--- a/examples/src/app/example.tsx
+++ b/examples/src/app/example.tsx
@@ -20,7 +20,8 @@ const controlsObserver = new Observer();
 const Controls = (props: any) => {
     const controlsFunction = (examples as any).paths[props.path].example.prototype.controls;
     const controls = controlsFunction ? (examples as any).paths[props.path].example.prototype.controls((window as any).observerData).props.children : null;
-    if (!controls) return null;
+    // on desktop dont show the control panel when no controls are present
+    if (!controls && window.top.innerWidth > 600) return null;
     return <ControlPanel controls={controls} files={props.files} />;
 };
 interface ControlLoaderProps {
@@ -168,7 +169,10 @@ class Example extends Component <ExampleProps, ExampleState> {
     }
 
     shouldComponentUpdate(nextProps: Readonly<ExampleProps>): boolean {
-        return this.props.match.params.category !== nextProps.match.params.category || this.props.match.params.example !== nextProps.match.params.example || this.props.files !== nextProps.files;
+        const updateMobileOnFileChange = () => {
+            return window.top.innerWidth < 601 && this.props.files !== nextProps.files;
+        };
+        return this.props.match.params.category !== nextProps.match.params.category || this.props.match.params.example !== nextProps.match.params.example || updateMobileOnFileChange();
     }
 
     componentDidUpdate() {
diff --git a/examples/src/static/styles.css b/examples/src/static/styles.css
index f9bc17b4eb3..1b7287806e6 100644
--- a/examples/src/static/styles.css
+++ b/examples/src/static/styles.css
@@ -401,14 +401,16 @@ body {
     background-color: #364346;
 }
 
-#controls-wrapper {
-    position: absolute;
-    width: 100%;
-    height: calc(100% - 48px);
-}
+@media only screen and (max-width: 600px) {
+    #controls-wrapper {
+        position: absolute;
+        width: 100%;
+        height: calc(100% - 48px);
+    }
 
-#controls-wrapper.has-controls {
-    height: calc(100% - 100px);
+    #controls-wrapper.has-controls {
+        height: calc(100% - 100px);
+    }
 }
 
 #deviceTypeSelectInput {

From c9e5962f6a19df4ffa46af55f0bed40f0940c021 Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Mon, 13 Mar 2023 09:49:55 +0000
Subject: [PATCH 05/14] fix for examples tsd

---
 examples/src/app/example.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/examples/src/app/example.tsx b/examples/src/app/example.tsx
index e544fb8cc97..92cb9ecb363 100644
--- a/examples/src/app/example.tsx
+++ b/examples/src/app/example.tsx
@@ -6,9 +6,11 @@ import examples from './helpers/example-data.mjs';
 // @ts-ignore: library file import
 import { withRouter } from 'react-router-dom';
 import ControlPanel from './control-panel';
-import { Application, DEVICETYPE_WEBGPU, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGL1 } from '../../../build/playcanvas';
 import { Observer } from '@playcanvas/observer';
 
+const DEVICETYPE_WEBGL1 = 'webgl1';
+const DEVICETYPE_WEBGL2 = 'webgl2';
+const DEVICETYPE_WEBGPU = 'webgpu';
 const deviceTypeNames = {
     [DEVICETYPE_WEBGL1]: 'WebGL 1',
     [DEVICETYPE_WEBGL2]: 'WebGL 2',
@@ -56,7 +58,7 @@ class ControlLoader extends Component <ControlLoaderProps, ControlLoaderState> {
             function appCreationPoll() {
                 if ((window as any).pc.app) {
                     clearInterval(pollHandler);
-                    const app: Application = (window as any).pc.app;
+                    const app: { graphicsDevice: { activeDeviceType: string } } = (window as any).pc.app;
                     const activeDevice = app.graphicsDevice.activeDeviceType;
                     controlsObserver.emit('updateActiveDevice', activeDevice);
                 }

From aed300c279351c1ce0e3448608b42cc9178105ff Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Mon, 13 Mar 2023 11:45:18 +0000
Subject: [PATCH 06/14] add a webgpu enabled property to examples

---
 examples/scripts/iframe/index.mjs              | 1 +
 examples/scripts/iframe/index.mustache         | 8 +++++++-
 examples/src/app/example.tsx                   | 4 ++--
 examples/src/app/helpers/formatters.mjs        | 8 ++++++++
 examples/src/examples/graphics/area-lights.tsx | 1 +
 5 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/examples/scripts/iframe/index.mjs b/examples/scripts/iframe/index.mjs
index 62b400f7dcf..09a494044c3 100644
--- a/examples/scripts/iframe/index.mjs
+++ b/examples/scripts/iframe/index.mjs
@@ -53,6 +53,7 @@ function buildExample(category, filename) {
     fs.writeFileSync(`${MAIN_DIR}/dist/iframe/${category}/${filename.replace(".tsx", "")}.html`, loadHtmlTemplate({
         exampleClass: exampleClass,
         enginePath: process.env.ENGINE_PATH || enginePath,
+        webgpuEnabled: formatters.getWebgpuEnabledFromClass(exampleClass),
         miniStats: !formatters.classIncludesMiniStats(exampleClass)
     }));
 }
diff --git a/examples/scripts/iframe/index.mustache b/examples/scripts/iframe/index.mustache
index 81ab9364b82..d8bcf87b0a8 100644
--- a/examples/scripts/iframe/index.mustache
+++ b/examples/scripts/iframe/index.mustache
@@ -182,7 +182,13 @@
                 } else if (arg === 'pcx') {
                     return pcx;
                 } else if (arg === 'deviceType') {
-                    return window.top.preferredGraphicsDevice || 'webgpu';
+                    if ({{{webgpuEnabled}}}) {
+                        return window.top.preferredGraphicsDevice || 'webgpu';
+                    } else if (['webgl1', 'webgl2'].includes(window.top.preferredGraphicsDevice)) {
+                        return window.top.preferredGraphicsDevice;
+                    } else {
+                        return 'webgl2';
+                    }
                 }
             });
             window.exampleFunction.apply(this, args);
diff --git a/examples/src/app/example.tsx b/examples/src/app/example.tsx
index 92cb9ecb363..8031538fc14 100644
--- a/examples/src/app/example.tsx
+++ b/examples/src/app/example.tsx
@@ -118,11 +118,11 @@ class Example extends Component <ExampleProps, ExampleState> {
     }
 
     set preferredGraphicsDevice(value: string) {
-        (window as any).prefferedGraphicsDevice = value;
+        (window as any).preferredGraphicsDevice = value;
     }
 
     get preferredGraphicsDevice() {
-        return (window as any).prefferedGraphicsDevice;
+        return (window as any).preferredGraphicsDevice;
     }
 
     setDisabledOptions = (preferredDevice = 'webgpu', activeDevice: string) => {
diff --git a/examples/src/app/helpers/formatters.mjs b/examples/src/app/helpers/formatters.mjs
index eebe13a4baf..86e27ddb5f2 100644
--- a/examples/src/app/helpers/formatters.mjs
+++ b/examples/src/app/helpers/formatters.mjs
@@ -72,6 +72,13 @@ const getEngineTypeFromClass = (text) => {
     return null;
 };
 
+const getWebgpuEnabledFromClass = (text) => {
+    if (text.indexOf(`_defineProperty(Example, "WEBGPU_ENABLED", true);`) !== -1) {
+        return true;
+    }
+    return false;
+};
+
 const classIncludesMiniStats = (text) => {
     return text.includes('_defineProperty(Example, "MINISTATS", true);');
 };
@@ -90,6 +97,7 @@ export default {
     getInnerFunctionText: getInnerFunctionText,
     getExampleClassFromTextFile: getExampleClassFromTextFile,
     getEngineTypeFromClass: getEngineTypeFromClass,
+    getWebgpuEnabledFromClass: getWebgpuEnabledFromClass,
     retrieveStaticObject: retrieveStaticObject,
     classIncludesMiniStats: classIncludesMiniStats
 };
diff --git a/examples/src/examples/graphics/area-lights.tsx b/examples/src/examples/graphics/area-lights.tsx
index 519395a4fcf..3696a0119ff 100644
--- a/examples/src/examples/graphics/area-lights.tsx
+++ b/examples/src/examples/graphics/area-lights.tsx
@@ -4,6 +4,7 @@ import * as pc from '../../../../';
 class AreaLightsExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Area Lights';
+    static WEBGPU_ENABLED = true;
 
 
     example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {

From 818a8d71f11c52587d646cc2b53a01d1019ec9a7 Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Mon, 13 Mar 2023 15:53:33 +0000
Subject: [PATCH 07/14] create a device type enum

---
 examples/src/app/example.tsx                  | 41 ++++++++++---------
 examples/src/app/helpers/formatters.mjs       |  2 +-
 .../src/examples/animation/blend-trees-1d.tsx |  2 +-
 .../animation/blend-trees-2d-cartesian.tsx    |  2 +-
 .../animation/blend-trees-2d-directional.tsx  |  2 +-
 .../animation/component-properties.tsx        |  2 +-
 examples/src/examples/animation/events.tsx    |  2 +-
 .../src/examples/animation/layer-masks.tsx    |  2 +-
 .../src/examples/animation/locomotion.tsx     |  2 +-
 examples/src/examples/animation/tween.tsx     |  2 +-
 examples/src/examples/camera/first-person.tsx |  2 +-
 examples/src/examples/camera/fly.tsx          |  2 +-
 examples/src/examples/camera/orbit.tsx        |  2 +-
 .../src/examples/graphics/area-lights.tsx     |  2 +-
 .../src/examples/graphics/area-picker.tsx     |  2 +-
 .../src/examples/graphics/asset-viewer.tsx    |  2 +-
 .../examples/graphics/batching-dynamic.tsx    |  2 +-
 .../src/examples/graphics/box-reflection.tsx  |  2 +-
 .../graphics/clustered-area-lights.tsx        |  2 +-
 .../examples/graphics/clustered-lighting.tsx  |  2 +-
 .../graphics/clustered-omni-shadows.tsx       |  2 +-
 .../graphics/clustered-spot-shadows.tsx       |  2 +-
 examples/src/examples/graphics/grab-pass.tsx  |  2 +-
 examples/src/examples/graphics/ground-fog.tsx |  2 +-
 .../examples/graphics/hardware-instancing.tsx |  2 +-
 examples/src/examples/graphics/hierarchy.tsx  |  2 +-
 examples/src/examples/graphics/layers.tsx     |  2 +-
 .../graphics/light-physical-units.tsx         |  2 +-
 .../examples/graphics/lights-baked-a-o.tsx    |  2 +-
 .../src/examples/graphics/lights-baked.tsx    |  2 +-
 examples/src/examples/graphics/lights.tsx     |  2 +-
 examples/src/examples/graphics/lines.tsx      |  2 +-
 .../graphics/material-anisotropic.tsx         |  2 +-
 .../src/examples/graphics/material-basic.tsx  |  2 +-
 .../examples/graphics/material-clear-coat.tsx |  2 +-
 .../examples/graphics/material-physical.tsx   |  2 +-
 .../material-translucent-specular.tsx         |  2 +-
 .../src/examples/graphics/mesh-decals.tsx     |  2 +-
 .../examples/graphics/mesh-deformation.tsx    |  2 +-
 .../src/examples/graphics/mesh-generation.tsx |  2 +-
 .../src/examples/graphics/mesh-morph-many.tsx |  2 +-
 examples/src/examples/graphics/mesh-morph.tsx |  2 +-
 .../src/examples/graphics/model-asset.tsx     |  2 +-
 .../src/examples/graphics/model-outline.tsx   |  2 +-
 .../examples/graphics/model-textured-box.tsx  |  2 +-
 examples/src/examples/graphics/multi-view.tsx |  2 +-
 examples/src/examples/graphics/paint-mesh.tsx |  2 +-
 examples/src/examples/graphics/painter.tsx    |  2 +-
 .../graphics/particles-anim-index.tsx         |  2 +-
 .../graphics/particles-random-sprites.tsx     |  2 +-
 .../src/examples/graphics/particles-snow.tsx  |  2 +-
 .../src/examples/graphics/particles-spark.tsx |  2 +-
 .../graphics/point-cloud-simulation.tsx       |  2 +-
 .../src/examples/graphics/point-cloud.tsx     |  2 +-
 examples/src/examples/graphics/portal.tsx     |  2 +-
 .../src/examples/graphics/post-effects.tsx    |  2 +-
 .../src/examples/graphics/render-asset.tsx    |  2 +-
 .../src/examples/graphics/render-cubemap.tsx  |  2 +-
 .../examples/graphics/render-to-texture.tsx   |  2 +-
 .../src/examples/graphics/shader-burn.tsx     |  2 +-
 .../src/examples/graphics/shader-compile.tsx  |  2 +-
 .../src/examples/graphics/shader-toon.tsx     |  2 +-
 .../src/examples/graphics/shader-wobble.tsx   |  2 +-
 .../src/examples/graphics/shadow-cascades.tsx |  2 +-
 examples/src/examples/graphics/shapes.tsx     |  2 +-
 .../src/examples/graphics/texture-basis.tsx   |  2 +-
 .../examples/graphics/transform-feedback.tsx  |  2 +-
 .../src/examples/graphics/video-texture.tsx   |  2 +-
 examples/src/examples/input/gamepad.tsx       |  2 +-
 examples/src/examples/input/keyboard.tsx      |  2 +-
 examples/src/examples/input/mouse.tsx         |  2 +-
 examples/src/examples/loaders/draco-glb.tsx   |  2 +-
 examples/src/examples/loaders/glb.tsx         |  2 +-
 examples/src/examples/loaders/gltf-export.tsx |  2 +-
 examples/src/examples/loaders/loaders-gl.tsx  |  2 +-
 examples/src/examples/loaders/obj.tsx         |  2 +-
 examples/src/examples/loaders/usdz-export.tsx |  2 +-
 examples/src/examples/misc/hello-world.tsx    |  2 +-
 examples/src/examples/misc/mini-stats.tsx     |  2 +-
 examples/src/examples/misc/spineboy.tsx       |  2 +-
 .../examples/physics/compound-collision.tsx   |  2 +-
 .../src/examples/physics/falling-shapes.tsx   |  2 +-
 .../src/examples/physics/offset-collision.tsx |  2 +-
 examples/src/examples/physics/raycast.tsx     |  2 +-
 examples/src/examples/physics/vehicle.tsx     |  2 +-
 examples/src/examples/sound/positional.tsx    |  2 +-
 .../examples/user-interface/button-basic.tsx  |  2 +-
 .../examples/user-interface/button-sprite.tsx |  2 +-
 .../examples/user-interface/custom-shader.tsx |  2 +-
 .../examples/user-interface/layout-group.tsx  |  2 +-
 .../user-interface/particle-system.tsx        |  2 +-
 .../examples/user-interface/scroll-view.tsx   |  2 +-
 .../user-interface/text-auto-font-size.tsx    |  2 +-
 .../examples/user-interface/text-emojis.tsx   |  2 +-
 .../user-interface/text-localization.tsx      |  2 +-
 .../user-interface/text-typewriter.tsx        |  2 +-
 examples/src/examples/user-interface/text.tsx |  2 +-
 .../user-interface/world-to-screen.tsx        |  2 +-
 .../src/examples/user-interface/world-ui.tsx  |  2 +-
 examples/src/examples/xr/ar-basic.tsx         |  2 +-
 examples/src/examples/xr/ar-hit-test.tsx      |  2 +-
 examples/src/examples/xr/vr-basic.tsx         |  2 +-
 examples/src/examples/xr/vr-controllers.tsx   |  2 +-
 examples/src/examples/xr/vr-hands.tsx         |  2 +-
 examples/src/examples/xr/vr-movement.tsx      |  2 +-
 examples/src/examples/xr/xr-picking.tsx       |  2 +-
 examples/webgpu-temp/four.html                |  4 +-
 examples/webgpu-temp/one.html                 |  4 +-
 examples/webgpu-temp/three.html               |  4 +-
 examples/webgpu-temp/two.html                 |  4 +-
 src/platform/graphics/constants.js            | 12 ++++++
 .../graphics/graphics-device-create.js        | 26 ++++++------
 src/platform/graphics/graphics-device.js      |  4 +-
 .../graphics/webgl/webgl-graphics-device.js   |  7 ++--
 .../graphics/webgpu/webgpu-graphics-device.js |  4 +-
 115 files changed, 167 insertions(+), 153 deletions(-)

diff --git a/examples/src/app/example.tsx b/examples/src/app/example.tsx
index 8031538fc14..65254734ec9 100644
--- a/examples/src/app/example.tsx
+++ b/examples/src/app/example.tsx
@@ -8,13 +8,16 @@ import { withRouter } from 'react-router-dom';
 import ControlPanel from './control-panel';
 import { Observer } from '@playcanvas/observer';
 
-const DEVICETYPE_WEBGL1 = 'webgl1';
-const DEVICETYPE_WEBGL2 = 'webgl2';
-const DEVICETYPE_WEBGPU = 'webgpu';
+const DEVICETYPE = {
+    WEBGL1: 'webgl1',
+    WEBGL2: 'webgl2',
+    WEBGPU: 'webgpu'
+};
+
 const deviceTypeNames = {
-    [DEVICETYPE_WEBGL1]: 'WebGL 1',
-    [DEVICETYPE_WEBGL2]: 'WebGL 2',
-    [DEVICETYPE_WEBGPU]: 'WebGPU'
+    [DEVICETYPE.WEBGL1]: 'WebGL 1',
+    [DEVICETYPE.WEBGL2]: 'WebGL 2',
+    [DEVICETYPE.WEBGPU]: 'WebGPU'
 };
 
 const controlsObserver = new Observer();
@@ -127,21 +130,21 @@ class Example extends Component <ExampleProps, ExampleState> {
 
     setDisabledOptions = (preferredDevice = 'webgpu', activeDevice: string) => {
         const selectInput = this.deviceTypeSelectInput;
-        if ((preferredDevice === DEVICETYPE_WEBGL2 || preferredDevice === DEVICETYPE_WEBGPU) && activeDevice === DEVICETYPE_WEBGL1) {
-            selectInput.fallbackOrder = [DEVICETYPE_WEBGPU, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGL1];
+        if ((preferredDevice === DEVICETYPE.WEBGL2 || preferredDevice === DEVICETYPE.WEBGPU) && activeDevice === DEVICETYPE.WEBGL1) {
+            selectInput.fallbackOrder = [DEVICETYPE.WEBGPU, DEVICETYPE.WEBGL2, DEVICETYPE.WEBGL1];
             selectInput.disabledOptions = {
-                [DEVICETYPE_WEBGPU]: 'WebGPU (not supported)',
-                [DEVICETYPE_WEBGL2]: 'WebGL 2 (not supported)'
+                [DEVICETYPE.WEBGPU]: 'WebGPU (not supported)',
+                [DEVICETYPE.WEBGL2]: 'WebGL 2 (not supported)'
             };
-        } else if (preferredDevice === DEVICETYPE_WEBGL1 && activeDevice === DEVICETYPE_WEBGL2) {
-            selectInput.fallbackOrder = [DEVICETYPE_WEBGL1, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGPU];
+        } else if (preferredDevice === DEVICETYPE.WEBGL1 && activeDevice === DEVICETYPE.WEBGL2) {
+            selectInput.fallbackOrder = [DEVICETYPE.WEBGL1, DEVICETYPE.WEBGL2, DEVICETYPE.WEBGPU];
             selectInput.disabledOptions = {
-                [DEVICETYPE_WEBGL1]: 'WebGL 1 (not supported)'
+                [DEVICETYPE.WEBGL1]: 'WebGL 1 (not supported)'
             };
-        } else if (preferredDevice === DEVICETYPE_WEBGPU && activeDevice !== DEVICETYPE_WEBGPU) {
-            selectInput.fallbackOrder = [DEVICETYPE_WEBGPU, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGL1];
+        } else if (preferredDevice === DEVICETYPE.WEBGPU && activeDevice !== DEVICETYPE.WEBGPU) {
+            selectInput.fallbackOrder = [DEVICETYPE.WEBGPU, DEVICETYPE.WEBGL2, DEVICETYPE.WEBGL1];
             selectInput.disabledOptions = {
-                [DEVICETYPE_WEBGPU]: 'WebGPU (not supported)'
+                [DEVICETYPE.WEBGPU]: 'WebGPU (not supported)'
             };
         } else {
             selectInput.disabledOptions = null;
@@ -192,9 +195,9 @@ class Example extends Component <ExampleProps, ExampleState> {
                 <SelectInput
                     id='deviceTypeSelectInput'
                     options={[
-                        { t: deviceTypeNames[DEVICETYPE_WEBGL1], v: DEVICETYPE_WEBGL1 },
-                        { t: deviceTypeNames[DEVICETYPE_WEBGL2], v: DEVICETYPE_WEBGL2 },
-                        { t: deviceTypeNames[DEVICETYPE_WEBGPU], v: DEVICETYPE_WEBGPU }
+                        { t: deviceTypeNames[DEVICETYPE.WEBGL1], v: DEVICETYPE.WEBGL1 },
+                        { t: deviceTypeNames[DEVICETYPE.WEBGL2], v: DEVICETYPE.WEBGL2 },
+                        { t: deviceTypeNames[DEVICETYPE.WEBGPU], v: DEVICETYPE.WEBGPU }
                     ]}
                     onSelect={this.onSetPreferredGraphicsDevice}
                     prefix='Active Device: '
diff --git a/examples/src/app/helpers/formatters.mjs b/examples/src/app/helpers/formatters.mjs
index 86e27ddb5f2..cf78aea7d52 100644
--- a/examples/src/app/helpers/formatters.mjs
+++ b/examples/src/app/helpers/formatters.mjs
@@ -14,7 +14,7 @@ const findClosingBracketMatchIndex = (str, pos) => {
 
 const getTypeScriptFunctionFromText = (text) => {
     const transformedCode = text;
-    const functionSignatureStartString = 'example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2';
+    const functionSignatureStartString = 'example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE';
     const indexOfFunctionSignatureStart = transformedCode.indexOf(functionSignatureStartString);
     const functionSignatureEndString = '): void ';
     const indexOfFunctionSignatureEnd = indexOfFunctionSignatureStart + transformedCode.substring(indexOfFunctionSignatureStart).indexOf(functionSignatureEndString) + functionSignatureEndString.length;
diff --git a/examples/src/examples/animation/blend-trees-1d.tsx b/examples/src/examples/animation/blend-trees-1d.tsx
index 1de32bd5c30..4a83bd41bd9 100644
--- a/examples/src/examples/animation/blend-trees-1d.tsx
+++ b/examples/src/examples/animation/blend-trees-1d.tsx
@@ -16,7 +16,7 @@ class BlendTrees1DExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
 
         const assets = {
             'model': new pc.Asset('model', 'container', { url: '/static/assets/models/bitmoji.glb' }),
diff --git a/examples/src/examples/animation/blend-trees-2d-cartesian.tsx b/examples/src/examples/animation/blend-trees-2d-cartesian.tsx
index 745b1c9e3ee..139cfd45e1a 100644
--- a/examples/src/examples/animation/blend-trees-2d-cartesian.tsx
+++ b/examples/src/examples/animation/blend-trees-2d-cartesian.tsx
@@ -89,7 +89,7 @@ class BlendTrees2DCartesianExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/blend-trees-2d-directional.tsx b/examples/src/examples/animation/blend-trees-2d-directional.tsx
index 93718f03261..0f1fbc60e06 100644
--- a/examples/src/examples/animation/blend-trees-2d-directional.tsx
+++ b/examples/src/examples/animation/blend-trees-2d-directional.tsx
@@ -80,7 +80,7 @@ class BlendTrees2DDirectionalExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/component-properties.tsx b/examples/src/examples/animation/component-properties.tsx
index c97305059d3..5afc507c842 100644
--- a/examples/src/examples/animation/component-properties.tsx
+++ b/examples/src/examples/animation/component-properties.tsx
@@ -16,7 +16,7 @@ class ComponentPropertiesExample {
     }
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/events.tsx b/examples/src/examples/animation/events.tsx
index 5546e88b554..07c47d398f4 100644
--- a/examples/src/examples/animation/events.tsx
+++ b/examples/src/examples/animation/events.tsx
@@ -4,7 +4,7 @@ class EventsExample {
     static CATEGORY = 'Animation';
     static NAME = 'Events';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/layer-masks.tsx b/examples/src/examples/animation/layer-masks.tsx
index 60a7f5fc837..2537de1ace5 100644
--- a/examples/src/examples/animation/layer-masks.tsx
+++ b/examples/src/examples/animation/layer-masks.tsx
@@ -38,7 +38,7 @@ class LayerMasksExample {
     }
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
             touch: new pc.TouchDevice(document.body)
diff --git a/examples/src/examples/animation/locomotion.tsx b/examples/src/examples/animation/locomotion.tsx
index 4894fe91b17..6aa1f0ce6c2 100644
--- a/examples/src/examples/animation/locomotion.tsx
+++ b/examples/src/examples/animation/locomotion.tsx
@@ -18,7 +18,7 @@ class LocomotionExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/animation/tween.tsx b/examples/src/examples/animation/tween.tsx
index 1ee6882a5de..405221edc85 100644
--- a/examples/src/examples/animation/tween.tsx
+++ b/examples/src/examples/animation/tween.tsx
@@ -12,7 +12,7 @@ class TweenExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
         app.start();
diff --git a/examples/src/examples/camera/first-person.tsx b/examples/src/examples/camera/first-person.tsx
index 76bcd117254..d1b80b5ce31 100644
--- a/examples/src/examples/camera/first-person.tsx
+++ b/examples/src/examples/camera/first-person.tsx
@@ -6,7 +6,7 @@ class FirstPersonExample {
     static NAME = 'First Person';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/camera/fly.tsx b/examples/src/examples/camera/fly.tsx
index 43258beb04e..f26cb8b383a 100644
--- a/examples/src/examples/camera/fly.tsx
+++ b/examples/src/examples/camera/fly.tsx
@@ -6,7 +6,7 @@ class FlyExample {
     static NAME = 'Fly';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/camera/orbit.tsx b/examples/src/examples/camera/orbit.tsx
index 4b2d08affdf..3f7e727482c 100644
--- a/examples/src/examples/camera/orbit.tsx
+++ b/examples/src/examples/camera/orbit.tsx
@@ -6,7 +6,7 @@ class OrbitExample {
     static NAME = 'Orbit';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/graphics/area-lights.tsx b/examples/src/examples/graphics/area-lights.tsx
index 3696a0119ff..e8d233006c6 100644
--- a/examples/src/examples/graphics/area-lights.tsx
+++ b/examples/src/examples/graphics/area-lights.tsx
@@ -7,7 +7,7 @@ class AreaLightsExample {
     static WEBGPU_ENABLED = true;
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'color': new pc.Asset('color', 'texture', { url: '/static/assets/textures/seaside-rocks01-color.jpg' }),
diff --git a/examples/src/examples/graphics/area-picker.tsx b/examples/src/examples/graphics/area-picker.tsx
index 6f5d23a9d21..906a4277807 100644
--- a/examples/src/examples/graphics/area-picker.tsx
+++ b/examples/src/examples/graphics/area-picker.tsx
@@ -4,7 +4,7 @@ class AreaPickerExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Area Picker';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'bloom': new pc.Asset('bloom', 'script', { url: '/static/scripts/posteffects/posteffect-bloom.js' }),
diff --git a/examples/src/examples/graphics/asset-viewer.tsx b/examples/src/examples/graphics/asset-viewer.tsx
index 627fbe44ead..c41ac57f5fb 100644
--- a/examples/src/examples/graphics/asset-viewer.tsx
+++ b/examples/src/examples/graphics/asset-viewer.tsx
@@ -17,7 +17,7 @@ class AssetViewerExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
 
         const assets = {
             orbitCamera: new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/batching-dynamic.tsx b/examples/src/examples/graphics/batching-dynamic.tsx
index a01fc4b6c55..60fb13390c3 100644
--- a/examples/src/examples/graphics/batching-dynamic.tsx
+++ b/examples/src/examples/graphics/batching-dynamic.tsx
@@ -4,7 +4,7 @@ class BatchingDynamicExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Batching Dynamic';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/box-reflection.tsx b/examples/src/examples/graphics/box-reflection.tsx
index 6e4ee90fbd0..83777cbb485 100644
--- a/examples/src/examples/graphics/box-reflection.tsx
+++ b/examples/src/examples/graphics/box-reflection.tsx
@@ -35,7 +35,7 @@ class BoxReflectionExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
 
         const assets = {
             'script1': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/clustered-area-lights.tsx b/examples/src/examples/graphics/clustered-area-lights.tsx
index 55b75421ccc..eb6709a1597 100644
--- a/examples/src/examples/graphics/clustered-area-lights.tsx
+++ b/examples/src/examples/graphics/clustered-area-lights.tsx
@@ -20,7 +20,7 @@ class AreaLightsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data:any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data:any): void {
 
         data.set('settings', {
             material: {
diff --git a/examples/src/examples/graphics/clustered-lighting.tsx b/examples/src/examples/graphics/clustered-lighting.tsx
index ca751897e76..16ce52c573a 100644
--- a/examples/src/examples/graphics/clustered-lighting.tsx
+++ b/examples/src/examples/graphics/clustered-lighting.tsx
@@ -5,7 +5,7 @@ class ClusteredLightingExample {
     static NAME = 'Clustered Lighting';
     static ENGINE = 'PERFORMANCE';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/clustered-omni-shadows.tsx b/examples/src/examples/graphics/clustered-omni-shadows.tsx
index c56b50b6ff9..5db56dc93f4 100644
--- a/examples/src/examples/graphics/clustered-omni-shadows.tsx
+++ b/examples/src/examples/graphics/clustered-omni-shadows.tsx
@@ -31,7 +31,7 @@ class ClusteredOmniShadowsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/clustered-spot-shadows.tsx b/examples/src/examples/graphics/clustered-spot-shadows.tsx
index 3e6b37d19b9..b2ffeccc9e4 100644
--- a/examples/src/examples/graphics/clustered-spot-shadows.tsx
+++ b/examples/src/examples/graphics/clustered-spot-shadows.tsx
@@ -62,7 +62,7 @@ class ClusteredSpotShadowsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/grab-pass.tsx b/examples/src/examples/graphics/grab-pass.tsx
index 1c225df2032..da3d7f971d6 100644
--- a/examples/src/examples/graphics/grab-pass.tsx
+++ b/examples/src/examples/graphics/grab-pass.tsx
@@ -75,7 +75,7 @@ class GrabPassExample {
         `
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'normal': new pc.Asset('normal', 'texture', { url: '/static/assets/textures/normal-map.png' }),
diff --git a/examples/src/examples/graphics/ground-fog.tsx b/examples/src/examples/graphics/ground-fog.tsx
index 9c75b27694e..96822c8cf99 100644
--- a/examples/src/examples/graphics/ground-fog.tsx
+++ b/examples/src/examples/graphics/ground-fog.tsx
@@ -101,7 +101,7 @@ class GroundFogExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/hardware-instancing.tsx b/examples/src/examples/graphics/hardware-instancing.tsx
index 3a3ff7ae51e..767d7ca965b 100644
--- a/examples/src/examples/graphics/hardware-instancing.tsx
+++ b/examples/src/examples/graphics/hardware-instancing.tsx
@@ -4,7 +4,7 @@ class HardwareInstancingExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Hardware Instancing';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
diff --git a/examples/src/examples/graphics/hierarchy.tsx b/examples/src/examples/graphics/hierarchy.tsx
index 9049a4bdce6..edaa78d7fe8 100644
--- a/examples/src/examples/graphics/hierarchy.tsx
+++ b/examples/src/examples/graphics/hierarchy.tsx
@@ -4,7 +4,7 @@ class HierarchyExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Hierarchy';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/layers.tsx b/examples/src/examples/graphics/layers.tsx
index 0a8106a9230..337623d1ba5 100644
--- a/examples/src/examples/graphics/layers.tsx
+++ b/examples/src/examples/graphics/layers.tsx
@@ -4,7 +4,7 @@ class LayersExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Layers';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/light-physical-units.tsx b/examples/src/examples/graphics/light-physical-units.tsx
index 11f62549ad6..505a826fa62 100644
--- a/examples/src/examples/graphics/light-physical-units.tsx
+++ b/examples/src/examples/graphics/light-physical-units.tsx
@@ -54,7 +54,7 @@ class LightPhysicalUnitsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
 
         const assets = {
             orbitCamera: new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/lights-baked-a-o.tsx b/examples/src/examples/graphics/lights-baked-a-o.tsx
index 99ea67a1205..28db29cd4d0 100644
--- a/examples/src/examples/graphics/lights-baked-a-o.tsx
+++ b/examples/src/examples/graphics/lights-baked-a-o.tsx
@@ -68,7 +68,7 @@ class LightsBakedAOExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/lights-baked.tsx b/examples/src/examples/graphics/lights-baked.tsx
index c064b589a7c..8ce907d294f 100644
--- a/examples/src/examples/graphics/lights-baked.tsx
+++ b/examples/src/examples/graphics/lights-baked.tsx
@@ -4,7 +4,7 @@ class LightsBakedExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Lights Baked';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/lights.tsx b/examples/src/examples/graphics/lights.tsx
index f5584a12bf8..6efde2a4b41 100644
--- a/examples/src/examples/graphics/lights.tsx
+++ b/examples/src/examples/graphics/lights.tsx
@@ -52,7 +52,7 @@ class LightsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data:any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data:any): void {
         function createMaterial(colors: any) {
             const material: any = new pc.StandardMaterial();
             for (const param in colors) {
diff --git a/examples/src/examples/graphics/lines.tsx b/examples/src/examples/graphics/lines.tsx
index 4d392ada1aa..48bbe43114b 100644
--- a/examples/src/examples/graphics/lines.tsx
+++ b/examples/src/examples/graphics/lines.tsx
@@ -4,7 +4,7 @@ class LinesExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Lines';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
diff --git a/examples/src/examples/graphics/material-anisotropic.tsx b/examples/src/examples/graphics/material-anisotropic.tsx
index a4272b135d4..9c655511eec 100644
--- a/examples/src/examples/graphics/material-anisotropic.tsx
+++ b/examples/src/examples/graphics/material-anisotropic.tsx
@@ -4,7 +4,7 @@ class LightsExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Anisotropic';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/material-basic.tsx b/examples/src/examples/graphics/material-basic.tsx
index bebb27a3b2f..24bb1c5af97 100644
--- a/examples/src/examples/graphics/material-basic.tsx
+++ b/examples/src/examples/graphics/material-basic.tsx
@@ -4,7 +4,7 @@ class MaterialBasicExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Basic';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/arial.json' }),
diff --git a/examples/src/examples/graphics/material-clear-coat.tsx b/examples/src/examples/graphics/material-clear-coat.tsx
index 85a5b528ece..329590ffe7c 100644
--- a/examples/src/examples/graphics/material-clear-coat.tsx
+++ b/examples/src/examples/graphics/material-clear-coat.tsx
@@ -4,7 +4,7 @@ class MaterialClearCoatExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Clear Coat';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/material-physical.tsx b/examples/src/examples/graphics/material-physical.tsx
index e1edfac1e31..b04a362a5e1 100644
--- a/examples/src/examples/graphics/material-physical.tsx
+++ b/examples/src/examples/graphics/material-physical.tsx
@@ -4,7 +4,7 @@ class MaterialPhysicalExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Physical';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/material-translucent-specular.tsx b/examples/src/examples/graphics/material-translucent-specular.tsx
index f8775b319a2..f4b92a168ef 100644
--- a/examples/src/examples/graphics/material-translucent-specular.tsx
+++ b/examples/src/examples/graphics/material-translucent-specular.tsx
@@ -4,7 +4,7 @@ class MaterialTranslucentSpecularExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Translucent Specular';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/mesh-decals.tsx b/examples/src/examples/graphics/mesh-decals.tsx
index 7f0d3df52a2..6bf10bdc35f 100644
--- a/examples/src/examples/graphics/mesh-decals.tsx
+++ b/examples/src/examples/graphics/mesh-decals.tsx
@@ -4,7 +4,7 @@ class MeshDecalsExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Decals';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'spark': new pc.Asset('spark', 'texture', { url: '/static/assets/textures/spark.png' })
diff --git a/examples/src/examples/graphics/mesh-deformation.tsx b/examples/src/examples/graphics/mesh-deformation.tsx
index 0dcec5aa0a3..e3bc8f0bae2 100644
--- a/examples/src/examples/graphics/mesh-deformation.tsx
+++ b/examples/src/examples/graphics/mesh-deformation.tsx
@@ -4,7 +4,7 @@ class MeshDeformationExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Deformation';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' }),
diff --git a/examples/src/examples/graphics/mesh-generation.tsx b/examples/src/examples/graphics/mesh-generation.tsx
index 51043bd92b6..dfeeac93a42 100644
--- a/examples/src/examples/graphics/mesh-generation.tsx
+++ b/examples/src/examples/graphics/mesh-generation.tsx
@@ -4,7 +4,7 @@ class MeshGenerationExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Generation';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'playcanvasGrey': new pc.Asset('playcanvasGrey', 'texture', { url: '/static/assets/textures/playcanvas-grey.png' })
diff --git a/examples/src/examples/graphics/mesh-morph-many.tsx b/examples/src/examples/graphics/mesh-morph-many.tsx
index 7c01daff1f3..9faff6f77ec 100644
--- a/examples/src/examples/graphics/mesh-morph-many.tsx
+++ b/examples/src/examples/graphics/mesh-morph-many.tsx
@@ -4,7 +4,7 @@ class MeshMorphManyExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Morph Many';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/mesh-morph.tsx b/examples/src/examples/graphics/mesh-morph.tsx
index 64c5c5fdcf1..58c47558fa6 100644
--- a/examples/src/examples/graphics/mesh-morph.tsx
+++ b/examples/src/examples/graphics/mesh-morph.tsx
@@ -4,7 +4,7 @@ class MeshMorphExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Morph';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/model-asset.tsx b/examples/src/examples/graphics/model-asset.tsx
index 7c4876423f1..6911dd0730c 100644
--- a/examples/src/examples/graphics/model-asset.tsx
+++ b/examples/src/examples/graphics/model-asset.tsx
@@ -4,7 +4,7 @@ class ModelAssetExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Model Asset';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
diff --git a/examples/src/examples/graphics/model-outline.tsx b/examples/src/examples/graphics/model-outline.tsx
index 5b98b7b7bf4..f0cc42c42dd 100644
--- a/examples/src/examples/graphics/model-outline.tsx
+++ b/examples/src/examples/graphics/model-outline.tsx
@@ -4,7 +4,7 @@ class ModelOutlineExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Model Outline';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'outline': new pc.Asset('outline', 'script', { url: '/static/scripts/posteffects/posteffect-outline.js' })
diff --git a/examples/src/examples/graphics/model-textured-box.tsx b/examples/src/examples/graphics/model-textured-box.tsx
index 8a8a5b28fe9..d8492457168 100644
--- a/examples/src/examples/graphics/model-textured-box.tsx
+++ b/examples/src/examples/graphics/model-textured-box.tsx
@@ -4,7 +4,7 @@ class ModelTexturedBoxExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Model Textured Box';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'clouds': new pc.Asset('clouds', 'texture', { url: '/static/assets/textures/clouds.jpg' })
diff --git a/examples/src/examples/graphics/multi-view.tsx b/examples/src/examples/graphics/multi-view.tsx
index 7f99b2004ce..b35a572f5f0 100644
--- a/examples/src/examples/graphics/multi-view.tsx
+++ b/examples/src/examples/graphics/multi-view.tsx
@@ -4,7 +4,7 @@ class MultiViewExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Multi View';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // set up and load draco module, as the glb we load is draco compressed
         pc.WasmModule.setConfig('DracoDecoderModule', {
diff --git a/examples/src/examples/graphics/paint-mesh.tsx b/examples/src/examples/graphics/paint-mesh.tsx
index c8cff185f79..ad360f3f7aa 100644
--- a/examples/src/examples/graphics/paint-mesh.tsx
+++ b/examples/src/examples/graphics/paint-mesh.tsx
@@ -49,7 +49,7 @@ class PaintMeshExample {
             }`
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas);
diff --git a/examples/src/examples/graphics/painter.tsx b/examples/src/examples/graphics/painter.tsx
index 3e7a5a0ed1b..b28a55b07c7 100644
--- a/examples/src/examples/graphics/painter.tsx
+++ b/examples/src/examples/graphics/painter.tsx
@@ -4,7 +4,7 @@ class PainterExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Painter';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/particles-anim-index.tsx b/examples/src/examples/graphics/particles-anim-index.tsx
index a90d2adf9ca..b3d4d4dfe3f 100644
--- a/examples/src/examples/graphics/particles-anim-index.tsx
+++ b/examples/src/examples/graphics/particles-anim-index.tsx
@@ -6,7 +6,7 @@ class ParticlesAnimIndexExample {
     static NAME = 'Particles: Anim Index';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/particles-random-sprites.tsx b/examples/src/examples/graphics/particles-random-sprites.tsx
index b7380f721df..e4c3f340ece 100644
--- a/examples/src/examples/graphics/particles-random-sprites.tsx
+++ b/examples/src/examples/graphics/particles-random-sprites.tsx
@@ -6,7 +6,7 @@ class ParticlesRandomSpritesExample {
     static NAME = 'Particles: Random Sprites';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/graphics/particles-snow.tsx b/examples/src/examples/graphics/particles-snow.tsx
index 122dc62df31..27abbba2fb5 100644
--- a/examples/src/examples/graphics/particles-snow.tsx
+++ b/examples/src/examples/graphics/particles-snow.tsx
@@ -6,7 +6,7 @@ class ParticlesSnowExample {
     static NAME = 'Particles: Snow';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/particles-spark.tsx b/examples/src/examples/graphics/particles-spark.tsx
index df4f8f1f37f..ec25b807912 100644
--- a/examples/src/examples/graphics/particles-spark.tsx
+++ b/examples/src/examples/graphics/particles-spark.tsx
@@ -6,7 +6,7 @@ class ParticlesSparkExample {
     static NAME = 'Particles: Spark';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/point-cloud-simulation.tsx b/examples/src/examples/graphics/point-cloud-simulation.tsx
index 442d76a97ec..deaecc46e8a 100644
--- a/examples/src/examples/graphics/point-cloud-simulation.tsx
+++ b/examples/src/examples/graphics/point-cloud-simulation.tsx
@@ -51,7 +51,7 @@ void main(void)
     };
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
         app.start();
diff --git a/examples/src/examples/graphics/point-cloud.tsx b/examples/src/examples/graphics/point-cloud.tsx
index 91d4bb9c1a0..4dbdb4cf147 100644
--- a/examples/src/examples/graphics/point-cloud.tsx
+++ b/examples/src/examples/graphics/point-cloud.tsx
@@ -53,7 +53,7 @@ void main(void)
     };
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/graphics/portal.tsx b/examples/src/examples/graphics/portal.tsx
index 69cfcfb7b9e..13c42fa975c 100644
--- a/examples/src/examples/graphics/portal.tsx
+++ b/examples/src/examples/graphics/portal.tsx
@@ -5,7 +5,7 @@ class PortalExample {
     static NAME = 'Portal';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/graphics/post-effects.tsx b/examples/src/examples/graphics/post-effects.tsx
index 0c3a73f2efc..8dd66a17152 100644
--- a/examples/src/examples/graphics/post-effects.tsx
+++ b/examples/src/examples/graphics/post-effects.tsx
@@ -79,7 +79,7 @@ class PostEffectsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
 
         // set up and load draco module, as the glb we load is draco compressed
         pc.WasmModule.setConfig('DracoDecoderModule', {
diff --git a/examples/src/examples/graphics/render-asset.tsx b/examples/src/examples/graphics/render-asset.tsx
index 744cdd21a0a..c3edf953ae3 100644
--- a/examples/src/examples/graphics/render-asset.tsx
+++ b/examples/src/examples/graphics/render-asset.tsx
@@ -4,7 +4,7 @@ class RenderAssetExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Render Asset';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/render-cubemap.tsx b/examples/src/examples/graphics/render-cubemap.tsx
index 1019a4bd56a..95eac05e4fc 100644
--- a/examples/src/examples/graphics/render-cubemap.tsx
+++ b/examples/src/examples/graphics/render-cubemap.tsx
@@ -4,7 +4,7 @@ class RenderCubemapExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Render Cubemap';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/render-to-texture.tsx b/examples/src/examples/graphics/render-to-texture.tsx
index e2a7fa1bb1e..e6400378f27 100644
--- a/examples/src/examples/graphics/render-to-texture.tsx
+++ b/examples/src/examples/graphics/render-to-texture.tsx
@@ -4,7 +4,7 @@ class RenderToTextureExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Render to Texture';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // Overview:
         // There are 3 layers used:
diff --git a/examples/src/examples/graphics/shader-burn.tsx b/examples/src/examples/graphics/shader-burn.tsx
index c5aa5e9b52f..cdc8c3e9529 100644
--- a/examples/src/examples/graphics/shader-burn.tsx
+++ b/examples/src/examples/graphics/shader-burn.tsx
@@ -41,7 +41,7 @@ void main(void)
 }`
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' }),
diff --git a/examples/src/examples/graphics/shader-compile.tsx b/examples/src/examples/graphics/shader-compile.tsx
index 957f0f34201..43b3573ad6b 100644
--- a/examples/src/examples/graphics/shader-compile.tsx
+++ b/examples/src/examples/graphics/shader-compile.tsx
@@ -4,7 +4,7 @@ class ShaderCompileExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Shader Compile';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // This example servers as a test framework for large shader compilation speed test. Enable tracking for it.
         pc.Tracing.set(pc.TRACEID_SHADER_COMPILE, true);
diff --git a/examples/src/examples/graphics/shader-toon.tsx b/examples/src/examples/graphics/shader-toon.tsx
index ff0e8bcd4c3..b2d206a4728 100644
--- a/examples/src/examples/graphics/shader-toon.tsx
+++ b/examples/src/examples/graphics/shader-toon.tsx
@@ -60,7 +60,7 @@ void main(void)
 `
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
diff --git a/examples/src/examples/graphics/shader-wobble.tsx b/examples/src/examples/graphics/shader-wobble.tsx
index 996d1ac3f72..3b9df8c28e5 100644
--- a/examples/src/examples/graphics/shader-wobble.tsx
+++ b/examples/src/examples/graphics/shader-wobble.tsx
@@ -35,7 +35,7 @@ void main(void)
 }`
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
diff --git a/examples/src/examples/graphics/shadow-cascades.tsx b/examples/src/examples/graphics/shadow-cascades.tsx
index 2d72b2ffbf6..cd60ff9dc7a 100644
--- a/examples/src/examples/graphics/shadow-cascades.tsx
+++ b/examples/src/examples/graphics/shadow-cascades.tsx
@@ -39,7 +39,7 @@ class ShadowCascadesExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/shapes.tsx b/examples/src/examples/graphics/shapes.tsx
index 204ced1f3b3..e770ab2028f 100644
--- a/examples/src/examples/graphics/shapes.tsx
+++ b/examples/src/examples/graphics/shapes.tsx
@@ -4,7 +4,7 @@ class ShapesExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Shapes';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/texture-basis.tsx b/examples/src/examples/graphics/texture-basis.tsx
index be44f4ff8ff..f154b44f9a8 100644
--- a/examples/src/examples/graphics/texture-basis.tsx
+++ b/examples/src/examples/graphics/texture-basis.tsx
@@ -10,7 +10,7 @@ class TextureBasisExample {
     // The normalmap has been converted with the following arguments:
     //   basisu seaside-rocks01-normal.jpg -normal_map -swizzle gggr -renorm -q 255 -mipmap
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // initialize basis
         pc.basisInitialize({
diff --git a/examples/src/examples/graphics/transform-feedback.tsx b/examples/src/examples/graphics/transform-feedback.tsx
index 335f37b4ed1..9803488ccbe 100644
--- a/examples/src/examples/graphics/transform-feedback.tsx
+++ b/examples/src/examples/graphics/transform-feedback.tsx
@@ -90,7 +90,7 @@ void main(void)
     };
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shaderFeedback.vert': string, 'shaderCloud.vert': string, 'shaderCloud.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shaderFeedback.vert': string, 'shaderCloud.vert': string, 'shaderCloud.frag': string }): void {
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/graphics/video-texture.tsx b/examples/src/examples/graphics/video-texture.tsx
index 5e19cd1420a..f1d40467a13 100644
--- a/examples/src/examples/graphics/video-texture.tsx
+++ b/examples/src/examples/graphics/video-texture.tsx
@@ -6,7 +6,7 @@ class VideoTextureExample {
     static NAME = 'Video Texture';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/input/gamepad.tsx b/examples/src/examples/input/gamepad.tsx
index 5fb3cc296c7..1eda339d8f2 100644
--- a/examples/src/examples/input/gamepad.tsx
+++ b/examples/src/examples/input/gamepad.tsx
@@ -5,7 +5,7 @@ class GamepadExample {
     static NAME = 'Gamepad';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
         // Create the application and start the update loop
 
         const assets = {
diff --git a/examples/src/examples/input/keyboard.tsx b/examples/src/examples/input/keyboard.tsx
index 7e70424fa01..b5d97d04e09 100644
--- a/examples/src/examples/input/keyboard.tsx
+++ b/examples/src/examples/input/keyboard.tsx
@@ -6,7 +6,7 @@ class KeyboardExample {
     static NAME = 'Keyboard';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/input/mouse.tsx b/examples/src/examples/input/mouse.tsx
index 91539273047..75ad6208e9b 100644
--- a/examples/src/examples/input/mouse.tsx
+++ b/examples/src/examples/input/mouse.tsx
@@ -6,7 +6,7 @@ class MouseExample {
     static NAME = 'Mouse';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
diff --git a/examples/src/examples/loaders/draco-glb.tsx b/examples/src/examples/loaders/draco-glb.tsx
index 8a9ac7df579..8f91fd506eb 100644
--- a/examples/src/examples/loaders/draco-glb.tsx
+++ b/examples/src/examples/loaders/draco-glb.tsx
@@ -4,7 +4,7 @@ class DracoGlbExample {
     static CATEGORY = 'Loaders';
     static NAME = 'Draco GLB';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         pc.WasmModule.setConfig('DracoDecoderModule', {
             glueUrl: '/static/lib/draco/draco.wasm.js',
diff --git a/examples/src/examples/loaders/glb.tsx b/examples/src/examples/loaders/glb.tsx
index fbcaa150595..613889894d3 100644
--- a/examples/src/examples/loaders/glb.tsx
+++ b/examples/src/examples/loaders/glb.tsx
@@ -4,7 +4,7 @@ class GlbExample {
     static CATEGORY = 'Loaders';
     static NAME = 'GLB';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // The example demonstrates loading of glb file, which contains meshes,
         // lights and cameras, and switches between the cameras every 2 seconds.
diff --git a/examples/src/examples/loaders/gltf-export.tsx b/examples/src/examples/loaders/gltf-export.tsx
index 0c8d40e3f92..441280907ff 100644
--- a/examples/src/examples/loaders/gltf-export.tsx
+++ b/examples/src/examples/loaders/gltf-export.tsx
@@ -13,7 +13,7 @@ class GltfExportExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, pcx: any, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, pcx: any, data: any): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/loaders/loaders-gl.tsx b/examples/src/examples/loaders/loaders-gl.tsx
index 50bc0e2ef77..b8687fa96e4 100644
--- a/examples/src/examples/loaders/loaders-gl.tsx
+++ b/examples/src/examples/loaders/loaders-gl.tsx
@@ -44,7 +44,7 @@ void main(void)
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
         // This example uses draco point cloud loader library from https://loaders.gl/
         // Note that many additional formats are supported by the library and can be used.
 
diff --git a/examples/src/examples/loaders/obj.tsx b/examples/src/examples/loaders/obj.tsx
index a3d6618a2fa..077372500ab 100644
--- a/examples/src/examples/loaders/obj.tsx
+++ b/examples/src/examples/loaders/obj.tsx
@@ -4,7 +4,7 @@ class ObjExample {
     static CATEGORY = 'Loaders';
     static NAME = 'OBJ';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/loaders/usdz-export.tsx b/examples/src/examples/loaders/usdz-export.tsx
index 0d30614a2cc..ccdedc00601 100644
--- a/examples/src/examples/loaders/usdz-export.tsx
+++ b/examples/src/examples/loaders/usdz-export.tsx
@@ -13,7 +13,7 @@ class UsdzExportExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, pcx: any, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, pcx: any, data: any): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/misc/hello-world.tsx b/examples/src/examples/misc/hello-world.tsx
index 3915f4c5405..4885052ffc0 100644
--- a/examples/src/examples/misc/hello-world.tsx
+++ b/examples/src/examples/misc/hello-world.tsx
@@ -4,7 +4,7 @@ class HelloWorldExample {
     static CATEGORY = 'Misc';
     static NAME = 'Hello World';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/misc/mini-stats.tsx b/examples/src/examples/misc/mini-stats.tsx
index e0e63dcc198..e917c0c602e 100644
--- a/examples/src/examples/misc/mini-stats.tsx
+++ b/examples/src/examples/misc/mini-stats.tsx
@@ -7,7 +7,7 @@ class MiniStatsExample {
     static ENGINE = 'PERFORMANCE';
     static MINISTATS = true;
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, pcx: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, pcx: any): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
         app.start();
diff --git a/examples/src/examples/misc/spineboy.tsx b/examples/src/examples/misc/spineboy.tsx
index 77713ec4eb2..e1433343bcd 100644
--- a/examples/src/examples/misc/spineboy.tsx
+++ b/examples/src/examples/misc/spineboy.tsx
@@ -4,7 +4,7 @@ class SpineboyExample {
     static CATEGORY = 'Misc';
     static NAME = 'Spineboy';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'skeleton': new pc.Asset('skeleton', 'json', { url: '/static/assets/spine/spineboy-pro.json' }),
diff --git a/examples/src/examples/physics/compound-collision.tsx b/examples/src/examples/physics/compound-collision.tsx
index 623eeb8a0ce..7a563aee382 100644
--- a/examples/src/examples/physics/compound-collision.tsx
+++ b/examples/src/examples/physics/compound-collision.tsx
@@ -4,7 +4,7 @@ class CompoundCollisionExample {
     static CATEGORY = 'Physics';
     static NAME = 'Compound Collision';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/physics/falling-shapes.tsx b/examples/src/examples/physics/falling-shapes.tsx
index 4aef21bb04e..ef864511694 100644
--- a/examples/src/examples/physics/falling-shapes.tsx
+++ b/examples/src/examples/physics/falling-shapes.tsx
@@ -6,7 +6,7 @@ class FallingShapesExample {
     static NAME = 'Falling Shapes';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
             // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/physics/offset-collision.tsx b/examples/src/examples/physics/offset-collision.tsx
index f4c6a5bcca9..64a7efae2cb 100644
--- a/examples/src/examples/physics/offset-collision.tsx
+++ b/examples/src/examples/physics/offset-collision.tsx
@@ -5,7 +5,7 @@ class OffsetCollisionExample {
     static CATEGORY = 'Physics';
     static NAME = 'Offset Collision';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/physics/raycast.tsx b/examples/src/examples/physics/raycast.tsx
index 19b62dae5f2..965464dbdf8 100644
--- a/examples/src/examples/physics/raycast.tsx
+++ b/examples/src/examples/physics/raycast.tsx
@@ -6,7 +6,7 @@ class RaycastExample {
     static NAME = 'Raycast';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/physics/vehicle.tsx b/examples/src/examples/physics/vehicle.tsx
index c74f82045dc..a3f4f3d61d5 100644
--- a/examples/src/examples/physics/vehicle.tsx
+++ b/examples/src/examples/physics/vehicle.tsx
@@ -4,7 +4,7 @@ class VehicleExample {
     static CATEGORY = 'Physics';
     static NAME = 'Vehicle';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         pc.WasmModule.setConfig('Ammo', {
             glueUrl: '/static/lib/ammo/ammo.wasm.js',
diff --git a/examples/src/examples/sound/positional.tsx b/examples/src/examples/sound/positional.tsx
index d73d42618e8..808d0e4cb19 100644
--- a/examples/src/examples/sound/positional.tsx
+++ b/examples/src/examples/sound/positional.tsx
@@ -6,7 +6,7 @@ class PositionalExample {
     static NAME = 'Positional';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/user-interface/button-basic.tsx b/examples/src/examples/user-interface/button-basic.tsx
index 00290c5f79a..d61e5733029 100644
--- a/examples/src/examples/user-interface/button-basic.tsx
+++ b/examples/src/examples/user-interface/button-basic.tsx
@@ -4,7 +4,7 @@ class ButtonBasicExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Button Basic';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/button-sprite.tsx b/examples/src/examples/user-interface/button-sprite.tsx
index 1cccbfb88ef..56b42c0227a 100644
--- a/examples/src/examples/user-interface/button-sprite.tsx
+++ b/examples/src/examples/user-interface/button-sprite.tsx
@@ -6,7 +6,7 @@ class ButtonSpriteExample {
     static NAME = 'Button Sprite';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' }),
diff --git a/examples/src/examples/user-interface/custom-shader.tsx b/examples/src/examples/user-interface/custom-shader.tsx
index af809d79e68..815e75c2a6f 100644
--- a/examples/src/examples/user-interface/custom-shader.tsx
+++ b/examples/src/examples/user-interface/custom-shader.tsx
@@ -65,7 +65,7 @@ void main(void)
 }`
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             "playcanvas": new pc.Asset("playcanvas", "texture", { url: "/static/assets/textures/playcanvas.png" })
diff --git a/examples/src/examples/user-interface/layout-group.tsx b/examples/src/examples/user-interface/layout-group.tsx
index 5c6e5c5ad03..d4a7585e49b 100644
--- a/examples/src/examples/user-interface/layout-group.tsx
+++ b/examples/src/examples/user-interface/layout-group.tsx
@@ -6,7 +6,7 @@ class LayoutGroupExample {
     static NAME = 'Layout Group';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/particle-system.tsx b/examples/src/examples/user-interface/particle-system.tsx
index 25deb7da92a..4dd2f308994 100644
--- a/examples/src/examples/user-interface/particle-system.tsx
+++ b/examples/src/examples/user-interface/particle-system.tsx
@@ -6,7 +6,7 @@ class ParticleSystemExample {
     static NAME = 'Particle System';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' }),
diff --git a/examples/src/examples/user-interface/scroll-view.tsx b/examples/src/examples/user-interface/scroll-view.tsx
index 7817bf60c1a..9173d502bf8 100644
--- a/examples/src/examples/user-interface/scroll-view.tsx
+++ b/examples/src/examples/user-interface/scroll-view.tsx
@@ -4,7 +4,7 @@ class ScrollViewExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Scroll View';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/text-auto-font-size.tsx b/examples/src/examples/user-interface/text-auto-font-size.tsx
index b311546f698..fcf9bf649a5 100644
--- a/examples/src/examples/user-interface/text-auto-font-size.tsx
+++ b/examples/src/examples/user-interface/text-auto-font-size.tsx
@@ -4,7 +4,7 @@ class TextAutoFontSizeExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Auto Font Size';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/text-emojis.tsx b/examples/src/examples/user-interface/text-emojis.tsx
index 9d6e1023430..cc31c91096e 100644
--- a/examples/src/examples/user-interface/text-emojis.tsx
+++ b/examples/src/examples/user-interface/text-emojis.tsx
@@ -4,7 +4,7 @@ class TextEmojisExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Emojis';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/arial.json' })
diff --git a/examples/src/examples/user-interface/text-localization.tsx b/examples/src/examples/user-interface/text-localization.tsx
index 602cfc46682..8ec99db6107 100644
--- a/examples/src/examples/user-interface/text-localization.tsx
+++ b/examples/src/examples/user-interface/text-localization.tsx
@@ -4,7 +4,7 @@ class TextLocalizationExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Localization';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/text-typewriter.tsx b/examples/src/examples/user-interface/text-typewriter.tsx
index 03a9379567c..0877aec014d 100644
--- a/examples/src/examples/user-interface/text-typewriter.tsx
+++ b/examples/src/examples/user-interface/text-typewriter.tsx
@@ -4,7 +4,7 @@ class TextTypewriterExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Typewriter';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/text.tsx b/examples/src/examples/user-interface/text.tsx
index 8c52fd1d277..0166281e003 100644
--- a/examples/src/examples/user-interface/text.tsx
+++ b/examples/src/examples/user-interface/text.tsx
@@ -4,7 +4,7 @@ class TextExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/world-to-screen.tsx b/examples/src/examples/user-interface/world-to-screen.tsx
index 7ead99c07a7..f03b2ecf210 100644
--- a/examples/src/examples/user-interface/world-to-screen.tsx
+++ b/examples/src/examples/user-interface/world-to-screen.tsx
@@ -6,7 +6,7 @@ class WorldToScreenExample {
     static NAME = 'World to Screen';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             "checkboard": new pc.Asset("checkboard", "texture", { url: "/static/assets/textures/checkboard.png" }),
diff --git a/examples/src/examples/user-interface/world-ui.tsx b/examples/src/examples/user-interface/world-ui.tsx
index fccc18c06c4..eab51e3d47d 100644
--- a/examples/src/examples/user-interface/world-ui.tsx
+++ b/examples/src/examples/user-interface/world-ui.tsx
@@ -4,7 +4,7 @@ class WorldUiExample {
     static CATEGORY = 'User Interface';
     static NAME = 'World UI';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
 
         const assets = {
             "checkboard": new pc.Asset("checkboard", "texture", { url: "/static/assets/textures/checkboard.png" }),
diff --git a/examples/src/examples/xr/ar-basic.tsx b/examples/src/examples/xr/ar-basic.tsx
index 5df59dec2f6..348390b93dc 100644
--- a/examples/src/examples/xr/ar-basic.tsx
+++ b/examples/src/examples/xr/ar-basic.tsx
@@ -4,7 +4,7 @@ class ArBasicExample {
     static CATEGORY = 'XR';
     static NAME = 'AR Basic';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/ar-hit-test.tsx b/examples/src/examples/xr/ar-hit-test.tsx
index 2643617f2b0..198a623edec 100644
--- a/examples/src/examples/xr/ar-hit-test.tsx
+++ b/examples/src/examples/xr/ar-hit-test.tsx
@@ -4,7 +4,7 @@ class ArHitTestExample {
     static CATEGORY = 'XR';
     static NAME = 'AR Hit Test';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-basic.tsx b/examples/src/examples/xr/vr-basic.tsx
index 88955d4bf94..7d091620394 100644
--- a/examples/src/examples/xr/vr-basic.tsx
+++ b/examples/src/examples/xr/vr-basic.tsx
@@ -4,7 +4,7 @@ class VrBasicExample {
     static CATEGORY = 'XR';
     static NAME = 'VR Basic';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-controllers.tsx b/examples/src/examples/xr/vr-controllers.tsx
index 725ef892ee4..3664590899a 100644
--- a/examples/src/examples/xr/vr-controllers.tsx
+++ b/examples/src/examples/xr/vr-controllers.tsx
@@ -6,7 +6,7 @@ class VrControllersExample {
     static NAME = 'VR Controllers';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-hands.tsx b/examples/src/examples/xr/vr-hands.tsx
index 7c11f8e35c6..838494eb36d 100644
--- a/examples/src/examples/xr/vr-hands.tsx
+++ b/examples/src/examples/xr/vr-hands.tsx
@@ -4,7 +4,7 @@ class VrHandsExample {
     static CATEGORY = 'XR';
     static NAME = 'VR Hands';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-movement.tsx b/examples/src/examples/xr/vr-movement.tsx
index d6f81ed7a71..3314c678b70 100644
--- a/examples/src/examples/xr/vr-movement.tsx
+++ b/examples/src/examples/xr/vr-movement.tsx
@@ -4,7 +4,7 @@ class VrMovementExample {
     static CATEGORY = 'XR';
     static NAME = 'VR Movement';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/xr-picking.tsx b/examples/src/examples/xr/xr-picking.tsx
index 147b7b0ec37..bf6d8337772 100644
--- a/examples/src/examples/xr/xr-picking.tsx
+++ b/examples/src/examples/xr/xr-picking.tsx
@@ -4,7 +4,7 @@ class XrPickingExample {
     static CATEGORY = 'XR';
     static NAME = 'XR Picking';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/webgpu-temp/four.html b/examples/webgpu-temp/four.html
index ae8472178fd..b65f350067c 100644
--- a/examples/webgpu-temp/four.html
+++ b/examples/webgpu-temp/four.html
@@ -28,7 +28,7 @@
         import { Texture } from '../../src/platform/graphics/texture.js';
         import { RenderTarget } from '../../src/platform/graphics/render-target.js';
         import {
-            DEVICETYPE_WEBGPU,
+            DEVICETYPE,
             SEMANTIC_TEXCOORD0, SEMANTIC_POSITION, CULLFACE_NONE,
             PIXELFORMAT_RGBA8, FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE
         } from '../../src/platform/graphics/constants.js';
@@ -110,7 +110,7 @@
 
             const canvas = document.querySelector('#gpuCanvas');
             const gfxOptions = {
-                deviceTypes: [DEVICETYPE_WEBGPU],
+                deviceTypes: [DEVICETYPE.WEBGPU],
                 glslangUrl: '../src/lib/glslang/glslang.js',
                 twgslUrl: '../src/lib/twgsl/twgsl.js'
             };
diff --git a/examples/webgpu-temp/one.html b/examples/webgpu-temp/one.html
index 17793550213..6b30205e35c 100644
--- a/examples/webgpu-temp/one.html
+++ b/examples/webgpu-temp/one.html
@@ -29,7 +29,7 @@
         import { RenderTarget } from '../../src/platform/graphics/render-target.js';
         import { drawQuadWithShader } from '../../src/scene/graphics/quad-render-utils.js';
         import {
-            DEVICETYPE_WEBGPU,
+            DEVICETYPE,
             SEMANTIC_TEXCOORD0, SEMANTIC_POSITION, CULLFACE_NONE,
             PIXELFORMAT_RGBA8, FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE
         } from '../../src/platform/graphics/constants.js';
@@ -376,7 +376,7 @@
 
             const canvas = document.querySelector('#gpuCanvas');
             const gfxOptions = {
-                deviceTypes: [DEVICETYPE_WEBGPU],
+                deviceTypes: [DEVICETYPE.WEBGPU],
                 glslangUrl: '../src/lib/glslang/glslang.js',
                 twgslUrl: '../src/lib/twgsl/twgsl.js'
             };
diff --git a/examples/webgpu-temp/three.html b/examples/webgpu-temp/three.html
index eb6f2ffdb33..436f79282ab 100644
--- a/examples/webgpu-temp/three.html
+++ b/examples/webgpu-temp/three.html
@@ -28,7 +28,7 @@
         import { Texture } from '../../src/platform/graphics/texture.js';
         import { RenderTarget } from '../../src/platform/graphics/render-target.js';
         import {
-            DEVICETYPE_WEBGPU,
+            DEVICETYPE,
             SEMANTIC_TEXCOORD0, SEMANTIC_POSITION, CULLFACE_NONE,
             PIXELFORMAT_RGBA8, FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE
         } from '../../src/platform/graphics/constants.js';
@@ -217,7 +217,7 @@
 
             const canvas = document.querySelector('#gpuCanvas');
             const gfxOptions = {
-                deviceTypes: [DEVICETYPE_WEBGPU],
+                deviceTypes: [DEVICETYPE.WEBGPU],
                 glslangUrl: '../src/lib/glslang/glslang.js',
                 twgslUrl: '../src/lib/twgsl/twgsl.js'
             };
diff --git a/examples/webgpu-temp/two.html b/examples/webgpu-temp/two.html
index e46ef010a2e..303d30202ac 100644
--- a/examples/webgpu-temp/two.html
+++ b/examples/webgpu-temp/two.html
@@ -28,7 +28,7 @@
         import { Texture } from '../../src/platform/graphics/texture.js';
         import { RenderTarget } from '../../src/platform/graphics/render-target.js';
         import {
-            DEVICETYPE_WEBGPU,
+            DEVICETYPE,
             SEMANTIC_TEXCOORD0, SEMANTIC_POSITION, CULLFACE_NONE,
             PIXELFORMAT_RGBA8, FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE
         } from '../../src/platform/graphics/constants.js';
@@ -117,7 +117,7 @@
 
             const canvas = document.querySelector('#gpuCanvas');
             const gfxOptions = {
-                deviceTypes: [DEVICETYPE_WEBGPU],
+                deviceTypes: [DEVICETYPE.WEBGPU],
                 glslangUrl: '../src/lib/glslang/glslang.js',
                 twgslUrl: '../src/lib/twgsl/twgsl.js'
             };
diff --git a/src/platform/graphics/constants.js b/src/platform/graphics/constants.js
index 98bf46ddd56..8b1d2994377 100644
--- a/src/platform/graphics/constants.js
+++ b/src/platform/graphics/constants.js
@@ -1179,6 +1179,18 @@ export const DEVICETYPE_WEBGL2 = 'webgl2';
  */
 export const DEVICETYPE_WEBGPU = 'webgpu';
 
+/**
+ * Enum for the device types.
+ *
+ * @readonly
+ * @enum {string}
+ */
+export const DEVICETYPE = {
+    WEBGL1: DEVICETYPE_WEBGL1,
+    WEBGL2: DEVICETYPE_WEBGL2,
+    WEBGPU: DEVICETYPE_WEBGPU
+};
+
 // (bit-flags) shader stages for resource visibility on the GPU
 export const SHADERSTAGE_VERTEX = 1;
 export const SHADERSTAGE_FRAGMENT = 2;
diff --git a/src/platform/graphics/graphics-device-create.js b/src/platform/graphics/graphics-device-create.js
index 8f9d80edb8f..73101799389 100644
--- a/src/platform/graphics/graphics-device-create.js
+++ b/src/platform/graphics/graphics-device-create.js
@@ -1,7 +1,7 @@
 import { Debug } from '../../core/debug.js';
 
 import { WebgpuGraphicsDevice } from './webgpu/webgpu-graphics-device.js';
-import { DEVICETYPE_WEBGL2, DEVICETYPE_WEBGL1, DEVICETYPE_WEBGPU } from './constants.js';
+import { DEVICETYPE } from './constants.js';
 import { WebglGraphicsDevice } from './webgl/webgl-graphics-device.js';
 
 /**
@@ -9,14 +9,14 @@ import { WebglGraphicsDevice } from './webgl/webgl-graphics-device.js';
  *
  * @param {HTMLCanvasElement} canvas - The canvas element.
  * @param {object} options - Graphics device options.
- * @param {string[]} [options.deviceTypes] - An array of DEVICETYPE_*** constants, defining the
+ * @param {DEVICETYPE[]} [options.deviceTypes] - An array of DEVICETYPE constants, defining the
  * order in which the devices are attempted to get created. Defaults to an empty array. If the
- * specified array does not contain [{@link DEVICETYPE_WEBGL2} or {@link DEVICETYPE_WEBGL1}], those
+ * specified array does not contain [{@link DEVICETYPE.WEBGL2} or {@link DEVICETYPE.WEBGL1}], those
  * are internally added to its end in this order. Typically, you'd only specify
- * {@link DEVICETYPE_WEBGPU}, or leave it empty.
+ * {@link DEVICETYPE.WEBGPU}, or leave it empty.
  * @param {string} [options.glslangUrl] - An url to glslang script, required if
- * {@link DEVICETYPE_WEBGPU} type is added to deviceTypes array. Not used for
- * {@link DEVICETYPE_WEBGL} device type creation.
+ * {@link DEVICETYPE.WEBGPU} type is added to deviceTypes array. Not used for
+ * {@link DEVICETYPE.WEBGL} device type creation.
  * @param {string} [options.twgslUrl] - An url to twgsl script, required if glslangUrl was specified.
  * @returns {Promise} - Promise object representing the created graphics device.
  */
@@ -25,24 +25,24 @@ function createGraphicsDevice(canvas, options = {}) {
     const deviceTypes = options.deviceTypes ?? [];
 
     // automatically added fallbacks
-    if (!deviceTypes.includes(DEVICETYPE_WEBGL2)) {
-        deviceTypes.push(DEVICETYPE_WEBGL2);
+    if (!deviceTypes.includes(DEVICETYPE.WEBGL2)) {
+        deviceTypes.push(DEVICETYPE.WEBGL2);
     }
-    if (!deviceTypes.includes(DEVICETYPE_WEBGL1)) {
-        deviceTypes.push(DEVICETYPE_WEBGL1);
+    if (!deviceTypes.includes(DEVICETYPE.WEBGL1)) {
+        deviceTypes.push(DEVICETYPE.WEBGL1);
     }
 
     let device;
     for (let i = 0; i < deviceTypes.length; i++) {
         const deviceType = deviceTypes[i];
 
-        if (deviceType === DEVICETYPE_WEBGPU && window?.navigator?.gpu) {
+        if (deviceType === DEVICETYPE.WEBGPU && window?.navigator?.gpu) {
             device = new WebgpuGraphicsDevice(canvas, options);
             return device.initWebGpu(options.glslangUrl, options.twgslUrl);
         }
 
-        if (deviceType !== DEVICETYPE_WEBGPU) {
-            options.preferWebGl2 = deviceType === DEVICETYPE_WEBGL2;
+        if (deviceType !== DEVICETYPE.WEBGPU) {
+            options.preferWebGl2 = deviceType === DEVICETYPE.WEBGL2;
             device = new WebglGraphicsDevice(canvas, options);
             return Promise.resolve(device);
         }
diff --git a/src/platform/graphics/graphics-device.js b/src/platform/graphics/graphics-device.js
index bf02b0d48ce..204a191ff7c 100644
--- a/src/platform/graphics/graphics-device.js
+++ b/src/platform/graphics/graphics-device.js
@@ -40,9 +40,9 @@ class GraphicsDevice extends EventHandler {
     isWebGPU = false;
 
     /**
-     * The type of graphics device that the system could initialize. Can be one of pc.DEVICETYPE_WEBGL1, pc.DEVICETYPE_WEBGL2 or pc.DEVICETYPE_WEBGPU.
+     * The type of graphics device that the system could initialize. Can be one of pc.DEVICETYPE.WEBGL1, pc.DEVICETYPE.WEBGL2 or pc.DEVICETYPE.WEBGPU.
      *
-     * @type {pc.DEVICETYPE_WEBGL1 | pc.DEVICETYPE_WEBGL2 | pc.DEVICETYPE_WEBGPU}
+     * @type {pc.DEVICETYPE.WEBGL1 | pc.DEVICETYPE.WEBGL2 | pc.DEVICETYPE.WEBGPU}
      */
     activeDeviceType;
 
diff --git a/src/platform/graphics/webgl/webgl-graphics-device.js b/src/platform/graphics/webgl/webgl-graphics-device.js
index afff4275f0a..5630ea33bea 100644
--- a/src/platform/graphics/webgl/webgl-graphics-device.js
+++ b/src/platform/graphics/webgl/webgl-graphics-device.js
@@ -19,8 +19,7 @@ import {
     UNIFORMTYPE_TEXTURECUBE_SHADOW, UNIFORMTYPE_TEXTURE3D, UNIFORMTYPE_VEC2ARRAY, UNIFORMTYPE_VEC3ARRAY, UNIFORMTYPE_VEC4ARRAY,
     semanticToLocation,
     PRIMITIVE_TRISTRIP,
-    DEVICETYPE_WEBGL2,
-    DEVICETYPE_WEBGL1
+    DEVICETYPE
 } from '../constants.js';
 
 import { GraphicsDevice } from '../graphics-device.js';
@@ -402,8 +401,8 @@ class WebglGraphicsDevice extends GraphicsDevice {
             gl = canvas.getContext(names[i], options);
 
             if (gl) {
-                this.webgl2 = (names[i] === DEVICETYPE_WEBGL2);
-                this.activeDeviceType = (names[i] === DEVICETYPE_WEBGL2) ? DEVICETYPE_WEBGL2 : DEVICETYPE_WEBGL1;
+                this.webgl2 = (names[i] === DEVICETYPE.WEBGL2);
+                this.activeDeviceType = (names[i] === DEVICETYPE.WEBGL2) ? DEVICETYPE.WEBGL2 : DEVICETYPE.WEBGL1;
                 break;
             }
         }
diff --git a/src/platform/graphics/webgpu/webgpu-graphics-device.js b/src/platform/graphics/webgpu/webgpu-graphics-device.js
index 3cd99ad6d5b..ba101023b1c 100644
--- a/src/platform/graphics/webgpu/webgpu-graphics-device.js
+++ b/src/platform/graphics/webgpu/webgpu-graphics-device.js
@@ -1,7 +1,7 @@
 import { Debug, DebugHelper } from '../../../core/debug.js';
 
 import {
-    PIXELFORMAT_RGBA32F, PIXELFORMAT_RGBA8, PIXELFORMAT_BGRA8, CULLFACE_BACK, DEVICETYPE_WEBGPU
+    PIXELFORMAT_RGBA32F, PIXELFORMAT_RGBA8, PIXELFORMAT_BGRA8, CULLFACE_BACK, DEVICETYPE
 } from '../constants.js';
 import { GraphicsDevice } from '../graphics-device.js';
 import { RenderTarget } from '../render-target.js';
@@ -64,7 +64,7 @@ class WebgpuGraphicsDevice extends GraphicsDevice {
     constructor(canvas, options = {}) {
         super(canvas);
         this.isWebGPU = true;
-        this.activeDeviceType = DEVICETYPE_WEBGPU;
+        this.activeDeviceType = DEVICETYPE.WEBGPU;
 
         this.initDeviceCaps();
     }

From e262e2eb5e67b6b08633a81065b85e24a0dd3f09 Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Tue, 14 Mar 2023 10:31:24 +0000
Subject: [PATCH 08/14] fix types

---
 src/platform/graphics/graphics-device.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/platform/graphics/graphics-device.js b/src/platform/graphics/graphics-device.js
index 204a191ff7c..c76a766e628 100644
--- a/src/platform/graphics/graphics-device.js
+++ b/src/platform/graphics/graphics-device.js
@@ -42,7 +42,7 @@ class GraphicsDevice extends EventHandler {
     /**
      * The type of graphics device that the system could initialize. Can be one of pc.DEVICETYPE.WEBGL1, pc.DEVICETYPE.WEBGL2 or pc.DEVICETYPE.WEBGPU.
      *
-     * @type {pc.DEVICETYPE.WEBGL1 | pc.DEVICETYPE.WEBGL2 | pc.DEVICETYPE.WEBGPU}
+     * @type {import('./constants.js').DEVICETYPE}
      */
     activeDeviceType;
 

From 4e19fc872650cdf7e252395cdacd2c11be58f2af Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Tue, 14 Mar 2023 16:27:41 +0000
Subject: [PATCH 09/14] Revert "create a device type enum"

This reverts commit 818a8d71f11c52587d646cc2b53a01d1019ec9a7.
---
 examples/src/app/example.tsx                  | 41 +++++++++----------
 examples/src/app/helpers/formatters.mjs       |  2 +-
 .../src/examples/animation/blend-trees-1d.tsx |  2 +-
 .../animation/blend-trees-2d-cartesian.tsx    |  2 +-
 .../animation/blend-trees-2d-directional.tsx  |  2 +-
 .../animation/component-properties.tsx        |  2 +-
 examples/src/examples/animation/events.tsx    |  2 +-
 .../src/examples/animation/layer-masks.tsx    |  2 +-
 .../src/examples/animation/locomotion.tsx     |  2 +-
 examples/src/examples/animation/tween.tsx     |  2 +-
 examples/src/examples/camera/first-person.tsx |  2 +-
 examples/src/examples/camera/fly.tsx          |  2 +-
 examples/src/examples/camera/orbit.tsx        |  2 +-
 .../src/examples/graphics/area-lights.tsx     |  2 +-
 .../src/examples/graphics/area-picker.tsx     |  2 +-
 .../src/examples/graphics/asset-viewer.tsx    |  2 +-
 .../examples/graphics/batching-dynamic.tsx    |  2 +-
 .../src/examples/graphics/box-reflection.tsx  |  2 +-
 .../graphics/clustered-area-lights.tsx        |  2 +-
 .../examples/graphics/clustered-lighting.tsx  |  2 +-
 .../graphics/clustered-omni-shadows.tsx       |  2 +-
 .../graphics/clustered-spot-shadows.tsx       |  2 +-
 examples/src/examples/graphics/grab-pass.tsx  |  2 +-
 examples/src/examples/graphics/ground-fog.tsx |  2 +-
 .../examples/graphics/hardware-instancing.tsx |  2 +-
 examples/src/examples/graphics/hierarchy.tsx  |  2 +-
 examples/src/examples/graphics/layers.tsx     |  2 +-
 .../graphics/light-physical-units.tsx         |  2 +-
 .../examples/graphics/lights-baked-a-o.tsx    |  2 +-
 .../src/examples/graphics/lights-baked.tsx    |  2 +-
 examples/src/examples/graphics/lights.tsx     |  2 +-
 examples/src/examples/graphics/lines.tsx      |  2 +-
 .../graphics/material-anisotropic.tsx         |  2 +-
 .../src/examples/graphics/material-basic.tsx  |  2 +-
 .../examples/graphics/material-clear-coat.tsx |  2 +-
 .../examples/graphics/material-physical.tsx   |  2 +-
 .../material-translucent-specular.tsx         |  2 +-
 .../src/examples/graphics/mesh-decals.tsx     |  2 +-
 .../examples/graphics/mesh-deformation.tsx    |  2 +-
 .../src/examples/graphics/mesh-generation.tsx |  2 +-
 .../src/examples/graphics/mesh-morph-many.tsx |  2 +-
 examples/src/examples/graphics/mesh-morph.tsx |  2 +-
 .../src/examples/graphics/model-asset.tsx     |  2 +-
 .../src/examples/graphics/model-outline.tsx   |  2 +-
 .../examples/graphics/model-textured-box.tsx  |  2 +-
 examples/src/examples/graphics/multi-view.tsx |  2 +-
 examples/src/examples/graphics/paint-mesh.tsx |  2 +-
 examples/src/examples/graphics/painter.tsx    |  2 +-
 .../graphics/particles-anim-index.tsx         |  2 +-
 .../graphics/particles-random-sprites.tsx     |  2 +-
 .../src/examples/graphics/particles-snow.tsx  |  2 +-
 .../src/examples/graphics/particles-spark.tsx |  2 +-
 .../graphics/point-cloud-simulation.tsx       |  2 +-
 .../src/examples/graphics/point-cloud.tsx     |  2 +-
 examples/src/examples/graphics/portal.tsx     |  2 +-
 .../src/examples/graphics/post-effects.tsx    |  2 +-
 .../src/examples/graphics/render-asset.tsx    |  2 +-
 .../src/examples/graphics/render-cubemap.tsx  |  2 +-
 .../examples/graphics/render-to-texture.tsx   |  2 +-
 .../src/examples/graphics/shader-burn.tsx     |  2 +-
 .../src/examples/graphics/shader-compile.tsx  |  2 +-
 .../src/examples/graphics/shader-toon.tsx     |  2 +-
 .../src/examples/graphics/shader-wobble.tsx   |  2 +-
 .../src/examples/graphics/shadow-cascades.tsx |  2 +-
 examples/src/examples/graphics/shapes.tsx     |  2 +-
 .../src/examples/graphics/texture-basis.tsx   |  2 +-
 .../examples/graphics/transform-feedback.tsx  |  2 +-
 .../src/examples/graphics/video-texture.tsx   |  2 +-
 examples/src/examples/input/gamepad.tsx       |  2 +-
 examples/src/examples/input/keyboard.tsx      |  2 +-
 examples/src/examples/input/mouse.tsx         |  2 +-
 examples/src/examples/loaders/draco-glb.tsx   |  2 +-
 examples/src/examples/loaders/glb.tsx         |  2 +-
 examples/src/examples/loaders/gltf-export.tsx |  2 +-
 examples/src/examples/loaders/loaders-gl.tsx  |  2 +-
 examples/src/examples/loaders/obj.tsx         |  2 +-
 examples/src/examples/loaders/usdz-export.tsx |  2 +-
 examples/src/examples/misc/hello-world.tsx    |  2 +-
 examples/src/examples/misc/mini-stats.tsx     |  2 +-
 examples/src/examples/misc/spineboy.tsx       |  2 +-
 .../examples/physics/compound-collision.tsx   |  2 +-
 .../src/examples/physics/falling-shapes.tsx   |  2 +-
 .../src/examples/physics/offset-collision.tsx |  2 +-
 examples/src/examples/physics/raycast.tsx     |  2 +-
 examples/src/examples/physics/vehicle.tsx     |  2 +-
 examples/src/examples/sound/positional.tsx    |  2 +-
 .../examples/user-interface/button-basic.tsx  |  2 +-
 .../examples/user-interface/button-sprite.tsx |  2 +-
 .../examples/user-interface/custom-shader.tsx |  2 +-
 .../examples/user-interface/layout-group.tsx  |  2 +-
 .../user-interface/particle-system.tsx        |  2 +-
 .../examples/user-interface/scroll-view.tsx   |  2 +-
 .../user-interface/text-auto-font-size.tsx    |  2 +-
 .../examples/user-interface/text-emojis.tsx   |  2 +-
 .../user-interface/text-localization.tsx      |  2 +-
 .../user-interface/text-typewriter.tsx        |  2 +-
 examples/src/examples/user-interface/text.tsx |  2 +-
 .../user-interface/world-to-screen.tsx        |  2 +-
 .../src/examples/user-interface/world-ui.tsx  |  2 +-
 examples/src/examples/xr/ar-basic.tsx         |  2 +-
 examples/src/examples/xr/ar-hit-test.tsx      |  2 +-
 examples/src/examples/xr/vr-basic.tsx         |  2 +-
 examples/src/examples/xr/vr-controllers.tsx   |  2 +-
 examples/src/examples/xr/vr-hands.tsx         |  2 +-
 examples/src/examples/xr/vr-movement.tsx      |  2 +-
 examples/src/examples/xr/xr-picking.tsx       |  2 +-
 examples/webgpu-temp/four.html                |  4 +-
 examples/webgpu-temp/one.html                 |  4 +-
 examples/webgpu-temp/three.html               |  4 +-
 examples/webgpu-temp/two.html                 |  4 +-
 src/platform/graphics/constants.js            | 12 ------
 .../graphics/graphics-device-create.js        | 26 ++++++------
 src/platform/graphics/graphics-device.js      |  4 +-
 .../graphics/webgl/webgl-graphics-device.js   |  7 ++--
 .../graphics/webgpu/webgpu-graphics-device.js |  4 +-
 115 files changed, 153 insertions(+), 167 deletions(-)

diff --git a/examples/src/app/example.tsx b/examples/src/app/example.tsx
index 65254734ec9..8031538fc14 100644
--- a/examples/src/app/example.tsx
+++ b/examples/src/app/example.tsx
@@ -8,16 +8,13 @@ import { withRouter } from 'react-router-dom';
 import ControlPanel from './control-panel';
 import { Observer } from '@playcanvas/observer';
 
-const DEVICETYPE = {
-    WEBGL1: 'webgl1',
-    WEBGL2: 'webgl2',
-    WEBGPU: 'webgpu'
-};
-
+const DEVICETYPE_WEBGL1 = 'webgl1';
+const DEVICETYPE_WEBGL2 = 'webgl2';
+const DEVICETYPE_WEBGPU = 'webgpu';
 const deviceTypeNames = {
-    [DEVICETYPE.WEBGL1]: 'WebGL 1',
-    [DEVICETYPE.WEBGL2]: 'WebGL 2',
-    [DEVICETYPE.WEBGPU]: 'WebGPU'
+    [DEVICETYPE_WEBGL1]: 'WebGL 1',
+    [DEVICETYPE_WEBGL2]: 'WebGL 2',
+    [DEVICETYPE_WEBGPU]: 'WebGPU'
 };
 
 const controlsObserver = new Observer();
@@ -130,21 +127,21 @@ class Example extends Component <ExampleProps, ExampleState> {
 
     setDisabledOptions = (preferredDevice = 'webgpu', activeDevice: string) => {
         const selectInput = this.deviceTypeSelectInput;
-        if ((preferredDevice === DEVICETYPE.WEBGL2 || preferredDevice === DEVICETYPE.WEBGPU) && activeDevice === DEVICETYPE.WEBGL1) {
-            selectInput.fallbackOrder = [DEVICETYPE.WEBGPU, DEVICETYPE.WEBGL2, DEVICETYPE.WEBGL1];
+        if ((preferredDevice === DEVICETYPE_WEBGL2 || preferredDevice === DEVICETYPE_WEBGPU) && activeDevice === DEVICETYPE_WEBGL1) {
+            selectInput.fallbackOrder = [DEVICETYPE_WEBGPU, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGL1];
             selectInput.disabledOptions = {
-                [DEVICETYPE.WEBGPU]: 'WebGPU (not supported)',
-                [DEVICETYPE.WEBGL2]: 'WebGL 2 (not supported)'
+                [DEVICETYPE_WEBGPU]: 'WebGPU (not supported)',
+                [DEVICETYPE_WEBGL2]: 'WebGL 2 (not supported)'
             };
-        } else if (preferredDevice === DEVICETYPE.WEBGL1 && activeDevice === DEVICETYPE.WEBGL2) {
-            selectInput.fallbackOrder = [DEVICETYPE.WEBGL1, DEVICETYPE.WEBGL2, DEVICETYPE.WEBGPU];
+        } else if (preferredDevice === DEVICETYPE_WEBGL1 && activeDevice === DEVICETYPE_WEBGL2) {
+            selectInput.fallbackOrder = [DEVICETYPE_WEBGL1, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGPU];
             selectInput.disabledOptions = {
-                [DEVICETYPE.WEBGL1]: 'WebGL 1 (not supported)'
+                [DEVICETYPE_WEBGL1]: 'WebGL 1 (not supported)'
             };
-        } else if (preferredDevice === DEVICETYPE.WEBGPU && activeDevice !== DEVICETYPE.WEBGPU) {
-            selectInput.fallbackOrder = [DEVICETYPE.WEBGPU, DEVICETYPE.WEBGL2, DEVICETYPE.WEBGL1];
+        } else if (preferredDevice === DEVICETYPE_WEBGPU && activeDevice !== DEVICETYPE_WEBGPU) {
+            selectInput.fallbackOrder = [DEVICETYPE_WEBGPU, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGL1];
             selectInput.disabledOptions = {
-                [DEVICETYPE.WEBGPU]: 'WebGPU (not supported)'
+                [DEVICETYPE_WEBGPU]: 'WebGPU (not supported)'
             };
         } else {
             selectInput.disabledOptions = null;
@@ -195,9 +192,9 @@ class Example extends Component <ExampleProps, ExampleState> {
                 <SelectInput
                     id='deviceTypeSelectInput'
                     options={[
-                        { t: deviceTypeNames[DEVICETYPE.WEBGL1], v: DEVICETYPE.WEBGL1 },
-                        { t: deviceTypeNames[DEVICETYPE.WEBGL2], v: DEVICETYPE.WEBGL2 },
-                        { t: deviceTypeNames[DEVICETYPE.WEBGPU], v: DEVICETYPE.WEBGPU }
+                        { t: deviceTypeNames[DEVICETYPE_WEBGL1], v: DEVICETYPE_WEBGL1 },
+                        { t: deviceTypeNames[DEVICETYPE_WEBGL2], v: DEVICETYPE_WEBGL2 },
+                        { t: deviceTypeNames[DEVICETYPE_WEBGPU], v: DEVICETYPE_WEBGPU }
                     ]}
                     onSelect={this.onSetPreferredGraphicsDevice}
                     prefix='Active Device: '
diff --git a/examples/src/app/helpers/formatters.mjs b/examples/src/app/helpers/formatters.mjs
index cf78aea7d52..86e27ddb5f2 100644
--- a/examples/src/app/helpers/formatters.mjs
+++ b/examples/src/app/helpers/formatters.mjs
@@ -14,7 +14,7 @@ const findClosingBracketMatchIndex = (str, pos) => {
 
 const getTypeScriptFunctionFromText = (text) => {
     const transformedCode = text;
-    const functionSignatureStartString = 'example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE';
+    const functionSignatureStartString = 'example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2';
     const indexOfFunctionSignatureStart = transformedCode.indexOf(functionSignatureStartString);
     const functionSignatureEndString = '): void ';
     const indexOfFunctionSignatureEnd = indexOfFunctionSignatureStart + transformedCode.substring(indexOfFunctionSignatureStart).indexOf(functionSignatureEndString) + functionSignatureEndString.length;
diff --git a/examples/src/examples/animation/blend-trees-1d.tsx b/examples/src/examples/animation/blend-trees-1d.tsx
index 4a83bd41bd9..1de32bd5c30 100644
--- a/examples/src/examples/animation/blend-trees-1d.tsx
+++ b/examples/src/examples/animation/blend-trees-1d.tsx
@@ -16,7 +16,7 @@ class BlendTrees1DExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             'model': new pc.Asset('model', 'container', { url: '/static/assets/models/bitmoji.glb' }),
diff --git a/examples/src/examples/animation/blend-trees-2d-cartesian.tsx b/examples/src/examples/animation/blend-trees-2d-cartesian.tsx
index 139cfd45e1a..745b1c9e3ee 100644
--- a/examples/src/examples/animation/blend-trees-2d-cartesian.tsx
+++ b/examples/src/examples/animation/blend-trees-2d-cartesian.tsx
@@ -89,7 +89,7 @@ class BlendTrees2DCartesianExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/blend-trees-2d-directional.tsx b/examples/src/examples/animation/blend-trees-2d-directional.tsx
index 0f1fbc60e06..93718f03261 100644
--- a/examples/src/examples/animation/blend-trees-2d-directional.tsx
+++ b/examples/src/examples/animation/blend-trees-2d-directional.tsx
@@ -80,7 +80,7 @@ class BlendTrees2DDirectionalExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/component-properties.tsx b/examples/src/examples/animation/component-properties.tsx
index 5afc507c842..c97305059d3 100644
--- a/examples/src/examples/animation/component-properties.tsx
+++ b/examples/src/examples/animation/component-properties.tsx
@@ -16,7 +16,7 @@ class ComponentPropertiesExample {
     }
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/events.tsx b/examples/src/examples/animation/events.tsx
index 07c47d398f4..5546e88b554 100644
--- a/examples/src/examples/animation/events.tsx
+++ b/examples/src/examples/animation/events.tsx
@@ -4,7 +4,7 @@ class EventsExample {
     static CATEGORY = 'Animation';
     static NAME = 'Events';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/layer-masks.tsx b/examples/src/examples/animation/layer-masks.tsx
index 2537de1ace5..60a7f5fc837 100644
--- a/examples/src/examples/animation/layer-masks.tsx
+++ b/examples/src/examples/animation/layer-masks.tsx
@@ -38,7 +38,7 @@ class LayerMasksExample {
     }
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
             touch: new pc.TouchDevice(document.body)
diff --git a/examples/src/examples/animation/locomotion.tsx b/examples/src/examples/animation/locomotion.tsx
index 6aa1f0ce6c2..4894fe91b17 100644
--- a/examples/src/examples/animation/locomotion.tsx
+++ b/examples/src/examples/animation/locomotion.tsx
@@ -18,7 +18,7 @@ class LocomotionExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/animation/tween.tsx b/examples/src/examples/animation/tween.tsx
index 405221edc85..1ee6882a5de 100644
--- a/examples/src/examples/animation/tween.tsx
+++ b/examples/src/examples/animation/tween.tsx
@@ -12,7 +12,7 @@ class TweenExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
         app.start();
diff --git a/examples/src/examples/camera/first-person.tsx b/examples/src/examples/camera/first-person.tsx
index d1b80b5ce31..76bcd117254 100644
--- a/examples/src/examples/camera/first-person.tsx
+++ b/examples/src/examples/camera/first-person.tsx
@@ -6,7 +6,7 @@ class FirstPersonExample {
     static NAME = 'First Person';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/camera/fly.tsx b/examples/src/examples/camera/fly.tsx
index f26cb8b383a..43258beb04e 100644
--- a/examples/src/examples/camera/fly.tsx
+++ b/examples/src/examples/camera/fly.tsx
@@ -6,7 +6,7 @@ class FlyExample {
     static NAME = 'Fly';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/camera/orbit.tsx b/examples/src/examples/camera/orbit.tsx
index 3f7e727482c..4b2d08affdf 100644
--- a/examples/src/examples/camera/orbit.tsx
+++ b/examples/src/examples/camera/orbit.tsx
@@ -6,7 +6,7 @@ class OrbitExample {
     static NAME = 'Orbit';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/graphics/area-lights.tsx b/examples/src/examples/graphics/area-lights.tsx
index e8d233006c6..3696a0119ff 100644
--- a/examples/src/examples/graphics/area-lights.tsx
+++ b/examples/src/examples/graphics/area-lights.tsx
@@ -7,7 +7,7 @@ class AreaLightsExample {
     static WEBGPU_ENABLED = true;
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'color': new pc.Asset('color', 'texture', { url: '/static/assets/textures/seaside-rocks01-color.jpg' }),
diff --git a/examples/src/examples/graphics/area-picker.tsx b/examples/src/examples/graphics/area-picker.tsx
index 906a4277807..6f5d23a9d21 100644
--- a/examples/src/examples/graphics/area-picker.tsx
+++ b/examples/src/examples/graphics/area-picker.tsx
@@ -4,7 +4,7 @@ class AreaPickerExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Area Picker';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'bloom': new pc.Asset('bloom', 'script', { url: '/static/scripts/posteffects/posteffect-bloom.js' }),
diff --git a/examples/src/examples/graphics/asset-viewer.tsx b/examples/src/examples/graphics/asset-viewer.tsx
index c41ac57f5fb..627fbe44ead 100644
--- a/examples/src/examples/graphics/asset-viewer.tsx
+++ b/examples/src/examples/graphics/asset-viewer.tsx
@@ -17,7 +17,7 @@ class AssetViewerExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             orbitCamera: new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/batching-dynamic.tsx b/examples/src/examples/graphics/batching-dynamic.tsx
index 60fb13390c3..a01fc4b6c55 100644
--- a/examples/src/examples/graphics/batching-dynamic.tsx
+++ b/examples/src/examples/graphics/batching-dynamic.tsx
@@ -4,7 +4,7 @@ class BatchingDynamicExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Batching Dynamic';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/box-reflection.tsx b/examples/src/examples/graphics/box-reflection.tsx
index 83777cbb485..6e4ee90fbd0 100644
--- a/examples/src/examples/graphics/box-reflection.tsx
+++ b/examples/src/examples/graphics/box-reflection.tsx
@@ -35,7 +35,7 @@ class BoxReflectionExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             'script1': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/clustered-area-lights.tsx b/examples/src/examples/graphics/clustered-area-lights.tsx
index eb6709a1597..55b75421ccc 100644
--- a/examples/src/examples/graphics/clustered-area-lights.tsx
+++ b/examples/src/examples/graphics/clustered-area-lights.tsx
@@ -20,7 +20,7 @@ class AreaLightsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data:any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data:any): void {
 
         data.set('settings', {
             material: {
diff --git a/examples/src/examples/graphics/clustered-lighting.tsx b/examples/src/examples/graphics/clustered-lighting.tsx
index 16ce52c573a..ca751897e76 100644
--- a/examples/src/examples/graphics/clustered-lighting.tsx
+++ b/examples/src/examples/graphics/clustered-lighting.tsx
@@ -5,7 +5,7 @@ class ClusteredLightingExample {
     static NAME = 'Clustered Lighting';
     static ENGINE = 'PERFORMANCE';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/clustered-omni-shadows.tsx b/examples/src/examples/graphics/clustered-omni-shadows.tsx
index 5db56dc93f4..c56b50b6ff9 100644
--- a/examples/src/examples/graphics/clustered-omni-shadows.tsx
+++ b/examples/src/examples/graphics/clustered-omni-shadows.tsx
@@ -31,7 +31,7 @@ class ClusteredOmniShadowsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/clustered-spot-shadows.tsx b/examples/src/examples/graphics/clustered-spot-shadows.tsx
index b2ffeccc9e4..3e6b37d19b9 100644
--- a/examples/src/examples/graphics/clustered-spot-shadows.tsx
+++ b/examples/src/examples/graphics/clustered-spot-shadows.tsx
@@ -62,7 +62,7 @@ class ClusteredSpotShadowsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/grab-pass.tsx b/examples/src/examples/graphics/grab-pass.tsx
index da3d7f971d6..1c225df2032 100644
--- a/examples/src/examples/graphics/grab-pass.tsx
+++ b/examples/src/examples/graphics/grab-pass.tsx
@@ -75,7 +75,7 @@ class GrabPassExample {
         `
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'normal': new pc.Asset('normal', 'texture', { url: '/static/assets/textures/normal-map.png' }),
diff --git a/examples/src/examples/graphics/ground-fog.tsx b/examples/src/examples/graphics/ground-fog.tsx
index 96822c8cf99..9c75b27694e 100644
--- a/examples/src/examples/graphics/ground-fog.tsx
+++ b/examples/src/examples/graphics/ground-fog.tsx
@@ -101,7 +101,7 @@ class GroundFogExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/hardware-instancing.tsx b/examples/src/examples/graphics/hardware-instancing.tsx
index 767d7ca965b..3a3ff7ae51e 100644
--- a/examples/src/examples/graphics/hardware-instancing.tsx
+++ b/examples/src/examples/graphics/hardware-instancing.tsx
@@ -4,7 +4,7 @@ class HardwareInstancingExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Hardware Instancing';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
diff --git a/examples/src/examples/graphics/hierarchy.tsx b/examples/src/examples/graphics/hierarchy.tsx
index edaa78d7fe8..9049a4bdce6 100644
--- a/examples/src/examples/graphics/hierarchy.tsx
+++ b/examples/src/examples/graphics/hierarchy.tsx
@@ -4,7 +4,7 @@ class HierarchyExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Hierarchy';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/layers.tsx b/examples/src/examples/graphics/layers.tsx
index 337623d1ba5..0a8106a9230 100644
--- a/examples/src/examples/graphics/layers.tsx
+++ b/examples/src/examples/graphics/layers.tsx
@@ -4,7 +4,7 @@ class LayersExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Layers';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/light-physical-units.tsx b/examples/src/examples/graphics/light-physical-units.tsx
index 505a826fa62..11f62549ad6 100644
--- a/examples/src/examples/graphics/light-physical-units.tsx
+++ b/examples/src/examples/graphics/light-physical-units.tsx
@@ -54,7 +54,7 @@ class LightPhysicalUnitsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             orbitCamera: new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/lights-baked-a-o.tsx b/examples/src/examples/graphics/lights-baked-a-o.tsx
index 28db29cd4d0..99ea67a1205 100644
--- a/examples/src/examples/graphics/lights-baked-a-o.tsx
+++ b/examples/src/examples/graphics/lights-baked-a-o.tsx
@@ -68,7 +68,7 @@ class LightsBakedAOExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/lights-baked.tsx b/examples/src/examples/graphics/lights-baked.tsx
index 8ce907d294f..c064b589a7c 100644
--- a/examples/src/examples/graphics/lights-baked.tsx
+++ b/examples/src/examples/graphics/lights-baked.tsx
@@ -4,7 +4,7 @@ class LightsBakedExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Lights Baked';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/lights.tsx b/examples/src/examples/graphics/lights.tsx
index 6efde2a4b41..f5584a12bf8 100644
--- a/examples/src/examples/graphics/lights.tsx
+++ b/examples/src/examples/graphics/lights.tsx
@@ -52,7 +52,7 @@ class LightsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data:any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data:any): void {
         function createMaterial(colors: any) {
             const material: any = new pc.StandardMaterial();
             for (const param in colors) {
diff --git a/examples/src/examples/graphics/lines.tsx b/examples/src/examples/graphics/lines.tsx
index 48bbe43114b..4d392ada1aa 100644
--- a/examples/src/examples/graphics/lines.tsx
+++ b/examples/src/examples/graphics/lines.tsx
@@ -4,7 +4,7 @@ class LinesExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Lines';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
diff --git a/examples/src/examples/graphics/material-anisotropic.tsx b/examples/src/examples/graphics/material-anisotropic.tsx
index 9c655511eec..a4272b135d4 100644
--- a/examples/src/examples/graphics/material-anisotropic.tsx
+++ b/examples/src/examples/graphics/material-anisotropic.tsx
@@ -4,7 +4,7 @@ class LightsExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Anisotropic';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/material-basic.tsx b/examples/src/examples/graphics/material-basic.tsx
index 24bb1c5af97..bebb27a3b2f 100644
--- a/examples/src/examples/graphics/material-basic.tsx
+++ b/examples/src/examples/graphics/material-basic.tsx
@@ -4,7 +4,7 @@ class MaterialBasicExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Basic';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/arial.json' }),
diff --git a/examples/src/examples/graphics/material-clear-coat.tsx b/examples/src/examples/graphics/material-clear-coat.tsx
index 329590ffe7c..85a5b528ece 100644
--- a/examples/src/examples/graphics/material-clear-coat.tsx
+++ b/examples/src/examples/graphics/material-clear-coat.tsx
@@ -4,7 +4,7 @@ class MaterialClearCoatExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Clear Coat';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/material-physical.tsx b/examples/src/examples/graphics/material-physical.tsx
index b04a362a5e1..e1edfac1e31 100644
--- a/examples/src/examples/graphics/material-physical.tsx
+++ b/examples/src/examples/graphics/material-physical.tsx
@@ -4,7 +4,7 @@ class MaterialPhysicalExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Physical';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/material-translucent-specular.tsx b/examples/src/examples/graphics/material-translucent-specular.tsx
index f4b92a168ef..f8775b319a2 100644
--- a/examples/src/examples/graphics/material-translucent-specular.tsx
+++ b/examples/src/examples/graphics/material-translucent-specular.tsx
@@ -4,7 +4,7 @@ class MaterialTranslucentSpecularExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Translucent Specular';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/mesh-decals.tsx b/examples/src/examples/graphics/mesh-decals.tsx
index 6bf10bdc35f..7f0d3df52a2 100644
--- a/examples/src/examples/graphics/mesh-decals.tsx
+++ b/examples/src/examples/graphics/mesh-decals.tsx
@@ -4,7 +4,7 @@ class MeshDecalsExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Decals';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'spark': new pc.Asset('spark', 'texture', { url: '/static/assets/textures/spark.png' })
diff --git a/examples/src/examples/graphics/mesh-deformation.tsx b/examples/src/examples/graphics/mesh-deformation.tsx
index e3bc8f0bae2..0dcec5aa0a3 100644
--- a/examples/src/examples/graphics/mesh-deformation.tsx
+++ b/examples/src/examples/graphics/mesh-deformation.tsx
@@ -4,7 +4,7 @@ class MeshDeformationExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Deformation';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' }),
diff --git a/examples/src/examples/graphics/mesh-generation.tsx b/examples/src/examples/graphics/mesh-generation.tsx
index dfeeac93a42..51043bd92b6 100644
--- a/examples/src/examples/graphics/mesh-generation.tsx
+++ b/examples/src/examples/graphics/mesh-generation.tsx
@@ -4,7 +4,7 @@ class MeshGenerationExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Generation';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'playcanvasGrey': new pc.Asset('playcanvasGrey', 'texture', { url: '/static/assets/textures/playcanvas-grey.png' })
diff --git a/examples/src/examples/graphics/mesh-morph-many.tsx b/examples/src/examples/graphics/mesh-morph-many.tsx
index 9faff6f77ec..7c01daff1f3 100644
--- a/examples/src/examples/graphics/mesh-morph-many.tsx
+++ b/examples/src/examples/graphics/mesh-morph-many.tsx
@@ -4,7 +4,7 @@ class MeshMorphManyExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Morph Many';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/mesh-morph.tsx b/examples/src/examples/graphics/mesh-morph.tsx
index 58c47558fa6..64c5c5fdcf1 100644
--- a/examples/src/examples/graphics/mesh-morph.tsx
+++ b/examples/src/examples/graphics/mesh-morph.tsx
@@ -4,7 +4,7 @@ class MeshMorphExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Morph';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/model-asset.tsx b/examples/src/examples/graphics/model-asset.tsx
index 6911dd0730c..7c4876423f1 100644
--- a/examples/src/examples/graphics/model-asset.tsx
+++ b/examples/src/examples/graphics/model-asset.tsx
@@ -4,7 +4,7 @@ class ModelAssetExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Model Asset';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
diff --git a/examples/src/examples/graphics/model-outline.tsx b/examples/src/examples/graphics/model-outline.tsx
index f0cc42c42dd..5b98b7b7bf4 100644
--- a/examples/src/examples/graphics/model-outline.tsx
+++ b/examples/src/examples/graphics/model-outline.tsx
@@ -4,7 +4,7 @@ class ModelOutlineExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Model Outline';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'outline': new pc.Asset('outline', 'script', { url: '/static/scripts/posteffects/posteffect-outline.js' })
diff --git a/examples/src/examples/graphics/model-textured-box.tsx b/examples/src/examples/graphics/model-textured-box.tsx
index d8492457168..8a8a5b28fe9 100644
--- a/examples/src/examples/graphics/model-textured-box.tsx
+++ b/examples/src/examples/graphics/model-textured-box.tsx
@@ -4,7 +4,7 @@ class ModelTexturedBoxExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Model Textured Box';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'clouds': new pc.Asset('clouds', 'texture', { url: '/static/assets/textures/clouds.jpg' })
diff --git a/examples/src/examples/graphics/multi-view.tsx b/examples/src/examples/graphics/multi-view.tsx
index b35a572f5f0..7f99b2004ce 100644
--- a/examples/src/examples/graphics/multi-view.tsx
+++ b/examples/src/examples/graphics/multi-view.tsx
@@ -4,7 +4,7 @@ class MultiViewExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Multi View';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // set up and load draco module, as the glb we load is draco compressed
         pc.WasmModule.setConfig('DracoDecoderModule', {
diff --git a/examples/src/examples/graphics/paint-mesh.tsx b/examples/src/examples/graphics/paint-mesh.tsx
index ad360f3f7aa..c8cff185f79 100644
--- a/examples/src/examples/graphics/paint-mesh.tsx
+++ b/examples/src/examples/graphics/paint-mesh.tsx
@@ -49,7 +49,7 @@ class PaintMeshExample {
             }`
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas);
diff --git a/examples/src/examples/graphics/painter.tsx b/examples/src/examples/graphics/painter.tsx
index b28a55b07c7..3e7a5a0ed1b 100644
--- a/examples/src/examples/graphics/painter.tsx
+++ b/examples/src/examples/graphics/painter.tsx
@@ -4,7 +4,7 @@ class PainterExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Painter';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/particles-anim-index.tsx b/examples/src/examples/graphics/particles-anim-index.tsx
index b3d4d4dfe3f..a90d2adf9ca 100644
--- a/examples/src/examples/graphics/particles-anim-index.tsx
+++ b/examples/src/examples/graphics/particles-anim-index.tsx
@@ -6,7 +6,7 @@ class ParticlesAnimIndexExample {
     static NAME = 'Particles: Anim Index';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/particles-random-sprites.tsx b/examples/src/examples/graphics/particles-random-sprites.tsx
index e4c3f340ece..b7380f721df 100644
--- a/examples/src/examples/graphics/particles-random-sprites.tsx
+++ b/examples/src/examples/graphics/particles-random-sprites.tsx
@@ -6,7 +6,7 @@ class ParticlesRandomSpritesExample {
     static NAME = 'Particles: Random Sprites';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/graphics/particles-snow.tsx b/examples/src/examples/graphics/particles-snow.tsx
index 27abbba2fb5..122dc62df31 100644
--- a/examples/src/examples/graphics/particles-snow.tsx
+++ b/examples/src/examples/graphics/particles-snow.tsx
@@ -6,7 +6,7 @@ class ParticlesSnowExample {
     static NAME = 'Particles: Snow';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/particles-spark.tsx b/examples/src/examples/graphics/particles-spark.tsx
index ec25b807912..df4f8f1f37f 100644
--- a/examples/src/examples/graphics/particles-spark.tsx
+++ b/examples/src/examples/graphics/particles-spark.tsx
@@ -6,7 +6,7 @@ class ParticlesSparkExample {
     static NAME = 'Particles: Spark';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/point-cloud-simulation.tsx b/examples/src/examples/graphics/point-cloud-simulation.tsx
index deaecc46e8a..442d76a97ec 100644
--- a/examples/src/examples/graphics/point-cloud-simulation.tsx
+++ b/examples/src/examples/graphics/point-cloud-simulation.tsx
@@ -51,7 +51,7 @@ void main(void)
     };
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
         app.start();
diff --git a/examples/src/examples/graphics/point-cloud.tsx b/examples/src/examples/graphics/point-cloud.tsx
index 4dbdb4cf147..91d4bb9c1a0 100644
--- a/examples/src/examples/graphics/point-cloud.tsx
+++ b/examples/src/examples/graphics/point-cloud.tsx
@@ -53,7 +53,7 @@ void main(void)
     };
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/graphics/portal.tsx b/examples/src/examples/graphics/portal.tsx
index 13c42fa975c..69cfcfb7b9e 100644
--- a/examples/src/examples/graphics/portal.tsx
+++ b/examples/src/examples/graphics/portal.tsx
@@ -5,7 +5,7 @@ class PortalExample {
     static NAME = 'Portal';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/graphics/post-effects.tsx b/examples/src/examples/graphics/post-effects.tsx
index 8dd66a17152..0c3a73f2efc 100644
--- a/examples/src/examples/graphics/post-effects.tsx
+++ b/examples/src/examples/graphics/post-effects.tsx
@@ -79,7 +79,7 @@ class PostEffectsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         // set up and load draco module, as the glb we load is draco compressed
         pc.WasmModule.setConfig('DracoDecoderModule', {
diff --git a/examples/src/examples/graphics/render-asset.tsx b/examples/src/examples/graphics/render-asset.tsx
index c3edf953ae3..744cdd21a0a 100644
--- a/examples/src/examples/graphics/render-asset.tsx
+++ b/examples/src/examples/graphics/render-asset.tsx
@@ -4,7 +4,7 @@ class RenderAssetExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Render Asset';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/render-cubemap.tsx b/examples/src/examples/graphics/render-cubemap.tsx
index 95eac05e4fc..1019a4bd56a 100644
--- a/examples/src/examples/graphics/render-cubemap.tsx
+++ b/examples/src/examples/graphics/render-cubemap.tsx
@@ -4,7 +4,7 @@ class RenderCubemapExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Render Cubemap';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/render-to-texture.tsx b/examples/src/examples/graphics/render-to-texture.tsx
index e6400378f27..e2a7fa1bb1e 100644
--- a/examples/src/examples/graphics/render-to-texture.tsx
+++ b/examples/src/examples/graphics/render-to-texture.tsx
@@ -4,7 +4,7 @@ class RenderToTextureExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Render to Texture';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Overview:
         // There are 3 layers used:
diff --git a/examples/src/examples/graphics/shader-burn.tsx b/examples/src/examples/graphics/shader-burn.tsx
index cdc8c3e9529..c5aa5e9b52f 100644
--- a/examples/src/examples/graphics/shader-burn.tsx
+++ b/examples/src/examples/graphics/shader-burn.tsx
@@ -41,7 +41,7 @@ void main(void)
 }`
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' }),
diff --git a/examples/src/examples/graphics/shader-compile.tsx b/examples/src/examples/graphics/shader-compile.tsx
index 43b3573ad6b..957f0f34201 100644
--- a/examples/src/examples/graphics/shader-compile.tsx
+++ b/examples/src/examples/graphics/shader-compile.tsx
@@ -4,7 +4,7 @@ class ShaderCompileExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Shader Compile';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // This example servers as a test framework for large shader compilation speed test. Enable tracking for it.
         pc.Tracing.set(pc.TRACEID_SHADER_COMPILE, true);
diff --git a/examples/src/examples/graphics/shader-toon.tsx b/examples/src/examples/graphics/shader-toon.tsx
index b2d206a4728..ff0e8bcd4c3 100644
--- a/examples/src/examples/graphics/shader-toon.tsx
+++ b/examples/src/examples/graphics/shader-toon.tsx
@@ -60,7 +60,7 @@ void main(void)
 `
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
diff --git a/examples/src/examples/graphics/shader-wobble.tsx b/examples/src/examples/graphics/shader-wobble.tsx
index 3b9df8c28e5..996d1ac3f72 100644
--- a/examples/src/examples/graphics/shader-wobble.tsx
+++ b/examples/src/examples/graphics/shader-wobble.tsx
@@ -35,7 +35,7 @@ void main(void)
 }`
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
diff --git a/examples/src/examples/graphics/shadow-cascades.tsx b/examples/src/examples/graphics/shadow-cascades.tsx
index cd60ff9dc7a..2d72b2ffbf6 100644
--- a/examples/src/examples/graphics/shadow-cascades.tsx
+++ b/examples/src/examples/graphics/shadow-cascades.tsx
@@ -39,7 +39,7 @@ class ShadowCascadesExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/shapes.tsx b/examples/src/examples/graphics/shapes.tsx
index e770ab2028f..204ced1f3b3 100644
--- a/examples/src/examples/graphics/shapes.tsx
+++ b/examples/src/examples/graphics/shapes.tsx
@@ -4,7 +4,7 @@ class ShapesExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Shapes';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/texture-basis.tsx b/examples/src/examples/graphics/texture-basis.tsx
index f154b44f9a8..be44f4ff8ff 100644
--- a/examples/src/examples/graphics/texture-basis.tsx
+++ b/examples/src/examples/graphics/texture-basis.tsx
@@ -10,7 +10,7 @@ class TextureBasisExample {
     // The normalmap has been converted with the following arguments:
     //   basisu seaside-rocks01-normal.jpg -normal_map -swizzle gggr -renorm -q 255 -mipmap
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // initialize basis
         pc.basisInitialize({
diff --git a/examples/src/examples/graphics/transform-feedback.tsx b/examples/src/examples/graphics/transform-feedback.tsx
index 9803488ccbe..335f37b4ed1 100644
--- a/examples/src/examples/graphics/transform-feedback.tsx
+++ b/examples/src/examples/graphics/transform-feedback.tsx
@@ -90,7 +90,7 @@ void main(void)
     };
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shaderFeedback.vert': string, 'shaderCloud.vert': string, 'shaderCloud.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shaderFeedback.vert': string, 'shaderCloud.vert': string, 'shaderCloud.frag': string }): void {
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/graphics/video-texture.tsx b/examples/src/examples/graphics/video-texture.tsx
index f1d40467a13..5e19cd1420a 100644
--- a/examples/src/examples/graphics/video-texture.tsx
+++ b/examples/src/examples/graphics/video-texture.tsx
@@ -6,7 +6,7 @@ class VideoTextureExample {
     static NAME = 'Video Texture';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/input/gamepad.tsx b/examples/src/examples/input/gamepad.tsx
index 1eda339d8f2..5fb3cc296c7 100644
--- a/examples/src/examples/input/gamepad.tsx
+++ b/examples/src/examples/input/gamepad.tsx
@@ -5,7 +5,7 @@ class GamepadExample {
     static NAME = 'Gamepad';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         // Create the application and start the update loop
 
         const assets = {
diff --git a/examples/src/examples/input/keyboard.tsx b/examples/src/examples/input/keyboard.tsx
index b5d97d04e09..7e70424fa01 100644
--- a/examples/src/examples/input/keyboard.tsx
+++ b/examples/src/examples/input/keyboard.tsx
@@ -6,7 +6,7 @@ class KeyboardExample {
     static NAME = 'Keyboard';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/input/mouse.tsx b/examples/src/examples/input/mouse.tsx
index 75ad6208e9b..91539273047 100644
--- a/examples/src/examples/input/mouse.tsx
+++ b/examples/src/examples/input/mouse.tsx
@@ -6,7 +6,7 @@ class MouseExample {
     static NAME = 'Mouse';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
diff --git a/examples/src/examples/loaders/draco-glb.tsx b/examples/src/examples/loaders/draco-glb.tsx
index 8f91fd506eb..8a9ac7df579 100644
--- a/examples/src/examples/loaders/draco-glb.tsx
+++ b/examples/src/examples/loaders/draco-glb.tsx
@@ -4,7 +4,7 @@ class DracoGlbExample {
     static CATEGORY = 'Loaders';
     static NAME = 'Draco GLB';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         pc.WasmModule.setConfig('DracoDecoderModule', {
             glueUrl: '/static/lib/draco/draco.wasm.js',
diff --git a/examples/src/examples/loaders/glb.tsx b/examples/src/examples/loaders/glb.tsx
index 613889894d3..fbcaa150595 100644
--- a/examples/src/examples/loaders/glb.tsx
+++ b/examples/src/examples/loaders/glb.tsx
@@ -4,7 +4,7 @@ class GlbExample {
     static CATEGORY = 'Loaders';
     static NAME = 'GLB';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // The example demonstrates loading of glb file, which contains meshes,
         // lights and cameras, and switches between the cameras every 2 seconds.
diff --git a/examples/src/examples/loaders/gltf-export.tsx b/examples/src/examples/loaders/gltf-export.tsx
index 441280907ff..0c8d40e3f92 100644
--- a/examples/src/examples/loaders/gltf-export.tsx
+++ b/examples/src/examples/loaders/gltf-export.tsx
@@ -13,7 +13,7 @@ class GltfExportExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, pcx: any, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, pcx: any, data: any): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/loaders/loaders-gl.tsx b/examples/src/examples/loaders/loaders-gl.tsx
index b8687fa96e4..50bc0e2ef77 100644
--- a/examples/src/examples/loaders/loaders-gl.tsx
+++ b/examples/src/examples/loaders/loaders-gl.tsx
@@ -44,7 +44,7 @@ void main(void)
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
         // This example uses draco point cloud loader library from https://loaders.gl/
         // Note that many additional formats are supported by the library and can be used.
 
diff --git a/examples/src/examples/loaders/obj.tsx b/examples/src/examples/loaders/obj.tsx
index 077372500ab..a3d6618a2fa 100644
--- a/examples/src/examples/loaders/obj.tsx
+++ b/examples/src/examples/loaders/obj.tsx
@@ -4,7 +4,7 @@ class ObjExample {
     static CATEGORY = 'Loaders';
     static NAME = 'OBJ';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/loaders/usdz-export.tsx b/examples/src/examples/loaders/usdz-export.tsx
index ccdedc00601..0d30614a2cc 100644
--- a/examples/src/examples/loaders/usdz-export.tsx
+++ b/examples/src/examples/loaders/usdz-export.tsx
@@ -13,7 +13,7 @@ class UsdzExportExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, pcx: any, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, pcx: any, data: any): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/misc/hello-world.tsx b/examples/src/examples/misc/hello-world.tsx
index 4885052ffc0..3915f4c5405 100644
--- a/examples/src/examples/misc/hello-world.tsx
+++ b/examples/src/examples/misc/hello-world.tsx
@@ -4,7 +4,7 @@ class HelloWorldExample {
     static CATEGORY = 'Misc';
     static NAME = 'Hello World';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/misc/mini-stats.tsx b/examples/src/examples/misc/mini-stats.tsx
index e917c0c602e..e0e63dcc198 100644
--- a/examples/src/examples/misc/mini-stats.tsx
+++ b/examples/src/examples/misc/mini-stats.tsx
@@ -7,7 +7,7 @@ class MiniStatsExample {
     static ENGINE = 'PERFORMANCE';
     static MINISTATS = true;
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, pcx: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, pcx: any): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
         app.start();
diff --git a/examples/src/examples/misc/spineboy.tsx b/examples/src/examples/misc/spineboy.tsx
index e1433343bcd..77713ec4eb2 100644
--- a/examples/src/examples/misc/spineboy.tsx
+++ b/examples/src/examples/misc/spineboy.tsx
@@ -4,7 +4,7 @@ class SpineboyExample {
     static CATEGORY = 'Misc';
     static NAME = 'Spineboy';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'skeleton': new pc.Asset('skeleton', 'json', { url: '/static/assets/spine/spineboy-pro.json' }),
diff --git a/examples/src/examples/physics/compound-collision.tsx b/examples/src/examples/physics/compound-collision.tsx
index 7a563aee382..623eeb8a0ce 100644
--- a/examples/src/examples/physics/compound-collision.tsx
+++ b/examples/src/examples/physics/compound-collision.tsx
@@ -4,7 +4,7 @@ class CompoundCollisionExample {
     static CATEGORY = 'Physics';
     static NAME = 'Compound Collision';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/physics/falling-shapes.tsx b/examples/src/examples/physics/falling-shapes.tsx
index ef864511694..4aef21bb04e 100644
--- a/examples/src/examples/physics/falling-shapes.tsx
+++ b/examples/src/examples/physics/falling-shapes.tsx
@@ -6,7 +6,7 @@ class FallingShapesExample {
     static NAME = 'Falling Shapes';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
             // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/physics/offset-collision.tsx b/examples/src/examples/physics/offset-collision.tsx
index 64a7efae2cb..f4c6a5bcca9 100644
--- a/examples/src/examples/physics/offset-collision.tsx
+++ b/examples/src/examples/physics/offset-collision.tsx
@@ -5,7 +5,7 @@ class OffsetCollisionExample {
     static CATEGORY = 'Physics';
     static NAME = 'Offset Collision';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/physics/raycast.tsx b/examples/src/examples/physics/raycast.tsx
index 965464dbdf8..19b62dae5f2 100644
--- a/examples/src/examples/physics/raycast.tsx
+++ b/examples/src/examples/physics/raycast.tsx
@@ -6,7 +6,7 @@ class RaycastExample {
     static NAME = 'Raycast';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/physics/vehicle.tsx b/examples/src/examples/physics/vehicle.tsx
index a3f4f3d61d5..c74f82045dc 100644
--- a/examples/src/examples/physics/vehicle.tsx
+++ b/examples/src/examples/physics/vehicle.tsx
@@ -4,7 +4,7 @@ class VehicleExample {
     static CATEGORY = 'Physics';
     static NAME = 'Vehicle';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         pc.WasmModule.setConfig('Ammo', {
             glueUrl: '/static/lib/ammo/ammo.wasm.js',
diff --git a/examples/src/examples/sound/positional.tsx b/examples/src/examples/sound/positional.tsx
index 808d0e4cb19..d73d42618e8 100644
--- a/examples/src/examples/sound/positional.tsx
+++ b/examples/src/examples/sound/positional.tsx
@@ -6,7 +6,7 @@ class PositionalExample {
     static NAME = 'Positional';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/user-interface/button-basic.tsx b/examples/src/examples/user-interface/button-basic.tsx
index d61e5733029..00290c5f79a 100644
--- a/examples/src/examples/user-interface/button-basic.tsx
+++ b/examples/src/examples/user-interface/button-basic.tsx
@@ -4,7 +4,7 @@ class ButtonBasicExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Button Basic';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/button-sprite.tsx b/examples/src/examples/user-interface/button-sprite.tsx
index 56b42c0227a..1cccbfb88ef 100644
--- a/examples/src/examples/user-interface/button-sprite.tsx
+++ b/examples/src/examples/user-interface/button-sprite.tsx
@@ -6,7 +6,7 @@ class ButtonSpriteExample {
     static NAME = 'Button Sprite';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' }),
diff --git a/examples/src/examples/user-interface/custom-shader.tsx b/examples/src/examples/user-interface/custom-shader.tsx
index 815e75c2a6f..af809d79e68 100644
--- a/examples/src/examples/user-interface/custom-shader.tsx
+++ b/examples/src/examples/user-interface/custom-shader.tsx
@@ -65,7 +65,7 @@ void main(void)
 }`
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             "playcanvas": new pc.Asset("playcanvas", "texture", { url: "/static/assets/textures/playcanvas.png" })
diff --git a/examples/src/examples/user-interface/layout-group.tsx b/examples/src/examples/user-interface/layout-group.tsx
index d4a7585e49b..5c6e5c5ad03 100644
--- a/examples/src/examples/user-interface/layout-group.tsx
+++ b/examples/src/examples/user-interface/layout-group.tsx
@@ -6,7 +6,7 @@ class LayoutGroupExample {
     static NAME = 'Layout Group';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/particle-system.tsx b/examples/src/examples/user-interface/particle-system.tsx
index 4dd2f308994..25deb7da92a 100644
--- a/examples/src/examples/user-interface/particle-system.tsx
+++ b/examples/src/examples/user-interface/particle-system.tsx
@@ -6,7 +6,7 @@ class ParticleSystemExample {
     static NAME = 'Particle System';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' }),
diff --git a/examples/src/examples/user-interface/scroll-view.tsx b/examples/src/examples/user-interface/scroll-view.tsx
index 9173d502bf8..7817bf60c1a 100644
--- a/examples/src/examples/user-interface/scroll-view.tsx
+++ b/examples/src/examples/user-interface/scroll-view.tsx
@@ -4,7 +4,7 @@ class ScrollViewExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Scroll View';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/text-auto-font-size.tsx b/examples/src/examples/user-interface/text-auto-font-size.tsx
index fcf9bf649a5..b311546f698 100644
--- a/examples/src/examples/user-interface/text-auto-font-size.tsx
+++ b/examples/src/examples/user-interface/text-auto-font-size.tsx
@@ -4,7 +4,7 @@ class TextAutoFontSizeExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Auto Font Size';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/text-emojis.tsx b/examples/src/examples/user-interface/text-emojis.tsx
index cc31c91096e..9d6e1023430 100644
--- a/examples/src/examples/user-interface/text-emojis.tsx
+++ b/examples/src/examples/user-interface/text-emojis.tsx
@@ -4,7 +4,7 @@ class TextEmojisExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Emojis';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/arial.json' })
diff --git a/examples/src/examples/user-interface/text-localization.tsx b/examples/src/examples/user-interface/text-localization.tsx
index 8ec99db6107..602cfc46682 100644
--- a/examples/src/examples/user-interface/text-localization.tsx
+++ b/examples/src/examples/user-interface/text-localization.tsx
@@ -4,7 +4,7 @@ class TextLocalizationExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Localization';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/text-typewriter.tsx b/examples/src/examples/user-interface/text-typewriter.tsx
index 0877aec014d..03a9379567c 100644
--- a/examples/src/examples/user-interface/text-typewriter.tsx
+++ b/examples/src/examples/user-interface/text-typewriter.tsx
@@ -4,7 +4,7 @@ class TextTypewriterExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Typewriter';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/text.tsx b/examples/src/examples/user-interface/text.tsx
index 0166281e003..8c52fd1d277 100644
--- a/examples/src/examples/user-interface/text.tsx
+++ b/examples/src/examples/user-interface/text.tsx
@@ -4,7 +4,7 @@ class TextExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/world-to-screen.tsx b/examples/src/examples/user-interface/world-to-screen.tsx
index f03b2ecf210..7ead99c07a7 100644
--- a/examples/src/examples/user-interface/world-to-screen.tsx
+++ b/examples/src/examples/user-interface/world-to-screen.tsx
@@ -6,7 +6,7 @@ class WorldToScreenExample {
     static NAME = 'World to Screen';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             "checkboard": new pc.Asset("checkboard", "texture", { url: "/static/assets/textures/checkboard.png" }),
diff --git a/examples/src/examples/user-interface/world-ui.tsx b/examples/src/examples/user-interface/world-ui.tsx
index eab51e3d47d..fccc18c06c4 100644
--- a/examples/src/examples/user-interface/world-ui.tsx
+++ b/examples/src/examples/user-interface/world-ui.tsx
@@ -4,7 +4,7 @@ class WorldUiExample {
     static CATEGORY = 'User Interface';
     static NAME = 'World UI';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
 
         const assets = {
             "checkboard": new pc.Asset("checkboard", "texture", { url: "/static/assets/textures/checkboard.png" }),
diff --git a/examples/src/examples/xr/ar-basic.tsx b/examples/src/examples/xr/ar-basic.tsx
index 348390b93dc..5df59dec2f6 100644
--- a/examples/src/examples/xr/ar-basic.tsx
+++ b/examples/src/examples/xr/ar-basic.tsx
@@ -4,7 +4,7 @@ class ArBasicExample {
     static CATEGORY = 'XR';
     static NAME = 'AR Basic';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/ar-hit-test.tsx b/examples/src/examples/xr/ar-hit-test.tsx
index 198a623edec..2643617f2b0 100644
--- a/examples/src/examples/xr/ar-hit-test.tsx
+++ b/examples/src/examples/xr/ar-hit-test.tsx
@@ -4,7 +4,7 @@ class ArHitTestExample {
     static CATEGORY = 'XR';
     static NAME = 'AR Hit Test';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-basic.tsx b/examples/src/examples/xr/vr-basic.tsx
index 7d091620394..88955d4bf94 100644
--- a/examples/src/examples/xr/vr-basic.tsx
+++ b/examples/src/examples/xr/vr-basic.tsx
@@ -4,7 +4,7 @@ class VrBasicExample {
     static CATEGORY = 'XR';
     static NAME = 'VR Basic';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-controllers.tsx b/examples/src/examples/xr/vr-controllers.tsx
index 3664590899a..725ef892ee4 100644
--- a/examples/src/examples/xr/vr-controllers.tsx
+++ b/examples/src/examples/xr/vr-controllers.tsx
@@ -6,7 +6,7 @@ class VrControllersExample {
     static NAME = 'VR Controllers';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-hands.tsx b/examples/src/examples/xr/vr-hands.tsx
index 838494eb36d..7c11f8e35c6 100644
--- a/examples/src/examples/xr/vr-hands.tsx
+++ b/examples/src/examples/xr/vr-hands.tsx
@@ -4,7 +4,7 @@ class VrHandsExample {
     static CATEGORY = 'XR';
     static NAME = 'VR Hands';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-movement.tsx b/examples/src/examples/xr/vr-movement.tsx
index 3314c678b70..d6f81ed7a71 100644
--- a/examples/src/examples/xr/vr-movement.tsx
+++ b/examples/src/examples/xr/vr-movement.tsx
@@ -4,7 +4,7 @@ class VrMovementExample {
     static CATEGORY = 'XR';
     static NAME = 'VR Movement';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/xr-picking.tsx b/examples/src/examples/xr/xr-picking.tsx
index bf6d8337772..147b7b0ec37 100644
--- a/examples/src/examples/xr/xr-picking.tsx
+++ b/examples/src/examples/xr/xr-picking.tsx
@@ -4,7 +4,7 @@ class XrPickingExample {
     static CATEGORY = 'XR';
     static NAME = 'XR Picking';
 
-    example(canvas: HTMLCanvasElement, deviceType: pc.DEVICETYPE): void {
+    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/webgpu-temp/four.html b/examples/webgpu-temp/four.html
index b65f350067c..ae8472178fd 100644
--- a/examples/webgpu-temp/four.html
+++ b/examples/webgpu-temp/four.html
@@ -28,7 +28,7 @@
         import { Texture } from '../../src/platform/graphics/texture.js';
         import { RenderTarget } from '../../src/platform/graphics/render-target.js';
         import {
-            DEVICETYPE,
+            DEVICETYPE_WEBGPU,
             SEMANTIC_TEXCOORD0, SEMANTIC_POSITION, CULLFACE_NONE,
             PIXELFORMAT_RGBA8, FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE
         } from '../../src/platform/graphics/constants.js';
@@ -110,7 +110,7 @@
 
             const canvas = document.querySelector('#gpuCanvas');
             const gfxOptions = {
-                deviceTypes: [DEVICETYPE.WEBGPU],
+                deviceTypes: [DEVICETYPE_WEBGPU],
                 glslangUrl: '../src/lib/glslang/glslang.js',
                 twgslUrl: '../src/lib/twgsl/twgsl.js'
             };
diff --git a/examples/webgpu-temp/one.html b/examples/webgpu-temp/one.html
index 6b30205e35c..17793550213 100644
--- a/examples/webgpu-temp/one.html
+++ b/examples/webgpu-temp/one.html
@@ -29,7 +29,7 @@
         import { RenderTarget } from '../../src/platform/graphics/render-target.js';
         import { drawQuadWithShader } from '../../src/scene/graphics/quad-render-utils.js';
         import {
-            DEVICETYPE,
+            DEVICETYPE_WEBGPU,
             SEMANTIC_TEXCOORD0, SEMANTIC_POSITION, CULLFACE_NONE,
             PIXELFORMAT_RGBA8, FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE
         } from '../../src/platform/graphics/constants.js';
@@ -376,7 +376,7 @@
 
             const canvas = document.querySelector('#gpuCanvas');
             const gfxOptions = {
-                deviceTypes: [DEVICETYPE.WEBGPU],
+                deviceTypes: [DEVICETYPE_WEBGPU],
                 glslangUrl: '../src/lib/glslang/glslang.js',
                 twgslUrl: '../src/lib/twgsl/twgsl.js'
             };
diff --git a/examples/webgpu-temp/three.html b/examples/webgpu-temp/three.html
index 436f79282ab..eb6f2ffdb33 100644
--- a/examples/webgpu-temp/three.html
+++ b/examples/webgpu-temp/three.html
@@ -28,7 +28,7 @@
         import { Texture } from '../../src/platform/graphics/texture.js';
         import { RenderTarget } from '../../src/platform/graphics/render-target.js';
         import {
-            DEVICETYPE,
+            DEVICETYPE_WEBGPU,
             SEMANTIC_TEXCOORD0, SEMANTIC_POSITION, CULLFACE_NONE,
             PIXELFORMAT_RGBA8, FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE
         } from '../../src/platform/graphics/constants.js';
@@ -217,7 +217,7 @@
 
             const canvas = document.querySelector('#gpuCanvas');
             const gfxOptions = {
-                deviceTypes: [DEVICETYPE.WEBGPU],
+                deviceTypes: [DEVICETYPE_WEBGPU],
                 glslangUrl: '../src/lib/glslang/glslang.js',
                 twgslUrl: '../src/lib/twgsl/twgsl.js'
             };
diff --git a/examples/webgpu-temp/two.html b/examples/webgpu-temp/two.html
index 303d30202ac..e46ef010a2e 100644
--- a/examples/webgpu-temp/two.html
+++ b/examples/webgpu-temp/two.html
@@ -28,7 +28,7 @@
         import { Texture } from '../../src/platform/graphics/texture.js';
         import { RenderTarget } from '../../src/platform/graphics/render-target.js';
         import {
-            DEVICETYPE,
+            DEVICETYPE_WEBGPU,
             SEMANTIC_TEXCOORD0, SEMANTIC_POSITION, CULLFACE_NONE,
             PIXELFORMAT_RGBA8, FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE
         } from '../../src/platform/graphics/constants.js';
@@ -117,7 +117,7 @@
 
             const canvas = document.querySelector('#gpuCanvas');
             const gfxOptions = {
-                deviceTypes: [DEVICETYPE.WEBGPU],
+                deviceTypes: [DEVICETYPE_WEBGPU],
                 glslangUrl: '../src/lib/glslang/glslang.js',
                 twgslUrl: '../src/lib/twgsl/twgsl.js'
             };
diff --git a/src/platform/graphics/constants.js b/src/platform/graphics/constants.js
index 8b1d2994377..98bf46ddd56 100644
--- a/src/platform/graphics/constants.js
+++ b/src/platform/graphics/constants.js
@@ -1179,18 +1179,6 @@ export const DEVICETYPE_WEBGL2 = 'webgl2';
  */
 export const DEVICETYPE_WEBGPU = 'webgpu';
 
-/**
- * Enum for the device types.
- *
- * @readonly
- * @enum {string}
- */
-export const DEVICETYPE = {
-    WEBGL1: DEVICETYPE_WEBGL1,
-    WEBGL2: DEVICETYPE_WEBGL2,
-    WEBGPU: DEVICETYPE_WEBGPU
-};
-
 // (bit-flags) shader stages for resource visibility on the GPU
 export const SHADERSTAGE_VERTEX = 1;
 export const SHADERSTAGE_FRAGMENT = 2;
diff --git a/src/platform/graphics/graphics-device-create.js b/src/platform/graphics/graphics-device-create.js
index 73101799389..8f9d80edb8f 100644
--- a/src/platform/graphics/graphics-device-create.js
+++ b/src/platform/graphics/graphics-device-create.js
@@ -1,7 +1,7 @@
 import { Debug } from '../../core/debug.js';
 
 import { WebgpuGraphicsDevice } from './webgpu/webgpu-graphics-device.js';
-import { DEVICETYPE } from './constants.js';
+import { DEVICETYPE_WEBGL2, DEVICETYPE_WEBGL1, DEVICETYPE_WEBGPU } from './constants.js';
 import { WebglGraphicsDevice } from './webgl/webgl-graphics-device.js';
 
 /**
@@ -9,14 +9,14 @@ import { WebglGraphicsDevice } from './webgl/webgl-graphics-device.js';
  *
  * @param {HTMLCanvasElement} canvas - The canvas element.
  * @param {object} options - Graphics device options.
- * @param {DEVICETYPE[]} [options.deviceTypes] - An array of DEVICETYPE constants, defining the
+ * @param {string[]} [options.deviceTypes] - An array of DEVICETYPE_*** constants, defining the
  * order in which the devices are attempted to get created. Defaults to an empty array. If the
- * specified array does not contain [{@link DEVICETYPE.WEBGL2} or {@link DEVICETYPE.WEBGL1}], those
+ * specified array does not contain [{@link DEVICETYPE_WEBGL2} or {@link DEVICETYPE_WEBGL1}], those
  * are internally added to its end in this order. Typically, you'd only specify
- * {@link DEVICETYPE.WEBGPU}, or leave it empty.
+ * {@link DEVICETYPE_WEBGPU}, or leave it empty.
  * @param {string} [options.glslangUrl] - An url to glslang script, required if
- * {@link DEVICETYPE.WEBGPU} type is added to deviceTypes array. Not used for
- * {@link DEVICETYPE.WEBGL} device type creation.
+ * {@link DEVICETYPE_WEBGPU} type is added to deviceTypes array. Not used for
+ * {@link DEVICETYPE_WEBGL} device type creation.
  * @param {string} [options.twgslUrl] - An url to twgsl script, required if glslangUrl was specified.
  * @returns {Promise} - Promise object representing the created graphics device.
  */
@@ -25,24 +25,24 @@ function createGraphicsDevice(canvas, options = {}) {
     const deviceTypes = options.deviceTypes ?? [];
 
     // automatically added fallbacks
-    if (!deviceTypes.includes(DEVICETYPE.WEBGL2)) {
-        deviceTypes.push(DEVICETYPE.WEBGL2);
+    if (!deviceTypes.includes(DEVICETYPE_WEBGL2)) {
+        deviceTypes.push(DEVICETYPE_WEBGL2);
     }
-    if (!deviceTypes.includes(DEVICETYPE.WEBGL1)) {
-        deviceTypes.push(DEVICETYPE.WEBGL1);
+    if (!deviceTypes.includes(DEVICETYPE_WEBGL1)) {
+        deviceTypes.push(DEVICETYPE_WEBGL1);
     }
 
     let device;
     for (let i = 0; i < deviceTypes.length; i++) {
         const deviceType = deviceTypes[i];
 
-        if (deviceType === DEVICETYPE.WEBGPU && window?.navigator?.gpu) {
+        if (deviceType === DEVICETYPE_WEBGPU && window?.navigator?.gpu) {
             device = new WebgpuGraphicsDevice(canvas, options);
             return device.initWebGpu(options.glslangUrl, options.twgslUrl);
         }
 
-        if (deviceType !== DEVICETYPE.WEBGPU) {
-            options.preferWebGl2 = deviceType === DEVICETYPE.WEBGL2;
+        if (deviceType !== DEVICETYPE_WEBGPU) {
+            options.preferWebGl2 = deviceType === DEVICETYPE_WEBGL2;
             device = new WebglGraphicsDevice(canvas, options);
             return Promise.resolve(device);
         }
diff --git a/src/platform/graphics/graphics-device.js b/src/platform/graphics/graphics-device.js
index c76a766e628..bf02b0d48ce 100644
--- a/src/platform/graphics/graphics-device.js
+++ b/src/platform/graphics/graphics-device.js
@@ -40,9 +40,9 @@ class GraphicsDevice extends EventHandler {
     isWebGPU = false;
 
     /**
-     * The type of graphics device that the system could initialize. Can be one of pc.DEVICETYPE.WEBGL1, pc.DEVICETYPE.WEBGL2 or pc.DEVICETYPE.WEBGPU.
+     * The type of graphics device that the system could initialize. Can be one of pc.DEVICETYPE_WEBGL1, pc.DEVICETYPE_WEBGL2 or pc.DEVICETYPE_WEBGPU.
      *
-     * @type {import('./constants.js').DEVICETYPE}
+     * @type {pc.DEVICETYPE_WEBGL1 | pc.DEVICETYPE_WEBGL2 | pc.DEVICETYPE_WEBGPU}
      */
     activeDeviceType;
 
diff --git a/src/platform/graphics/webgl/webgl-graphics-device.js b/src/platform/graphics/webgl/webgl-graphics-device.js
index 5630ea33bea..afff4275f0a 100644
--- a/src/platform/graphics/webgl/webgl-graphics-device.js
+++ b/src/platform/graphics/webgl/webgl-graphics-device.js
@@ -19,7 +19,8 @@ import {
     UNIFORMTYPE_TEXTURECUBE_SHADOW, UNIFORMTYPE_TEXTURE3D, UNIFORMTYPE_VEC2ARRAY, UNIFORMTYPE_VEC3ARRAY, UNIFORMTYPE_VEC4ARRAY,
     semanticToLocation,
     PRIMITIVE_TRISTRIP,
-    DEVICETYPE
+    DEVICETYPE_WEBGL2,
+    DEVICETYPE_WEBGL1
 } from '../constants.js';
 
 import { GraphicsDevice } from '../graphics-device.js';
@@ -401,8 +402,8 @@ class WebglGraphicsDevice extends GraphicsDevice {
             gl = canvas.getContext(names[i], options);
 
             if (gl) {
-                this.webgl2 = (names[i] === DEVICETYPE.WEBGL2);
-                this.activeDeviceType = (names[i] === DEVICETYPE.WEBGL2) ? DEVICETYPE.WEBGL2 : DEVICETYPE.WEBGL1;
+                this.webgl2 = (names[i] === DEVICETYPE_WEBGL2);
+                this.activeDeviceType = (names[i] === DEVICETYPE_WEBGL2) ? DEVICETYPE_WEBGL2 : DEVICETYPE_WEBGL1;
                 break;
             }
         }
diff --git a/src/platform/graphics/webgpu/webgpu-graphics-device.js b/src/platform/graphics/webgpu/webgpu-graphics-device.js
index ba101023b1c..3cd99ad6d5b 100644
--- a/src/platform/graphics/webgpu/webgpu-graphics-device.js
+++ b/src/platform/graphics/webgpu/webgpu-graphics-device.js
@@ -1,7 +1,7 @@
 import { Debug, DebugHelper } from '../../../core/debug.js';
 
 import {
-    PIXELFORMAT_RGBA32F, PIXELFORMAT_RGBA8, PIXELFORMAT_BGRA8, CULLFACE_BACK, DEVICETYPE
+    PIXELFORMAT_RGBA32F, PIXELFORMAT_RGBA8, PIXELFORMAT_BGRA8, CULLFACE_BACK, DEVICETYPE_WEBGPU
 } from '../constants.js';
 import { GraphicsDevice } from '../graphics-device.js';
 import { RenderTarget } from '../render-target.js';
@@ -64,7 +64,7 @@ class WebgpuGraphicsDevice extends GraphicsDevice {
     constructor(canvas, options = {}) {
         super(canvas);
         this.isWebGPU = true;
-        this.activeDeviceType = DEVICETYPE.WEBGPU;
+        this.activeDeviceType = DEVICETYPE_WEBGPU;
 
         this.initDeviceCaps();
     }

From a7b9581d1e1e47cc0368af4a19fe69b761cce062 Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Tue, 14 Mar 2023 17:00:23 +0000
Subject: [PATCH 10/14] change the deviceType type to string

---
 examples/src/app/helpers/formatters.mjs                         | 2 +-
 examples/src/examples/animation/blend-trees-1d.tsx              | 2 +-
 examples/src/examples/animation/blend-trees-2d-cartesian.tsx    | 2 +-
 examples/src/examples/animation/blend-trees-2d-directional.tsx  | 2 +-
 examples/src/examples/animation/component-properties.tsx        | 2 +-
 examples/src/examples/animation/events.tsx                      | 2 +-
 examples/src/examples/animation/layer-masks.tsx                 | 2 +-
 examples/src/examples/animation/locomotion.tsx                  | 2 +-
 examples/src/examples/animation/tween.tsx                       | 2 +-
 examples/src/examples/camera/first-person.tsx                   | 2 +-
 examples/src/examples/camera/fly.tsx                            | 2 +-
 examples/src/examples/camera/orbit.tsx                          | 2 +-
 examples/src/examples/graphics/area-lights.tsx                  | 2 +-
 examples/src/examples/graphics/area-picker.tsx                  | 2 +-
 examples/src/examples/graphics/asset-viewer.tsx                 | 2 +-
 examples/src/examples/graphics/batching-dynamic.tsx             | 2 +-
 examples/src/examples/graphics/box-reflection.tsx               | 2 +-
 examples/src/examples/graphics/clustered-area-lights.tsx        | 2 +-
 examples/src/examples/graphics/clustered-lighting.tsx           | 2 +-
 examples/src/examples/graphics/clustered-omni-shadows.tsx       | 2 +-
 examples/src/examples/graphics/clustered-spot-shadows.tsx       | 2 +-
 examples/src/examples/graphics/grab-pass.tsx                    | 2 +-
 examples/src/examples/graphics/ground-fog.tsx                   | 2 +-
 examples/src/examples/graphics/hardware-instancing.tsx          | 2 +-
 examples/src/examples/graphics/hierarchy.tsx                    | 2 +-
 examples/src/examples/graphics/layers.tsx                       | 2 +-
 examples/src/examples/graphics/light-physical-units.tsx         | 2 +-
 examples/src/examples/graphics/lights-baked-a-o.tsx             | 2 +-
 examples/src/examples/graphics/lights-baked.tsx                 | 2 +-
 examples/src/examples/graphics/lights.tsx                       | 2 +-
 examples/src/examples/graphics/lines.tsx                        | 2 +-
 examples/src/examples/graphics/material-anisotropic.tsx         | 2 +-
 examples/src/examples/graphics/material-basic.tsx               | 2 +-
 examples/src/examples/graphics/material-clear-coat.tsx          | 2 +-
 examples/src/examples/graphics/material-physical.tsx            | 2 +-
 .../src/examples/graphics/material-translucent-specular.tsx     | 2 +-
 examples/src/examples/graphics/mesh-decals.tsx                  | 2 +-
 examples/src/examples/graphics/mesh-deformation.tsx             | 2 +-
 examples/src/examples/graphics/mesh-generation.tsx              | 2 +-
 examples/src/examples/graphics/mesh-morph-many.tsx              | 2 +-
 examples/src/examples/graphics/mesh-morph.tsx                   | 2 +-
 examples/src/examples/graphics/model-asset.tsx                  | 2 +-
 examples/src/examples/graphics/model-outline.tsx                | 2 +-
 examples/src/examples/graphics/model-textured-box.tsx           | 2 +-
 examples/src/examples/graphics/multi-view.tsx                   | 2 +-
 examples/src/examples/graphics/paint-mesh.tsx                   | 2 +-
 examples/src/examples/graphics/painter.tsx                      | 2 +-
 examples/src/examples/graphics/particles-anim-index.tsx         | 2 +-
 examples/src/examples/graphics/particles-random-sprites.tsx     | 2 +-
 examples/src/examples/graphics/particles-snow.tsx               | 2 +-
 examples/src/examples/graphics/particles-spark.tsx              | 2 +-
 examples/src/examples/graphics/point-cloud-simulation.tsx       | 2 +-
 examples/src/examples/graphics/point-cloud.tsx                  | 2 +-
 examples/src/examples/graphics/portal.tsx                       | 2 +-
 examples/src/examples/graphics/post-effects.tsx                 | 2 +-
 examples/src/examples/graphics/render-asset.tsx                 | 2 +-
 examples/src/examples/graphics/render-cubemap.tsx               | 2 +-
 examples/src/examples/graphics/render-to-texture.tsx            | 2 +-
 examples/src/examples/graphics/shader-burn.tsx                  | 2 +-
 examples/src/examples/graphics/shader-compile.tsx               | 2 +-
 examples/src/examples/graphics/shader-toon.tsx                  | 2 +-
 examples/src/examples/graphics/shader-wobble.tsx                | 2 +-
 examples/src/examples/graphics/shadow-cascades.tsx              | 2 +-
 examples/src/examples/graphics/shapes.tsx                       | 2 +-
 examples/src/examples/graphics/texture-basis.tsx                | 2 +-
 examples/src/examples/graphics/transform-feedback.tsx           | 2 +-
 examples/src/examples/graphics/video-texture.tsx                | 2 +-
 examples/src/examples/input/gamepad.tsx                         | 2 +-
 examples/src/examples/input/keyboard.tsx                        | 2 +-
 examples/src/examples/input/mouse.tsx                           | 2 +-
 examples/src/examples/loaders/draco-glb.tsx                     | 2 +-
 examples/src/examples/loaders/glb.tsx                           | 2 +-
 examples/src/examples/loaders/gltf-export.tsx                   | 2 +-
 examples/src/examples/loaders/loaders-gl.tsx                    | 2 +-
 examples/src/examples/loaders/obj.tsx                           | 2 +-
 examples/src/examples/loaders/usdz-export.tsx                   | 2 +-
 examples/src/examples/misc/hello-world.tsx                      | 2 +-
 examples/src/examples/misc/mini-stats.tsx                       | 2 +-
 examples/src/examples/misc/spineboy.tsx                         | 2 +-
 examples/src/examples/physics/compound-collision.tsx            | 2 +-
 examples/src/examples/physics/falling-shapes.tsx                | 2 +-
 examples/src/examples/physics/offset-collision.tsx              | 2 +-
 examples/src/examples/physics/raycast.tsx                       | 2 +-
 examples/src/examples/physics/vehicle.tsx                       | 2 +-
 examples/src/examples/sound/positional.tsx                      | 2 +-
 examples/src/examples/user-interface/button-basic.tsx           | 2 +-
 examples/src/examples/user-interface/button-sprite.tsx          | 2 +-
 examples/src/examples/user-interface/custom-shader.tsx          | 2 +-
 examples/src/examples/user-interface/layout-group.tsx           | 2 +-
 examples/src/examples/user-interface/particle-system.tsx        | 2 +-
 examples/src/examples/user-interface/scroll-view.tsx            | 2 +-
 examples/src/examples/user-interface/text-auto-font-size.tsx    | 2 +-
 examples/src/examples/user-interface/text-emojis.tsx            | 2 +-
 examples/src/examples/user-interface/text-localization.tsx      | 2 +-
 examples/src/examples/user-interface/text-typewriter.tsx        | 2 +-
 examples/src/examples/user-interface/text.tsx                   | 2 +-
 examples/src/examples/user-interface/world-to-screen.tsx        | 2 +-
 examples/src/examples/user-interface/world-ui.tsx               | 2 +-
 examples/src/examples/xr/ar-basic.tsx                           | 2 +-
 examples/src/examples/xr/ar-hit-test.tsx                        | 2 +-
 examples/src/examples/xr/vr-basic.tsx                           | 2 +-
 examples/src/examples/xr/vr-controllers.tsx                     | 2 +-
 examples/src/examples/xr/vr-hands.tsx                           | 2 +-
 examples/src/examples/xr/vr-movement.tsx                        | 2 +-
 examples/src/examples/xr/xr-picking.tsx                         | 2 +-
 src/platform/graphics/graphics-device.js                        | 2 +-
 106 files changed, 106 insertions(+), 106 deletions(-)

diff --git a/examples/src/app/helpers/formatters.mjs b/examples/src/app/helpers/formatters.mjs
index 86e27ddb5f2..69616eefef5 100644
--- a/examples/src/app/helpers/formatters.mjs
+++ b/examples/src/app/helpers/formatters.mjs
@@ -14,7 +14,7 @@ const findClosingBracketMatchIndex = (str, pos) => {
 
 const getTypeScriptFunctionFromText = (text) => {
     const transformedCode = text;
-    const functionSignatureStartString = 'example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2';
+    const functionSignatureStartString = 'example(canvas: HTMLCanvasElement, deviceType: string';
     const indexOfFunctionSignatureStart = transformedCode.indexOf(functionSignatureStartString);
     const functionSignatureEndString = '): void ';
     const indexOfFunctionSignatureEnd = indexOfFunctionSignatureStart + transformedCode.substring(indexOfFunctionSignatureStart).indexOf(functionSignatureEndString) + functionSignatureEndString.length;
diff --git a/examples/src/examples/animation/blend-trees-1d.tsx b/examples/src/examples/animation/blend-trees-1d.tsx
index 1de32bd5c30..6f4281e91ed 100644
--- a/examples/src/examples/animation/blend-trees-1d.tsx
+++ b/examples/src/examples/animation/blend-trees-1d.tsx
@@ -16,7 +16,7 @@ class BlendTrees1DExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data: any): void {
 
         const assets = {
             'model': new pc.Asset('model', 'container', { url: '/static/assets/models/bitmoji.glb' }),
diff --git a/examples/src/examples/animation/blend-trees-2d-cartesian.tsx b/examples/src/examples/animation/blend-trees-2d-cartesian.tsx
index 745b1c9e3ee..a13adbbaa2f 100644
--- a/examples/src/examples/animation/blend-trees-2d-cartesian.tsx
+++ b/examples/src/examples/animation/blend-trees-2d-cartesian.tsx
@@ -89,7 +89,7 @@ class BlendTrees2DCartesianExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/blend-trees-2d-directional.tsx b/examples/src/examples/animation/blend-trees-2d-directional.tsx
index 93718f03261..19a42dabdce 100644
--- a/examples/src/examples/animation/blend-trees-2d-directional.tsx
+++ b/examples/src/examples/animation/blend-trees-2d-directional.tsx
@@ -80,7 +80,7 @@ class BlendTrees2DDirectionalExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/component-properties.tsx b/examples/src/examples/animation/component-properties.tsx
index c97305059d3..c4416fd8184 100644
--- a/examples/src/examples/animation/component-properties.tsx
+++ b/examples/src/examples/animation/component-properties.tsx
@@ -16,7 +16,7 @@ class ComponentPropertiesExample {
     }
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data: any): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/events.tsx b/examples/src/examples/animation/events.tsx
index 5546e88b554..4b8d88fbd12 100644
--- a/examples/src/examples/animation/events.tsx
+++ b/examples/src/examples/animation/events.tsx
@@ -4,7 +4,7 @@ class EventsExample {
     static CATEGORY = 'Animation';
     static NAME = 'Events';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/animation/layer-masks.tsx b/examples/src/examples/animation/layer-masks.tsx
index 60a7f5fc837..df003d972a7 100644
--- a/examples/src/examples/animation/layer-masks.tsx
+++ b/examples/src/examples/animation/layer-masks.tsx
@@ -38,7 +38,7 @@ class LayerMasksExample {
     }
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data: any): void {
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
             touch: new pc.TouchDevice(document.body)
diff --git a/examples/src/examples/animation/locomotion.tsx b/examples/src/examples/animation/locomotion.tsx
index 4894fe91b17..b5fa9ae87a5 100644
--- a/examples/src/examples/animation/locomotion.tsx
+++ b/examples/src/examples/animation/locomotion.tsx
@@ -18,7 +18,7 @@ class LocomotionExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data: any): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/animation/tween.tsx b/examples/src/examples/animation/tween.tsx
index 1ee6882a5de..0d5b188fa0b 100644
--- a/examples/src/examples/animation/tween.tsx
+++ b/examples/src/examples/animation/tween.tsx
@@ -12,7 +12,7 @@ class TweenExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
         app.start();
diff --git a/examples/src/examples/camera/first-person.tsx b/examples/src/examples/camera/first-person.tsx
index 76bcd117254..55ae1620537 100644
--- a/examples/src/examples/camera/first-person.tsx
+++ b/examples/src/examples/camera/first-person.tsx
@@ -6,7 +6,7 @@ class FirstPersonExample {
     static NAME = 'First Person';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/camera/fly.tsx b/examples/src/examples/camera/fly.tsx
index 43258beb04e..66fbc943fc8 100644
--- a/examples/src/examples/camera/fly.tsx
+++ b/examples/src/examples/camera/fly.tsx
@@ -6,7 +6,7 @@ class FlyExample {
     static NAME = 'Fly';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/camera/orbit.tsx b/examples/src/examples/camera/orbit.tsx
index 4b2d08affdf..2886e16505e 100644
--- a/examples/src/examples/camera/orbit.tsx
+++ b/examples/src/examples/camera/orbit.tsx
@@ -6,7 +6,7 @@ class OrbitExample {
     static NAME = 'Orbit';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/graphics/area-lights.tsx b/examples/src/examples/graphics/area-lights.tsx
index 3696a0119ff..bd2844b4795 100644
--- a/examples/src/examples/graphics/area-lights.tsx
+++ b/examples/src/examples/graphics/area-lights.tsx
@@ -7,7 +7,7 @@ class AreaLightsExample {
     static WEBGPU_ENABLED = true;
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'color': new pc.Asset('color', 'texture', { url: '/static/assets/textures/seaside-rocks01-color.jpg' }),
diff --git a/examples/src/examples/graphics/area-picker.tsx b/examples/src/examples/graphics/area-picker.tsx
index 6f5d23a9d21..a3ed38b612e 100644
--- a/examples/src/examples/graphics/area-picker.tsx
+++ b/examples/src/examples/graphics/area-picker.tsx
@@ -4,7 +4,7 @@ class AreaPickerExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Area Picker';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'bloom': new pc.Asset('bloom', 'script', { url: '/static/scripts/posteffects/posteffect-bloom.js' }),
diff --git a/examples/src/examples/graphics/asset-viewer.tsx b/examples/src/examples/graphics/asset-viewer.tsx
index 627fbe44ead..8e4cd1fe28a 100644
--- a/examples/src/examples/graphics/asset-viewer.tsx
+++ b/examples/src/examples/graphics/asset-viewer.tsx
@@ -17,7 +17,7 @@ class AssetViewerExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data: any): void {
 
         const assets = {
             orbitCamera: new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/batching-dynamic.tsx b/examples/src/examples/graphics/batching-dynamic.tsx
index a01fc4b6c55..f8e13958b5f 100644
--- a/examples/src/examples/graphics/batching-dynamic.tsx
+++ b/examples/src/examples/graphics/batching-dynamic.tsx
@@ -4,7 +4,7 @@ class BatchingDynamicExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Batching Dynamic';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/box-reflection.tsx b/examples/src/examples/graphics/box-reflection.tsx
index 6e4ee90fbd0..11442d773f0 100644
--- a/examples/src/examples/graphics/box-reflection.tsx
+++ b/examples/src/examples/graphics/box-reflection.tsx
@@ -35,7 +35,7 @@ class BoxReflectionExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data: any): void {
 
         const assets = {
             'script1': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/clustered-area-lights.tsx b/examples/src/examples/graphics/clustered-area-lights.tsx
index 55b75421ccc..be7f224d9f3 100644
--- a/examples/src/examples/graphics/clustered-area-lights.tsx
+++ b/examples/src/examples/graphics/clustered-area-lights.tsx
@@ -20,7 +20,7 @@ class AreaLightsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data:any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data:any): void {
 
         data.set('settings', {
             material: {
diff --git a/examples/src/examples/graphics/clustered-lighting.tsx b/examples/src/examples/graphics/clustered-lighting.tsx
index ca751897e76..721990e2e6e 100644
--- a/examples/src/examples/graphics/clustered-lighting.tsx
+++ b/examples/src/examples/graphics/clustered-lighting.tsx
@@ -5,7 +5,7 @@ class ClusteredLightingExample {
     static NAME = 'Clustered Lighting';
     static ENGINE = 'PERFORMANCE';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/clustered-omni-shadows.tsx b/examples/src/examples/graphics/clustered-omni-shadows.tsx
index c56b50b6ff9..a9613b05532 100644
--- a/examples/src/examples/graphics/clustered-omni-shadows.tsx
+++ b/examples/src/examples/graphics/clustered-omni-shadows.tsx
@@ -31,7 +31,7 @@ class ClusteredOmniShadowsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/clustered-spot-shadows.tsx b/examples/src/examples/graphics/clustered-spot-shadows.tsx
index 3e6b37d19b9..53d2f910a74 100644
--- a/examples/src/examples/graphics/clustered-spot-shadows.tsx
+++ b/examples/src/examples/graphics/clustered-spot-shadows.tsx
@@ -62,7 +62,7 @@ class ClusteredSpotShadowsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/grab-pass.tsx b/examples/src/examples/graphics/grab-pass.tsx
index 1c225df2032..78c79fa0692 100644
--- a/examples/src/examples/graphics/grab-pass.tsx
+++ b/examples/src/examples/graphics/grab-pass.tsx
@@ -75,7 +75,7 @@ class GrabPassExample {
         `
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'normal': new pc.Asset('normal', 'texture', { url: '/static/assets/textures/normal-map.png' }),
diff --git a/examples/src/examples/graphics/ground-fog.tsx b/examples/src/examples/graphics/ground-fog.tsx
index 9c75b27694e..a11942b8bdf 100644
--- a/examples/src/examples/graphics/ground-fog.tsx
+++ b/examples/src/examples/graphics/ground-fog.tsx
@@ -101,7 +101,7 @@ class GroundFogExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, files: { 'shader.vert': string, 'shader.frag': string }, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/hardware-instancing.tsx b/examples/src/examples/graphics/hardware-instancing.tsx
index 3a3ff7ae51e..2736e3715c5 100644
--- a/examples/src/examples/graphics/hardware-instancing.tsx
+++ b/examples/src/examples/graphics/hardware-instancing.tsx
@@ -4,7 +4,7 @@ class HardwareInstancingExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Hardware Instancing';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
diff --git a/examples/src/examples/graphics/hierarchy.tsx b/examples/src/examples/graphics/hierarchy.tsx
index 9049a4bdce6..3644cafe768 100644
--- a/examples/src/examples/graphics/hierarchy.tsx
+++ b/examples/src/examples/graphics/hierarchy.tsx
@@ -4,7 +4,7 @@ class HierarchyExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Hierarchy';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/layers.tsx b/examples/src/examples/graphics/layers.tsx
index 0a8106a9230..8ad7941d5ca 100644
--- a/examples/src/examples/graphics/layers.tsx
+++ b/examples/src/examples/graphics/layers.tsx
@@ -4,7 +4,7 @@ class LayersExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Layers';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/light-physical-units.tsx b/examples/src/examples/graphics/light-physical-units.tsx
index 11f62549ad6..81f976d47d1 100644
--- a/examples/src/examples/graphics/light-physical-units.tsx
+++ b/examples/src/examples/graphics/light-physical-units.tsx
@@ -54,7 +54,7 @@ class LightPhysicalUnitsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data: any): void {
 
         const assets = {
             orbitCamera: new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/lights-baked-a-o.tsx b/examples/src/examples/graphics/lights-baked-a-o.tsx
index 99ea67a1205..473efe83216 100644
--- a/examples/src/examples/graphics/lights-baked-a-o.tsx
+++ b/examples/src/examples/graphics/lights-baked-a-o.tsx
@@ -68,7 +68,7 @@ class LightsBakedAOExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data: any): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/lights-baked.tsx b/examples/src/examples/graphics/lights-baked.tsx
index c064b589a7c..b3f95817d43 100644
--- a/examples/src/examples/graphics/lights-baked.tsx
+++ b/examples/src/examples/graphics/lights-baked.tsx
@@ -4,7 +4,7 @@ class LightsBakedExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Lights Baked';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/lights.tsx b/examples/src/examples/graphics/lights.tsx
index f5584a12bf8..c4de1dcd12e 100644
--- a/examples/src/examples/graphics/lights.tsx
+++ b/examples/src/examples/graphics/lights.tsx
@@ -52,7 +52,7 @@ class LightsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data:any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data:any): void {
         function createMaterial(colors: any) {
             const material: any = new pc.StandardMaterial();
             for (const param in colors) {
diff --git a/examples/src/examples/graphics/lines.tsx b/examples/src/examples/graphics/lines.tsx
index 4d392ada1aa..daa3d694ebd 100644
--- a/examples/src/examples/graphics/lines.tsx
+++ b/examples/src/examples/graphics/lines.tsx
@@ -4,7 +4,7 @@ class LinesExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Lines';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP })
diff --git a/examples/src/examples/graphics/material-anisotropic.tsx b/examples/src/examples/graphics/material-anisotropic.tsx
index a4272b135d4..fa85fc9c2ac 100644
--- a/examples/src/examples/graphics/material-anisotropic.tsx
+++ b/examples/src/examples/graphics/material-anisotropic.tsx
@@ -4,7 +4,7 @@ class LightsExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Anisotropic';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/material-basic.tsx b/examples/src/examples/graphics/material-basic.tsx
index bebb27a3b2f..a2c5f6da59f 100644
--- a/examples/src/examples/graphics/material-basic.tsx
+++ b/examples/src/examples/graphics/material-basic.tsx
@@ -4,7 +4,7 @@ class MaterialBasicExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Basic';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/arial.json' }),
diff --git a/examples/src/examples/graphics/material-clear-coat.tsx b/examples/src/examples/graphics/material-clear-coat.tsx
index 85a5b528ece..b9ef725efec 100644
--- a/examples/src/examples/graphics/material-clear-coat.tsx
+++ b/examples/src/examples/graphics/material-clear-coat.tsx
@@ -4,7 +4,7 @@ class MaterialClearCoatExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Clear Coat';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/material-physical.tsx b/examples/src/examples/graphics/material-physical.tsx
index e1edfac1e31..77b72a5df70 100644
--- a/examples/src/examples/graphics/material-physical.tsx
+++ b/examples/src/examples/graphics/material-physical.tsx
@@ -4,7 +4,7 @@ class MaterialPhysicalExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Physical';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/material-translucent-specular.tsx b/examples/src/examples/graphics/material-translucent-specular.tsx
index f8775b319a2..feca0c04c9b 100644
--- a/examples/src/examples/graphics/material-translucent-specular.tsx
+++ b/examples/src/examples/graphics/material-translucent-specular.tsx
@@ -4,7 +4,7 @@ class MaterialTranslucentSpecularExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Material Translucent Specular';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/mesh-decals.tsx b/examples/src/examples/graphics/mesh-decals.tsx
index 7f0d3df52a2..02d42d3bcf8 100644
--- a/examples/src/examples/graphics/mesh-decals.tsx
+++ b/examples/src/examples/graphics/mesh-decals.tsx
@@ -4,7 +4,7 @@ class MeshDecalsExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Decals';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'spark': new pc.Asset('spark', 'texture', { url: '/static/assets/textures/spark.png' })
diff --git a/examples/src/examples/graphics/mesh-deformation.tsx b/examples/src/examples/graphics/mesh-deformation.tsx
index 0dcec5aa0a3..c2ee00be4d5 100644
--- a/examples/src/examples/graphics/mesh-deformation.tsx
+++ b/examples/src/examples/graphics/mesh-deformation.tsx
@@ -4,7 +4,7 @@ class MeshDeformationExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Deformation';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' }),
diff --git a/examples/src/examples/graphics/mesh-generation.tsx b/examples/src/examples/graphics/mesh-generation.tsx
index 51043bd92b6..800ea36f57d 100644
--- a/examples/src/examples/graphics/mesh-generation.tsx
+++ b/examples/src/examples/graphics/mesh-generation.tsx
@@ -4,7 +4,7 @@ class MeshGenerationExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Generation';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'playcanvasGrey': new pc.Asset('playcanvasGrey', 'texture', { url: '/static/assets/textures/playcanvas-grey.png' })
diff --git a/examples/src/examples/graphics/mesh-morph-many.tsx b/examples/src/examples/graphics/mesh-morph-many.tsx
index 7c01daff1f3..d78a562c085 100644
--- a/examples/src/examples/graphics/mesh-morph-many.tsx
+++ b/examples/src/examples/graphics/mesh-morph-many.tsx
@@ -4,7 +4,7 @@ class MeshMorphManyExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Morph Many';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/mesh-morph.tsx b/examples/src/examples/graphics/mesh-morph.tsx
index 64c5c5fdcf1..5a4b4f928a5 100644
--- a/examples/src/examples/graphics/mesh-morph.tsx
+++ b/examples/src/examples/graphics/mesh-morph.tsx
@@ -4,7 +4,7 @@ class MeshMorphExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Mesh Morph';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/model-asset.tsx b/examples/src/examples/graphics/model-asset.tsx
index 7c4876423f1..cfa7f4eeea9 100644
--- a/examples/src/examples/graphics/model-asset.tsx
+++ b/examples/src/examples/graphics/model-asset.tsx
@@ -4,7 +4,7 @@ class ModelAssetExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Model Asset';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
diff --git a/examples/src/examples/graphics/model-outline.tsx b/examples/src/examples/graphics/model-outline.tsx
index 5b98b7b7bf4..22de2f6126f 100644
--- a/examples/src/examples/graphics/model-outline.tsx
+++ b/examples/src/examples/graphics/model-outline.tsx
@@ -4,7 +4,7 @@ class ModelOutlineExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Model Outline';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'outline': new pc.Asset('outline', 'script', { url: '/static/scripts/posteffects/posteffect-outline.js' })
diff --git a/examples/src/examples/graphics/model-textured-box.tsx b/examples/src/examples/graphics/model-textured-box.tsx
index 8a8a5b28fe9..410d804225a 100644
--- a/examples/src/examples/graphics/model-textured-box.tsx
+++ b/examples/src/examples/graphics/model-textured-box.tsx
@@ -4,7 +4,7 @@ class ModelTexturedBoxExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Model Textured Box';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'clouds': new pc.Asset('clouds', 'texture', { url: '/static/assets/textures/clouds.jpg' })
diff --git a/examples/src/examples/graphics/multi-view.tsx b/examples/src/examples/graphics/multi-view.tsx
index 7f99b2004ce..372c5450ac0 100644
--- a/examples/src/examples/graphics/multi-view.tsx
+++ b/examples/src/examples/graphics/multi-view.tsx
@@ -4,7 +4,7 @@ class MultiViewExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Multi View';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // set up and load draco module, as the glb we load is draco compressed
         pc.WasmModule.setConfig('DracoDecoderModule', {
diff --git a/examples/src/examples/graphics/paint-mesh.tsx b/examples/src/examples/graphics/paint-mesh.tsx
index c8cff185f79..778a89f8a01 100644
--- a/examples/src/examples/graphics/paint-mesh.tsx
+++ b/examples/src/examples/graphics/paint-mesh.tsx
@@ -49,7 +49,7 @@ class PaintMeshExample {
             }`
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas);
diff --git a/examples/src/examples/graphics/painter.tsx b/examples/src/examples/graphics/painter.tsx
index 3e7a5a0ed1b..25a0431b3db 100644
--- a/examples/src/examples/graphics/painter.tsx
+++ b/examples/src/examples/graphics/painter.tsx
@@ -4,7 +4,7 @@ class PainterExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Painter';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/particles-anim-index.tsx b/examples/src/examples/graphics/particles-anim-index.tsx
index a90d2adf9ca..be3720d57c7 100644
--- a/examples/src/examples/graphics/particles-anim-index.tsx
+++ b/examples/src/examples/graphics/particles-anim-index.tsx
@@ -6,7 +6,7 @@ class ParticlesAnimIndexExample {
     static NAME = 'Particles: Anim Index';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/particles-random-sprites.tsx b/examples/src/examples/graphics/particles-random-sprites.tsx
index b7380f721df..53e2a45145e 100644
--- a/examples/src/examples/graphics/particles-random-sprites.tsx
+++ b/examples/src/examples/graphics/particles-random-sprites.tsx
@@ -6,7 +6,7 @@ class ParticlesRandomSpritesExample {
     static NAME = 'Particles: Random Sprites';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/graphics/particles-snow.tsx b/examples/src/examples/graphics/particles-snow.tsx
index 122dc62df31..e71c6ccd5f3 100644
--- a/examples/src/examples/graphics/particles-snow.tsx
+++ b/examples/src/examples/graphics/particles-snow.tsx
@@ -6,7 +6,7 @@ class ParticlesSnowExample {
     static NAME = 'Particles: Snow';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/particles-spark.tsx b/examples/src/examples/graphics/particles-spark.tsx
index df4f8f1f37f..7d938ddaed5 100644
--- a/examples/src/examples/graphics/particles-spark.tsx
+++ b/examples/src/examples/graphics/particles-spark.tsx
@@ -6,7 +6,7 @@ class ParticlesSparkExample {
     static NAME = 'Particles: Spark';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/graphics/point-cloud-simulation.tsx b/examples/src/examples/graphics/point-cloud-simulation.tsx
index 442d76a97ec..56c1c1a6b2b 100644
--- a/examples/src/examples/graphics/point-cloud-simulation.tsx
+++ b/examples/src/examples/graphics/point-cloud-simulation.tsx
@@ -51,7 +51,7 @@ void main(void)
     };
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, files: { 'shader.vert': string, 'shader.frag': string }): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
         app.start();
diff --git a/examples/src/examples/graphics/point-cloud.tsx b/examples/src/examples/graphics/point-cloud.tsx
index 91d4bb9c1a0..1f5f8ccf477 100644
--- a/examples/src/examples/graphics/point-cloud.tsx
+++ b/examples/src/examples/graphics/point-cloud.tsx
@@ -53,7 +53,7 @@ void main(void)
     };
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, files: { 'shader.vert': string, 'shader.frag': string }): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/graphics/portal.tsx b/examples/src/examples/graphics/portal.tsx
index 69cfcfb7b9e..cf976912343 100644
--- a/examples/src/examples/graphics/portal.tsx
+++ b/examples/src/examples/graphics/portal.tsx
@@ -5,7 +5,7 @@ class PortalExample {
     static NAME = 'Portal';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {
diff --git a/examples/src/examples/graphics/post-effects.tsx b/examples/src/examples/graphics/post-effects.tsx
index 0c3a73f2efc..19ee9c7d3f2 100644
--- a/examples/src/examples/graphics/post-effects.tsx
+++ b/examples/src/examples/graphics/post-effects.tsx
@@ -79,7 +79,7 @@ class PostEffectsExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data: any): void {
 
         // set up and load draco module, as the glb we load is draco compressed
         pc.WasmModule.setConfig('DracoDecoderModule', {
diff --git a/examples/src/examples/graphics/render-asset.tsx b/examples/src/examples/graphics/render-asset.tsx
index 744cdd21a0a..cfbdd45a2ed 100644
--- a/examples/src/examples/graphics/render-asset.tsx
+++ b/examples/src/examples/graphics/render-asset.tsx
@@ -4,7 +4,7 @@ class RenderAssetExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Render Asset';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/render-cubemap.tsx b/examples/src/examples/graphics/render-cubemap.tsx
index 1019a4bd56a..3609a2c5175 100644
--- a/examples/src/examples/graphics/render-cubemap.tsx
+++ b/examples/src/examples/graphics/render-cubemap.tsx
@@ -4,7 +4,7 @@ class RenderCubemapExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Render Cubemap';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/graphics/render-to-texture.tsx b/examples/src/examples/graphics/render-to-texture.tsx
index e2a7fa1bb1e..4aa935cf57f 100644
--- a/examples/src/examples/graphics/render-to-texture.tsx
+++ b/examples/src/examples/graphics/render-to-texture.tsx
@@ -4,7 +4,7 @@ class RenderToTextureExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Render to Texture';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // Overview:
         // There are 3 layers used:
diff --git a/examples/src/examples/graphics/shader-burn.tsx b/examples/src/examples/graphics/shader-burn.tsx
index c5aa5e9b52f..6db921dc144 100644
--- a/examples/src/examples/graphics/shader-burn.tsx
+++ b/examples/src/examples/graphics/shader-burn.tsx
@@ -41,7 +41,7 @@ void main(void)
 }`
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' }),
diff --git a/examples/src/examples/graphics/shader-compile.tsx b/examples/src/examples/graphics/shader-compile.tsx
index 957f0f34201..ebb12ba8403 100644
--- a/examples/src/examples/graphics/shader-compile.tsx
+++ b/examples/src/examples/graphics/shader-compile.tsx
@@ -4,7 +4,7 @@ class ShaderCompileExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Shader Compile';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // This example servers as a test framework for large shader compilation speed test. Enable tracking for it.
         pc.Tracing.set(pc.TRACEID_SHADER_COMPILE, true);
diff --git a/examples/src/examples/graphics/shader-toon.tsx b/examples/src/examples/graphics/shader-toon.tsx
index ff0e8bcd4c3..ee379dce0c2 100644
--- a/examples/src/examples/graphics/shader-toon.tsx
+++ b/examples/src/examples/graphics/shader-toon.tsx
@@ -60,7 +60,7 @@ void main(void)
 `
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
diff --git a/examples/src/examples/graphics/shader-wobble.tsx b/examples/src/examples/graphics/shader-wobble.tsx
index 996d1ac3f72..a4f03c80f0d 100644
--- a/examples/src/examples/graphics/shader-wobble.tsx
+++ b/examples/src/examples/graphics/shader-wobble.tsx
@@ -35,7 +35,7 @@ void main(void)
 }`
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
diff --git a/examples/src/examples/graphics/shadow-cascades.tsx b/examples/src/examples/graphics/shadow-cascades.tsx
index 2d72b2ffbf6..d6f1548b2ce 100644
--- a/examples/src/examples/graphics/shadow-cascades.tsx
+++ b/examples/src/examples/graphics/shadow-cascades.tsx
@@ -39,7 +39,7 @@ class ShadowCascadesExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data: any): void {
 
         const assets = {
             'script': new pc.Asset('script', 'script', { url: '/static/scripts/camera/orbit-camera.js' }),
diff --git a/examples/src/examples/graphics/shapes.tsx b/examples/src/examples/graphics/shapes.tsx
index 204ced1f3b3..00121a58667 100644
--- a/examples/src/examples/graphics/shapes.tsx
+++ b/examples/src/examples/graphics/shapes.tsx
@@ -4,7 +4,7 @@ class ShapesExample {
     static CATEGORY = 'Graphics';
     static NAME = 'Shapes';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const gfxOptions = {
             deviceTypes: [deviceType],
diff --git a/examples/src/examples/graphics/texture-basis.tsx b/examples/src/examples/graphics/texture-basis.tsx
index be44f4ff8ff..46ec94aaaa9 100644
--- a/examples/src/examples/graphics/texture-basis.tsx
+++ b/examples/src/examples/graphics/texture-basis.tsx
@@ -10,7 +10,7 @@ class TextureBasisExample {
     // The normalmap has been converted with the following arguments:
     //   basisu seaside-rocks01-normal.jpg -normal_map -swizzle gggr -renorm -q 255 -mipmap
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // initialize basis
         pc.basisInitialize({
diff --git a/examples/src/examples/graphics/transform-feedback.tsx b/examples/src/examples/graphics/transform-feedback.tsx
index 335f37b4ed1..1f1bc1197fe 100644
--- a/examples/src/examples/graphics/transform-feedback.tsx
+++ b/examples/src/examples/graphics/transform-feedback.tsx
@@ -90,7 +90,7 @@ void main(void)
     };
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shaderFeedback.vert': string, 'shaderCloud.vert': string, 'shaderCloud.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, files: { 'shaderFeedback.vert': string, 'shaderCloud.vert': string, 'shaderCloud.frag': string }): void {
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/graphics/video-texture.tsx b/examples/src/examples/graphics/video-texture.tsx
index 5e19cd1420a..8426e8fbda4 100644
--- a/examples/src/examples/graphics/video-texture.tsx
+++ b/examples/src/examples/graphics/video-texture.tsx
@@ -6,7 +6,7 @@ class VideoTextureExample {
     static NAME = 'Video Texture';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/input/gamepad.tsx b/examples/src/examples/input/gamepad.tsx
index 5fb3cc296c7..6a8c1275597 100644
--- a/examples/src/examples/input/gamepad.tsx
+++ b/examples/src/examples/input/gamepad.tsx
@@ -5,7 +5,7 @@ class GamepadExample {
     static NAME = 'Gamepad';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
         // Create the application and start the update loop
 
         const assets = {
diff --git a/examples/src/examples/input/keyboard.tsx b/examples/src/examples/input/keyboard.tsx
index 7e70424fa01..100487682ff 100644
--- a/examples/src/examples/input/keyboard.tsx
+++ b/examples/src/examples/input/keyboard.tsx
@@ -6,7 +6,7 @@ class KeyboardExample {
     static NAME = 'Keyboard';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
diff --git a/examples/src/examples/input/mouse.tsx b/examples/src/examples/input/mouse.tsx
index 91539273047..c7977627512 100644
--- a/examples/src/examples/input/mouse.tsx
+++ b/examples/src/examples/input/mouse.tsx
@@ -6,7 +6,7 @@ class MouseExample {
     static NAME = 'Mouse';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
         const assets = {
             'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP }),
             'statue': new pc.Asset('statue', 'container', { url: '/static/assets/models/statue.glb' })
diff --git a/examples/src/examples/loaders/draco-glb.tsx b/examples/src/examples/loaders/draco-glb.tsx
index 8a9ac7df579..c93c3e4b625 100644
--- a/examples/src/examples/loaders/draco-glb.tsx
+++ b/examples/src/examples/loaders/draco-glb.tsx
@@ -4,7 +4,7 @@ class DracoGlbExample {
     static CATEGORY = 'Loaders';
     static NAME = 'Draco GLB';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         pc.WasmModule.setConfig('DracoDecoderModule', {
             glueUrl: '/static/lib/draco/draco.wasm.js',
diff --git a/examples/src/examples/loaders/glb.tsx b/examples/src/examples/loaders/glb.tsx
index fbcaa150595..e9d3c1ac9a4 100644
--- a/examples/src/examples/loaders/glb.tsx
+++ b/examples/src/examples/loaders/glb.tsx
@@ -4,7 +4,7 @@ class GlbExample {
     static CATEGORY = 'Loaders';
     static NAME = 'GLB';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // The example demonstrates loading of glb file, which contains meshes,
         // lights and cameras, and switches between the cameras every 2 seconds.
diff --git a/examples/src/examples/loaders/gltf-export.tsx b/examples/src/examples/loaders/gltf-export.tsx
index 0c8d40e3f92..6a8d371ab86 100644
--- a/examples/src/examples/loaders/gltf-export.tsx
+++ b/examples/src/examples/loaders/gltf-export.tsx
@@ -13,7 +13,7 @@ class GltfExportExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, pcx: any, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, pcx: any, data: any): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/loaders/loaders-gl.tsx b/examples/src/examples/loaders/loaders-gl.tsx
index 50bc0e2ef77..6cd64bc6013 100644
--- a/examples/src/examples/loaders/loaders-gl.tsx
+++ b/examples/src/examples/loaders/loaders-gl.tsx
@@ -44,7 +44,7 @@ void main(void)
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, files: { 'shader.vert': string, 'shader.frag': string }): void {
         // This example uses draco point cloud loader library from https://loaders.gl/
         // Note that many additional formats are supported by the library and can be used.
 
diff --git a/examples/src/examples/loaders/obj.tsx b/examples/src/examples/loaders/obj.tsx
index a3d6618a2fa..16f37b17277 100644
--- a/examples/src/examples/loaders/obj.tsx
+++ b/examples/src/examples/loaders/obj.tsx
@@ -4,7 +4,7 @@ class ObjExample {
     static CATEGORY = 'Loaders';
     static NAME = 'OBJ';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/loaders/usdz-export.tsx b/examples/src/examples/loaders/usdz-export.tsx
index 0d30614a2cc..8dd8e503b18 100644
--- a/examples/src/examples/loaders/usdz-export.tsx
+++ b/examples/src/examples/loaders/usdz-export.tsx
@@ -13,7 +13,7 @@ class UsdzExportExample {
         </>;
     }
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, pcx: any, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, pcx: any, data: any): void {
 
         // Create the app and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/misc/hello-world.tsx b/examples/src/examples/misc/hello-world.tsx
index 3915f4c5405..962bb671711 100644
--- a/examples/src/examples/misc/hello-world.tsx
+++ b/examples/src/examples/misc/hello-world.tsx
@@ -4,7 +4,7 @@ class HelloWorldExample {
     static CATEGORY = 'Misc';
     static NAME = 'Hello World';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/misc/mini-stats.tsx b/examples/src/examples/misc/mini-stats.tsx
index e0e63dcc198..f08291681db 100644
--- a/examples/src/examples/misc/mini-stats.tsx
+++ b/examples/src/examples/misc/mini-stats.tsx
@@ -7,7 +7,7 @@ class MiniStatsExample {
     static ENGINE = 'PERFORMANCE';
     static MINISTATS = true;
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, pcx: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, pcx: any): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
         app.start();
diff --git a/examples/src/examples/misc/spineboy.tsx b/examples/src/examples/misc/spineboy.tsx
index 77713ec4eb2..64f9070754e 100644
--- a/examples/src/examples/misc/spineboy.tsx
+++ b/examples/src/examples/misc/spineboy.tsx
@@ -4,7 +4,7 @@ class SpineboyExample {
     static CATEGORY = 'Misc';
     static NAME = 'Spineboy';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'skeleton': new pc.Asset('skeleton', 'json', { url: '/static/assets/spine/spineboy-pro.json' }),
diff --git a/examples/src/examples/physics/compound-collision.tsx b/examples/src/examples/physics/compound-collision.tsx
index 623eeb8a0ce..ac3de059a12 100644
--- a/examples/src/examples/physics/compound-collision.tsx
+++ b/examples/src/examples/physics/compound-collision.tsx
@@ -4,7 +4,7 @@ class CompoundCollisionExample {
     static CATEGORY = 'Physics';
     static NAME = 'Compound Collision';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
 
diff --git a/examples/src/examples/physics/falling-shapes.tsx b/examples/src/examples/physics/falling-shapes.tsx
index 4aef21bb04e..e907c884e86 100644
--- a/examples/src/examples/physics/falling-shapes.tsx
+++ b/examples/src/examples/physics/falling-shapes.tsx
@@ -6,7 +6,7 @@ class FallingShapesExample {
     static NAME = 'Falling Shapes';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
             // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/physics/offset-collision.tsx b/examples/src/examples/physics/offset-collision.tsx
index f4c6a5bcca9..2e6d83d264d 100644
--- a/examples/src/examples/physics/offset-collision.tsx
+++ b/examples/src/examples/physics/offset-collision.tsx
@@ -5,7 +5,7 @@ class OffsetCollisionExample {
     static CATEGORY = 'Physics';
     static NAME = 'Offset Collision';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, data: any): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, data: any): void {
 
         const app = new pc.Application(canvas, {
             mouse: new pc.Mouse(document.body),
diff --git a/examples/src/examples/physics/raycast.tsx b/examples/src/examples/physics/raycast.tsx
index 19b62dae5f2..30404473d99 100644
--- a/examples/src/examples/physics/raycast.tsx
+++ b/examples/src/examples/physics/raycast.tsx
@@ -6,7 +6,7 @@ class RaycastExample {
     static NAME = 'Raycast';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/physics/vehicle.tsx b/examples/src/examples/physics/vehicle.tsx
index c74f82045dc..3cfa5b9be88 100644
--- a/examples/src/examples/physics/vehicle.tsx
+++ b/examples/src/examples/physics/vehicle.tsx
@@ -4,7 +4,7 @@ class VehicleExample {
     static CATEGORY = 'Physics';
     static NAME = 'Vehicle';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         pc.WasmModule.setConfig('Ammo', {
             glueUrl: '/static/lib/ammo/ammo.wasm.js',
diff --git a/examples/src/examples/sound/positional.tsx b/examples/src/examples/sound/positional.tsx
index d73d42618e8..91d249303fd 100644
--- a/examples/src/examples/sound/positional.tsx
+++ b/examples/src/examples/sound/positional.tsx
@@ -6,7 +6,7 @@ class PositionalExample {
     static NAME = 'Positional';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         // Create the application and start the update loop
         const app = new pc.Application(canvas, {});
diff --git a/examples/src/examples/user-interface/button-basic.tsx b/examples/src/examples/user-interface/button-basic.tsx
index 00290c5f79a..918e28726c7 100644
--- a/examples/src/examples/user-interface/button-basic.tsx
+++ b/examples/src/examples/user-interface/button-basic.tsx
@@ -4,7 +4,7 @@ class ButtonBasicExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Button Basic';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/button-sprite.tsx b/examples/src/examples/user-interface/button-sprite.tsx
index 1cccbfb88ef..1ed32fb5ce6 100644
--- a/examples/src/examples/user-interface/button-sprite.tsx
+++ b/examples/src/examples/user-interface/button-sprite.tsx
@@ -6,7 +6,7 @@ class ButtonSpriteExample {
     static NAME = 'Button Sprite';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' }),
diff --git a/examples/src/examples/user-interface/custom-shader.tsx b/examples/src/examples/user-interface/custom-shader.tsx
index af809d79e68..9f8518a2e1d 100644
--- a/examples/src/examples/user-interface/custom-shader.tsx
+++ b/examples/src/examples/user-interface/custom-shader.tsx
@@ -65,7 +65,7 @@ void main(void)
 }`
     };
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2, files: { 'shader.vert': string, 'shader.frag': string }): void {
+    example(canvas: HTMLCanvasElement, deviceType: string, files: { 'shader.vert': string, 'shader.frag': string }): void {
 
         const assets = {
             "playcanvas": new pc.Asset("playcanvas", "texture", { url: "/static/assets/textures/playcanvas.png" })
diff --git a/examples/src/examples/user-interface/layout-group.tsx b/examples/src/examples/user-interface/layout-group.tsx
index 5c6e5c5ad03..4e37461b536 100644
--- a/examples/src/examples/user-interface/layout-group.tsx
+++ b/examples/src/examples/user-interface/layout-group.tsx
@@ -6,7 +6,7 @@ class LayoutGroupExample {
     static NAME = 'Layout Group';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/particle-system.tsx b/examples/src/examples/user-interface/particle-system.tsx
index 25deb7da92a..2be94bfd879 100644
--- a/examples/src/examples/user-interface/particle-system.tsx
+++ b/examples/src/examples/user-interface/particle-system.tsx
@@ -6,7 +6,7 @@ class ParticleSystemExample {
     static NAME = 'Particle System';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' }),
diff --git a/examples/src/examples/user-interface/scroll-view.tsx b/examples/src/examples/user-interface/scroll-view.tsx
index 7817bf60c1a..78fc4b0b459 100644
--- a/examples/src/examples/user-interface/scroll-view.tsx
+++ b/examples/src/examples/user-interface/scroll-view.tsx
@@ -4,7 +4,7 @@ class ScrollViewExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Scroll View';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/text-auto-font-size.tsx b/examples/src/examples/user-interface/text-auto-font-size.tsx
index b311546f698..1e37327f02d 100644
--- a/examples/src/examples/user-interface/text-auto-font-size.tsx
+++ b/examples/src/examples/user-interface/text-auto-font-size.tsx
@@ -4,7 +4,7 @@ class TextAutoFontSizeExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Auto Font Size';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/text-emojis.tsx b/examples/src/examples/user-interface/text-emojis.tsx
index 9d6e1023430..84214f68e22 100644
--- a/examples/src/examples/user-interface/text-emojis.tsx
+++ b/examples/src/examples/user-interface/text-emojis.tsx
@@ -4,7 +4,7 @@ class TextEmojisExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Emojis';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/arial.json' })
diff --git a/examples/src/examples/user-interface/text-localization.tsx b/examples/src/examples/user-interface/text-localization.tsx
index 602cfc46682..5ef55829989 100644
--- a/examples/src/examples/user-interface/text-localization.tsx
+++ b/examples/src/examples/user-interface/text-localization.tsx
@@ -4,7 +4,7 @@ class TextLocalizationExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Localization';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/text-typewriter.tsx b/examples/src/examples/user-interface/text-typewriter.tsx
index 03a9379567c..408c7fc38d1 100644
--- a/examples/src/examples/user-interface/text-typewriter.tsx
+++ b/examples/src/examples/user-interface/text-typewriter.tsx
@@ -4,7 +4,7 @@ class TextTypewriterExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text Typewriter';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/text.tsx b/examples/src/examples/user-interface/text.tsx
index 8c52fd1d277..2b6e11051f9 100644
--- a/examples/src/examples/user-interface/text.tsx
+++ b/examples/src/examples/user-interface/text.tsx
@@ -4,7 +4,7 @@ class TextExample {
     static CATEGORY = 'User Interface';
     static NAME = 'Text';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             'font': new pc.Asset('font', 'font', { url: '/static/assets/fonts/courier.json' })
diff --git a/examples/src/examples/user-interface/world-to-screen.tsx b/examples/src/examples/user-interface/world-to-screen.tsx
index 7ead99c07a7..49514a01635 100644
--- a/examples/src/examples/user-interface/world-to-screen.tsx
+++ b/examples/src/examples/user-interface/world-to-screen.tsx
@@ -6,7 +6,7 @@ class WorldToScreenExample {
     static NAME = 'World to Screen';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             "checkboard": new pc.Asset("checkboard", "texture", { url: "/static/assets/textures/checkboard.png" }),
diff --git a/examples/src/examples/user-interface/world-ui.tsx b/examples/src/examples/user-interface/world-ui.tsx
index fccc18c06c4..7720d87e2f7 100644
--- a/examples/src/examples/user-interface/world-ui.tsx
+++ b/examples/src/examples/user-interface/world-ui.tsx
@@ -4,7 +4,7 @@ class WorldUiExample {
     static CATEGORY = 'User Interface';
     static NAME = 'World UI';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
 
         const assets = {
             "checkboard": new pc.Asset("checkboard", "texture", { url: "/static/assets/textures/checkboard.png" }),
diff --git a/examples/src/examples/xr/ar-basic.tsx b/examples/src/examples/xr/ar-basic.tsx
index 5df59dec2f6..c8e81b19b8f 100644
--- a/examples/src/examples/xr/ar-basic.tsx
+++ b/examples/src/examples/xr/ar-basic.tsx
@@ -4,7 +4,7 @@ class ArBasicExample {
     static CATEGORY = 'XR';
     static NAME = 'AR Basic';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/ar-hit-test.tsx b/examples/src/examples/xr/ar-hit-test.tsx
index 2643617f2b0..04275392d3b 100644
--- a/examples/src/examples/xr/ar-hit-test.tsx
+++ b/examples/src/examples/xr/ar-hit-test.tsx
@@ -4,7 +4,7 @@ class ArHitTestExample {
     static CATEGORY = 'XR';
     static NAME = 'AR Hit Test';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-basic.tsx b/examples/src/examples/xr/vr-basic.tsx
index 88955d4bf94..545d9363922 100644
--- a/examples/src/examples/xr/vr-basic.tsx
+++ b/examples/src/examples/xr/vr-basic.tsx
@@ -4,7 +4,7 @@ class VrBasicExample {
     static CATEGORY = 'XR';
     static NAME = 'VR Basic';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-controllers.tsx b/examples/src/examples/xr/vr-controllers.tsx
index 725ef892ee4..07027d27d41 100644
--- a/examples/src/examples/xr/vr-controllers.tsx
+++ b/examples/src/examples/xr/vr-controllers.tsx
@@ -6,7 +6,7 @@ class VrControllersExample {
     static NAME = 'VR Controllers';
 
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-hands.tsx b/examples/src/examples/xr/vr-hands.tsx
index 7c11f8e35c6..045f59660a1 100644
--- a/examples/src/examples/xr/vr-hands.tsx
+++ b/examples/src/examples/xr/vr-hands.tsx
@@ -4,7 +4,7 @@ class VrHandsExample {
     static CATEGORY = 'XR';
     static NAME = 'VR Hands';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/vr-movement.tsx b/examples/src/examples/xr/vr-movement.tsx
index d6f81ed7a71..e7871ada8e7 100644
--- a/examples/src/examples/xr/vr-movement.tsx
+++ b/examples/src/examples/xr/vr-movement.tsx
@@ -4,7 +4,7 @@ class VrMovementExample {
     static CATEGORY = 'XR';
     static NAME = 'VR Movement';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/examples/src/examples/xr/xr-picking.tsx b/examples/src/examples/xr/xr-picking.tsx
index 147b7b0ec37..28592c601e0 100644
--- a/examples/src/examples/xr/xr-picking.tsx
+++ b/examples/src/examples/xr/xr-picking.tsx
@@ -4,7 +4,7 @@ class XrPickingExample {
     static CATEGORY = 'XR';
     static NAME = 'XR Picking';
 
-    example(canvas: HTMLCanvasElement, deviceType: typeof pc.DEVICETYPE_WEBGPU | typeof pc.DEVICETYPE_WEBGL1 | typeof pc.DEVICETYPE_WEBGL2): void {
+    example(canvas: HTMLCanvasElement, deviceType: string): void {
         const message = function (msg: string) {
             let el: HTMLDivElement = document.querySelector('.message');
             if (!el) {
diff --git a/src/platform/graphics/graphics-device.js b/src/platform/graphics/graphics-device.js
index bf02b0d48ce..e00a828e77a 100644
--- a/src/platform/graphics/graphics-device.js
+++ b/src/platform/graphics/graphics-device.js
@@ -42,7 +42,7 @@ class GraphicsDevice extends EventHandler {
     /**
      * The type of graphics device that the system could initialize. Can be one of pc.DEVICETYPE_WEBGL1, pc.DEVICETYPE_WEBGL2 or pc.DEVICETYPE_WEBGPU.
      *
-     * @type {pc.DEVICETYPE_WEBGL1 | pc.DEVICETYPE_WEBGL2 | pc.DEVICETYPE_WEBGPU}
+     * @type {import('./constants.js').DEVICETYPE_WEBGL1 | import('./constants.js').DEVICETYPE_WEBGL2 | import('./constants.js').DEVICETYPE_WEBGPU}
      */
     activeDeviceType;
 

From 3bcd9d1f1b6ff74f09ff32d7100ba0a1f7bb8b63 Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Wed, 15 Mar 2023 12:04:50 +0000
Subject: [PATCH 11/14] comment updates

---
 examples/package-lock.json                    | 55 +++++++++++++++++++
 examples/package.json                         |  1 +
 examples/src/app/constants.ts                 |  1 +
 examples/src/app/control-panel.tsx            |  9 +--
 examples/src/app/example.tsx                  | 15 +++--
 examples/src/app/sidebar.tsx                  |  5 +-
 src/platform/graphics/graphics-device.js      |  4 +-
 .../graphics/webgl/webgl-graphics-device.js   |  2 +-
 .../graphics/webgpu/webgpu-graphics-device.js |  2 +-
 9 files changed, 76 insertions(+), 18 deletions(-)
 create mode 100644 examples/src/app/constants.ts

diff --git a/examples/package-lock.json b/examples/package-lock.json
index 9949ffd0ad8..90774572d94 100644
--- a/examples/package-lock.json
+++ b/examples/package-lock.json
@@ -23,6 +23,7 @@
         "@rollup/plugin-replace": "^4.0.0",
         "@types/react": "^17.0.13",
         "@types/react-dom": "^17.0.8",
+        "@types/react-router-dom": "^5.3.3",
         "@typescript-eslint/eslint-plugin": "^5.26.0",
         "@typescript-eslint/parser": "^5.26.0",
         "concurrently": "^7.2.1",
@@ -535,6 +536,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -579,6 +586,27 @@
         "@types/react": "^17"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -5714,6 +5742,12 @@
         "@types/node": "*"
       }
     },
+    "@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true
+    },
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -5758,6 +5792,27 @@
         "@types/react": "^17"
       }
     },
+    "@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
diff --git a/examples/package.json b/examples/package.json
index a88151a3635..4a6139710d9 100644
--- a/examples/package.json
+++ b/examples/package.json
@@ -55,6 +55,7 @@
     "@rollup/plugin-replace": "^4.0.0",
     "@types/react": "^17.0.13",
     "@types/react-dom": "^17.0.8",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.26.0",
     "@typescript-eslint/parser": "^5.26.0",
     "concurrently": "^7.2.1",
diff --git a/examples/src/app/constants.ts b/examples/src/app/constants.ts
new file mode 100644
index 00000000000..db926add5e6
--- /dev/null
+++ b/examples/src/app/constants.ts
@@ -0,0 +1 @@
+export const MIN_DESKTOP_WIDTH = 601;
diff --git a/examples/src/app/control-panel.tsx b/examples/src/app/control-panel.tsx
index 16dc323793b..530f5ed986c 100644
--- a/examples/src/app/control-panel.tsx
+++ b/examples/src/app/control-panel.tsx
@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import MonacoEditor from "@monaco-editor/react";
 import { Button, Container } from '@playcanvas/pcui/react';
+import { MIN_DESKTOP_WIDTH } from './constants';
 
 const ControlPanel = (props: any) => {
     const [state, setState] = useState({
         showParameters: false,
         showCode: true,
-        collapsed: window.top.innerWidth < 601
+        collapsed: window.top.innerWidth < MIN_DESKTOP_WIDTH
     });
     const onClickParametersTab = () => {
         if (document.getElementById('paramButton').classList.contains('selected')) {
@@ -38,7 +39,7 @@ const ControlPanel = (props: any) => {
     };
 
     useEffect(() => {
-        if (window.top.innerWidth < 601) {
+        if (window.top.innerWidth < MIN_DESKTOP_WIDTH) {
             // @ts-ignore
             document.getElementById('controlPanel-controls').ui.hidden = true;
         }
@@ -49,7 +50,7 @@ const ControlPanel = (props: any) => {
     });
 
     return <Container id='controls-wrapper' class={props.controls ? 'has-controls' : null}>
-        { window.top.innerWidth < 601 && props.controls && <Container id= 'controlPanel-tabs' class='tabs-container'>
+        { window.top.innerWidth < MIN_DESKTOP_WIDTH && props.controls && <Container id= 'controlPanel-tabs' class='tabs-container'>
             <Button text='CODE' id='codeButton' class={state.showCode ? 'selected' : null} onClick={onClickCodeTab}/>
             <Button text='PARAMETERS' class={state.showParameters ? 'selected' : null} id='paramButton' onClick={onClickParametersTab} />
         </Container>
@@ -57,7 +58,7 @@ const ControlPanel = (props: any) => {
         <Container id='controlPanel-controls'>
             { props.controls }
         </Container>
-        { window.top.innerWidth < 601 && state.showCode && <MonacoEditor
+        { window.top.innerWidth < MIN_DESKTOP_WIDTH && state.showCode && <MonacoEditor
             options={{
                 readOnly: true
             }}
diff --git a/examples/src/app/example.tsx b/examples/src/app/example.tsx
index 8031538fc14..46dfff11701 100644
--- a/examples/src/app/example.tsx
+++ b/examples/src/app/example.tsx
@@ -7,10 +7,9 @@ import examples from './helpers/example-data.mjs';
 import { withRouter } from 'react-router-dom';
 import ControlPanel from './control-panel';
 import { Observer } from '@playcanvas/observer';
+import { MIN_DESKTOP_WIDTH } from './constants';
+import { DEVICETYPE_WEBGL1, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGPU } from '../../dist/build/playcanvas';
 
-const DEVICETYPE_WEBGL1 = 'webgl1';
-const DEVICETYPE_WEBGL2 = 'webgl2';
-const DEVICETYPE_WEBGPU = 'webgpu';
 const deviceTypeNames = {
     [DEVICETYPE_WEBGL1]: 'WebGL 1',
     [DEVICETYPE_WEBGL2]: 'WebGL 2',
@@ -23,7 +22,7 @@ const Controls = (props: any) => {
     const controlsFunction = (examples as any).paths[props.path].example.prototype.controls;
     const controls = controlsFunction ? (examples as any).paths[props.path].example.prototype.controls((window as any).observerData).props.children : null;
     // on desktop dont show the control panel when no controls are present
-    if (!controls && window.top.innerWidth > 600) return null;
+    if (!controls && window.top.innerWidth >= MIN_DESKTOP_WIDTH) return null;
     return <ControlPanel controls={controls} files={props.files} />;
 };
 interface ControlLoaderProps {
@@ -58,8 +57,8 @@ class ControlLoader extends Component <ControlLoaderProps, ControlLoaderState> {
             function appCreationPoll() {
                 if ((window as any).pc.app) {
                     clearInterval(pollHandler);
-                    const app: { graphicsDevice: { activeDeviceType: string } } = (window as any).pc.app;
-                    const activeDevice = app.graphicsDevice.activeDeviceType;
+                    const app: { graphicsDevice: { deviceType: string } } = (window as any).pc.app;
+                    const activeDevice = app.graphicsDevice.deviceType;
                     controlsObserver.emit('updateActiveDevice', activeDevice);
                 }
             }
@@ -172,7 +171,7 @@ class Example extends Component <ExampleProps, ExampleState> {
 
     shouldComponentUpdate(nextProps: Readonly<ExampleProps>): boolean {
         const updateMobileOnFileChange = () => {
-            return window.top.innerWidth < 601 && this.props.files !== nextProps.files;
+            return window.top.innerWidth < MIN_DESKTOP_WIDTH && this.props.files !== nextProps.files;
         };
         return this.props.match.params.category !== nextProps.match.params.category || this.props.match.params.example !== nextProps.match.params.example || updateMobileOnFileChange();
     }
@@ -188,7 +187,7 @@ class Example extends Component <ExampleProps, ExampleState> {
         return <Container id="canvas-container">
             <Spinner size={50}/>
             <iframe id="exampleIframe" key={iframePath} src={iframePath}></iframe>
-            <Panel id='controlPanel' class={[window.top.innerWidth < 601 ? 'mobile' : null]} resizable='top' headerText={window.top.innerWidth < 601 ? 'CODE & CONTROLS' : 'CONTROLS'} collapsible={true} collapsed={window.top.innerWidth < 601}>
+            <Panel id='controlPanel' class={[window.top.innerWidth < MIN_DESKTOP_WIDTH ? 'mobile' : null]} resizable='top' headerText={window.top.innerWidth < MIN_DESKTOP_WIDTH ? 'CODE & CONTROLS' : 'CONTROLS'} collapsible={true} collapsed={window.top.innerWidth < MIN_DESKTOP_WIDTH}>
                 <SelectInput
                     id='deviceTypeSelectInput'
                     options={[
diff --git a/examples/src/app/sidebar.tsx b/examples/src/app/sidebar.tsx
index 0c62d9c7396..1c321cbb9ee 100644
--- a/examples/src/app/sidebar.tsx
+++ b/examples/src/app/sidebar.tsx
@@ -4,6 +4,7 @@ import { BindingTwoWay, BooleanInput, Container, Label, LabelGroup, Panel, TextI
 import { Link } from "react-router-dom";
 import { Observer } from '@playcanvas/observer';
 import examples from './helpers/example-data.mjs';
+import { MIN_DESKTOP_WIDTH } from './constants.js';
 
 const toggleSideBar = () => {
     const sideBar = document.getElementById('sideBar');
@@ -40,7 +41,7 @@ const SideBar = () => {
             topNavItem.scrollIntoView();
         });
 
-        if (!filteredCategories && document.body.offsetWidth < 601) {
+        if (!filteredCategories && document.body.offsetWidth < MIN_DESKTOP_WIDTH) {
             // @ts-ignore
             sideBar.ui.collapsed = true;
         }
@@ -57,7 +58,7 @@ const SideBar = () => {
     const categories = filteredCategories || defaultCategories;
     return (
         <>
-            <Panel headerText="EXAMPLES" collapsible={document.body.offsetWidth < 601} collapsed={true} id='sideBar' class='small-thumbnails'>
+            <Panel headerText="EXAMPLES" collapsible={document.body.offsetWidth < MIN_DESKTOP_WIDTH} collapsed={true} id='sideBar' class='small-thumbnails'>
                 <TextInput class='filter-input' keyChange placeholder="Filter..." onChange={(filter: string) => {
                     const reg = (filter && filter.length > 0) ? new RegExp(filter, 'i') : null;
                     if (!reg) {
diff --git a/src/platform/graphics/graphics-device.js b/src/platform/graphics/graphics-device.js
index e00a828e77a..5937603e0e8 100644
--- a/src/platform/graphics/graphics-device.js
+++ b/src/platform/graphics/graphics-device.js
@@ -40,11 +40,11 @@ class GraphicsDevice extends EventHandler {
     isWebGPU = false;
 
     /**
-     * The type of graphics device that the system could initialize. Can be one of pc.DEVICETYPE_WEBGL1, pc.DEVICETYPE_WEBGL2 or pc.DEVICETYPE_WEBGPU.
+     * The type of the device. Can be one of pc.DEVICETYPE_WEBGL1, pc.DEVICETYPE_WEBGL2 or pc.DEVICETYPE_WEBGPU.
      *
      * @type {import('./constants.js').DEVICETYPE_WEBGL1 | import('./constants.js').DEVICETYPE_WEBGL2 | import('./constants.js').DEVICETYPE_WEBGPU}
      */
-    activeDeviceType;
+    deviceType;
 
     /**
      * The scope namespace for shader attributes and variables.
diff --git a/src/platform/graphics/webgl/webgl-graphics-device.js b/src/platform/graphics/webgl/webgl-graphics-device.js
index afff4275f0a..d85104aeeba 100644
--- a/src/platform/graphics/webgl/webgl-graphics-device.js
+++ b/src/platform/graphics/webgl/webgl-graphics-device.js
@@ -403,7 +403,7 @@ class WebglGraphicsDevice extends GraphicsDevice {
 
             if (gl) {
                 this.webgl2 = (names[i] === DEVICETYPE_WEBGL2);
-                this.activeDeviceType = (names[i] === DEVICETYPE_WEBGL2) ? DEVICETYPE_WEBGL2 : DEVICETYPE_WEBGL1;
+                this.deviceType = (names[i] === DEVICETYPE_WEBGL2) ? DEVICETYPE_WEBGL2 : DEVICETYPE_WEBGL1;
                 break;
             }
         }
diff --git a/src/platform/graphics/webgpu/webgpu-graphics-device.js b/src/platform/graphics/webgpu/webgpu-graphics-device.js
index 3cd99ad6d5b..9e613ef5024 100644
--- a/src/platform/graphics/webgpu/webgpu-graphics-device.js
+++ b/src/platform/graphics/webgpu/webgpu-graphics-device.js
@@ -64,7 +64,7 @@ class WebgpuGraphicsDevice extends GraphicsDevice {
     constructor(canvas, options = {}) {
         super(canvas);
         this.isWebGPU = true;
-        this.activeDeviceType = DEVICETYPE_WEBGPU;
+        this.deviceType = DEVICETYPE_WEBGPU;
 
         this.initDeviceCaps();
     }

From 53c01fb19052fd02b224d131538a0d96539de4c1 Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Wed, 15 Mar 2023 12:11:55 +0000
Subject: [PATCH 12/14] update playcanvas build directory

---
 examples/src/app/example.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/examples/src/app/example.tsx b/examples/src/app/example.tsx
index 46dfff11701..338e33b2f4c 100644
--- a/examples/src/app/example.tsx
+++ b/examples/src/app/example.tsx
@@ -1,14 +1,13 @@
 import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
 import { Container, Spinner, SelectInput, Panel } from '@playcanvas/pcui/react';
 import { SelectInput as SelectInputClass } from '@playcanvas/pcui';
+import { Observer } from '@playcanvas/observer';
+import { DEVICETYPE_WEBGL1, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGPU } from '../../../build/playcanvas';
 import { File } from './helpers/types';
 import examples from './helpers/example-data.mjs';
-// @ts-ignore: library file import
-import { withRouter } from 'react-router-dom';
 import ControlPanel from './control-panel';
-import { Observer } from '@playcanvas/observer';
 import { MIN_DESKTOP_WIDTH } from './constants';
-import { DEVICETYPE_WEBGL1, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGPU } from '../../dist/build/playcanvas';
 
 const deviceTypeNames = {
     [DEVICETYPE_WEBGL1]: 'WebGL 1',

From da82c4e715eccb8812d72d5c1828b6428f29a01b Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Wed, 15 Mar 2023 12:27:56 +0000
Subject: [PATCH 13/14] use the es6 engine build

---
 examples/src/app/example.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/src/app/example.tsx b/examples/src/app/example.tsx
index 338e33b2f4c..68d109864d3 100644
--- a/examples/src/app/example.tsx
+++ b/examples/src/app/example.tsx
@@ -3,7 +3,7 @@ import { withRouter } from 'react-router-dom';
 import { Container, Spinner, SelectInput, Panel } from '@playcanvas/pcui/react';
 import { SelectInput as SelectInputClass } from '@playcanvas/pcui';
 import { Observer } from '@playcanvas/observer';
-import { DEVICETYPE_WEBGL1, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGPU } from '../../../build/playcanvas';
+import { DEVICETYPE_WEBGL1, DEVICETYPE_WEBGL2, DEVICETYPE_WEBGPU } from '../../../build/playcanvas.mjs';
 import { File } from './helpers/types';
 import examples from './helpers/example-data.mjs';
 import ControlPanel from './control-panel';

From 3ec984ba4bf2afcb5b67482218d6af8b9bdfe640 Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Wed, 15 Mar 2023 14:47:33 +0000
Subject: [PATCH 14/14] comment fixes

---
 src/platform/graphics/graphics-device.js         | 16 +++++++++-------
 .../graphics/webgl/webgl-graphics-device.js      |  2 +-
 .../graphics/webgpu/webgpu-graphics-device.js    |  2 +-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/platform/graphics/graphics-device.js b/src/platform/graphics/graphics-device.js
index 5937603e0e8..cc36641f4fd 100644
--- a/src/platform/graphics/graphics-device.js
+++ b/src/platform/graphics/graphics-device.js
@@ -39,13 +39,6 @@ class GraphicsDevice extends EventHandler {
      */
     isWebGPU = false;
 
-    /**
-     * The type of the device. Can be one of pc.DEVICETYPE_WEBGL1, pc.DEVICETYPE_WEBGL2 or pc.DEVICETYPE_WEBGPU.
-     *
-     * @type {import('./constants.js').DEVICETYPE_WEBGL1 | import('./constants.js').DEVICETYPE_WEBGL2 | import('./constants.js').DEVICETYPE_WEBGPU}
-     */
-    deviceType;
-
     /**
      * The scope namespace for shader attributes and variables.
      *
@@ -496,6 +489,15 @@ class GraphicsDevice extends EventHandler {
         return this._maxPixelRatio;
     }
 
+    /**
+     * The type of the device. Can be one of pc.DEVICETYPE_WEBGL1, pc.DEVICETYPE_WEBGL2 or pc.DEVICETYPE_WEBGPU.
+     *
+     * @type {import('./constants.js').DEVICETYPE_WEBGL1 | import('./constants.js').DEVICETYPE_WEBGL2 | import('./constants.js').DEVICETYPE_WEBGPU}
+     */
+    get deviceType() {
+        return this._deviceType;
+    }
+
     /**
      * Queries the maximum number of bones that can be referenced by a shader. The shader
      * generators (programlib) use this number to specify the matrix array size of the uniform
diff --git a/src/platform/graphics/webgl/webgl-graphics-device.js b/src/platform/graphics/webgl/webgl-graphics-device.js
index d85104aeeba..e889268a427 100644
--- a/src/platform/graphics/webgl/webgl-graphics-device.js
+++ b/src/platform/graphics/webgl/webgl-graphics-device.js
@@ -403,7 +403,7 @@ class WebglGraphicsDevice extends GraphicsDevice {
 
             if (gl) {
                 this.webgl2 = (names[i] === DEVICETYPE_WEBGL2);
-                this.deviceType = (names[i] === DEVICETYPE_WEBGL2) ? DEVICETYPE_WEBGL2 : DEVICETYPE_WEBGL1;
+                this._deviceType = this.webgl2 ? DEVICETYPE_WEBGL2 : DEVICETYPE_WEBGL1;
                 break;
             }
         }
diff --git a/src/platform/graphics/webgpu/webgpu-graphics-device.js b/src/platform/graphics/webgpu/webgpu-graphics-device.js
index 9e613ef5024..f1152187e5a 100644
--- a/src/platform/graphics/webgpu/webgpu-graphics-device.js
+++ b/src/platform/graphics/webgpu/webgpu-graphics-device.js
@@ -64,7 +64,7 @@ class WebgpuGraphicsDevice extends GraphicsDevice {
     constructor(canvas, options = {}) {
         super(canvas);
         this.isWebGPU = true;
-        this.deviceType = DEVICETYPE_WEBGPU;
+        this._deviceType = DEVICETYPE_WEBGPU;
 
         this.initDeviceCaps();
     }