Update package dependencies

package.json

@@ -22,7 +22,7 @@
         "url": "https://github.com/playcanvas/model-viewer.git"
     },
     "devDependencies": {
-        "@playcanvas/eslint-config": "^2.0.7",
+        "@playcanvas/eslint-config": "^2.0.8",
         "@playcanvas/observer": "^1.5.1",
         "@playcanvas/pcui": "^4.6.0",
         "@rollup/plugin-alias": "^5.1.1",
@@ -33,25 +33,25 @@
         "@rollup/plugin-replace": "^6.0.1",
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^12.1.1",
-        "@types/react": "^18.3.12",
+        "@types/react": "^18.3.13",
         "@types/react-dom": "^18.3.1",
-        "@typescript-eslint/eslint-plugin": "^8.13.0",
-        "@typescript-eslint/parser": "^8.13.0",
+        "@typescript-eslint/eslint-plugin": "^8.17.0",
+        "@typescript-eslint/parser": "^8.17.0",
         "concurrently": "^9.1.0",
         "cross-env": "^7.0.3",
-        "eslint": "^9.14.0",
-        "eslint-import-resolver-typescript": "^3.6.3",
-        "globals": "^15.12.0",
-        "playcanvas": "^2.2.2",
+        "eslint": "^9.16.0",
+        "eslint-import-resolver-typescript": "^3.7.0",
+        "globals": "^15.13.0",
+        "playcanvas": "^2.3.1",
         "qrious": "^4.0.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-visibility-sensor": "^5.1.1",
-        "rollup": "^4.24.4",
+        "rollup": "^4.28.0",
         "rollup-plugin-sass": "^1.14.0",
         "serve": "^14.2.4",
         "tslib": "^2.8.1",
-        "typescript": "^5.6.3"
+        "typescript": "^5.7.2"
     },
     "scripts": {
         "build": "rollup -c",

src/dummy-webgpu.ts

@@ -0,0 +1,67 @@
+import { AppBase } from 'playcanvas';
+
+class DummyWebGPU {
+    constructor(app: AppBase) {
+        if (app.graphicsDevice.isWebGPU) {
+            console.log('WebGPU is already created, skipping dummy WebGPU creation');
+            return;
+        }
+
+        if (!navigator.gpu) {
+            console.log('WebGPU is not supported, skipping dummy WebGPU creation');
+            return;
+        }
+
+        // Create a new canvas for WebGPU with a smaller size
+        const canvas = document.createElement('canvas');
+        canvas.width = 20;
+        canvas.height = 20;
+        canvas.style.position = 'absolute';
+        canvas.style.top = '20px';
+        canvas.style.left = '20px';
+        document.body.appendChild(canvas);
+
+        (async () => {
+            const adapter = await navigator.gpu.requestAdapter();
+            const device = await adapter.requestDevice();
+
+            console.log('Created WebGPU device used for profiling');
+
+            // Create a WebGPU context for the new canvas
+            const context = canvas.getContext('webgpu') as any;
+
+            // Configure the WebGPU context
+            context.configure({ device, format: 'bgra8unorm' });
+
+            // Hook into the 'frameend' event
+            app.on('frameend', () => {
+                // Clear the WebGPU surface to red after WebGL rendering
+
+                // Get the current texture to render to
+                const textureView = context.getCurrentTexture().createView();
+
+                // Create a command encoder
+                const commandEncoder = device.createCommandEncoder();
+
+                // Create a render pass descriptor with a red background
+                const renderPassDescriptor = {
+                    colorAttachments: [{
+                        view: textureView,
+                        clearValue: { r: 1.0, g: 0.0, b: 0.0, a: 1.0 },  // Red background
+                        loadOp: 'clear',
+                        storeOp: 'store'
+                    }]
+                };
+
+                // render pass
+                const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+                passEncoder.end();
+
+                // Submit the commands to the GPU
+                device.queue.submit([commandEncoder.finish()]);
+            });
+        })();
+    }
+}
+
+export { DummyWebGPU };

src/index.tsx

@@ -15,6 +15,7 @@ import initializeUI from './ui';
 import Viewer from './viewer';
 import './style.scss';
 import { version as modelViewerVersion } from '../package.json';
+import { DummyWebGPU } from './dummy-webgpu';
 
 // Permit some additional properties to be set on the window
 declare global {
@@ -317,6 +318,10 @@ const main = () => {
                     }
                     break;
                 }
+                case 'dummyWebGPU': {
+                    const dummy = new DummyWebGPU(viewer.app);
+                    break;
+                }
                 default: {
                     if (observer.has(key)) {
                         switch (typeof observer.get(key)) {

src/multiframe.ts

@@ -2,6 +2,8 @@ import {
     BLENDEQUATION_ADD,
     BLENDMODE_CONSTANT,
     BLENDMODE_ONE_MINUS_CONSTANT,
+    EVENT_POSTRENDER,
+    EVENT_PRERENDER,
     FILTER_NEAREST,
     PIXELFORMAT_RGBA8,
     PIXELFORMAT_RGBA16F,
@@ -105,7 +107,11 @@ class Multiframe {
 
         // just before rendering the scene we apply a subpixel jitter
         // to the camera's projection matrix.
-        this.camera.onPreRender = () => {
+        this.camera.system.app.scene.on(EVENT_PRERENDER, (c: CameraComponent) => {
+            if (c !== this.camera) {
+                return;
+            }
+
             const camera = this.camera.camera;
             const pmat = camera.projectionMatrix;
 
@@ -122,13 +128,16 @@ class Multiframe {
 
             // look away
             camera._viewProjMatDirty = true;
-        };
+        });
 
-        this.camera.onPostRender = () => {
+        this.camera.system.app.scene.on(EVENT_POSTRENDER, (c: CameraComponent) => {
+            if (c !== this.camera) {
+                return;
+            }
             const pmat = camera.projectionMatrix;
             pmat.data[8] = 0;
             pmat.data[9] = 0;
-        };
+        });
 
         this.shader = createShaderFromCode(device, vshader, fshader, 'multiframe', {
             vertex_position: SEMANTIC_POSITION

src/viewer.ts

@@ -58,10 +58,11 @@ import {
     TouchDevice,
     Vec3,
     Vec4,
-    WebglGraphicsDevice
+    WebglGraphicsDevice,
+    Vec2
 } from 'playcanvas';
 // @ts-ignore
-import { MultiCamera } from 'playcanvas/scripts/camera/multi-camera.js';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 
 import { App } from './app';
 import { DebugLines } from './debug-lines';
@@ -194,7 +195,7 @@ class Viewer {
 
     canvasResize = true;
 
-    multiCamera: MultiCamera;
+    cameraControls: CameraControls;
 
     constructor(
         canvas: HTMLCanvasElement,
@@ -266,20 +267,28 @@ class Viewer {
 
         // create the camera
         const camera = new Entity('Camera');
+        camera.setPosition(0, 1, 10);
+        this.app.root.addChild(camera);
         camera.addComponent('camera', {
             fov: 75,
             frustumCulling: true,
             clearColor: new Color(0, 0, 0, 0)
         });
         camera.addComponent('script');
-        this.multiCamera = camera.script.create(MultiCamera);
+        this.cameraControls = camera.script.create(CameraControls, {
+            attributes: {
+                zoomMin: 0.001,
+                zoomMax: 10,
+                pitchRange: new Vec2(-90, 90)
+            }
+        });
         camera.camera.requestSceneColorMap(true);
 
         app.keyboard.on(EVENT_KEYDOWN, (event) => {
             switch (event.key) {
                 case KEY_F: {
                     this.focusSelection(false);
-                    this.multiCamera.resetZoom(this.getZoomDist());
+                    this.cameraControls.resetZoom(this.getZoomDist());
                     break;
                 }
             }
@@ -423,7 +432,7 @@ class Viewer {
                     this.camera.getWorldTransform().transformPoint(this.cursorWorld, this.cursorWorld); // world space
 
                     // focus on cursor
-                    this.multiCamera.focus(this.cursorWorld);
+                    this.cameraControls.focus(this.cursorWorld);
                 }
             });
         });
@@ -467,7 +476,7 @@ class Viewer {
             this.multiframe.blend = 0.5;
 
             // detach multi camera
-            this.multiCamera.detach();
+            this.cameraControls.detach();
         });
 
         events.on('xr:initial-place', () => {
@@ -482,7 +491,7 @@ class Viewer {
             this.setBackgroundColor(this.observer.get('skybox.backgroundColor'));
 
             // attach multicamera
-            this.multiCamera.attach(this.camera);
+            this.cameraControls.attach(this.camera);
 
             this.multiframe.blend = 1.0;
         });
@@ -779,13 +788,13 @@ class Viewer {
         const d2 = Math.tan(0.5 * camera.fov * math.DEG_TO_RAD);
 
         const scale = (d1 / d2) * (1 / camera.aspectRatio);
-        return scale * this.multiCamera.sceneSize + this.multiCamera.sceneSize;
+        return scale * this.cameraControls.sceneSize + this.cameraControls.sceneSize;
     }
 
     private focusSelection(calcStart = true) {
         // calculate scene bounding box
         this.calcSceneBounds(bbox, this.selectedNode as Entity);
-        this.multiCamera.sceneSize = bbox.halfExtents.length();
+        this.cameraControls.sceneSize = bbox.halfExtents.length();
 
         // calculate the camera focus point
         const focus = this.getFocusPosition(bbox);
@@ -800,11 +809,15 @@ class Viewer {
                 start.copy(focus);
                 start.z += this.getZoomDist();
             }
+
+            // set initial camera position
+            this.camera.setPosition(start);
+
+            // refit camera clip planes
+            this.fitCameraClipPlanes();
         }
 
-        // focus orbit camera on object and set focus and sceneSize
-        this.multiCamera.sceneSize = bbox.halfExtents.length();
-        this.multiCamera.focus(focus, start);
+        this.cameraControls.focus(focus, start);
     }
 
     destroyRenderTargets() {
@@ -1514,7 +1527,7 @@ class Viewer {
             ACES2: TONEMAP_ACES2
         };
 
-        this.app.scene.rendering.toneMapping = mapping.hasOwnProperty(tonemapping) ? mapping[tonemapping] : TONEMAP_ACES;
+        this.camera.camera.toneMapping = mapping.hasOwnProperty(tonemapping) ? mapping[tonemapping] : TONEMAP_ACES;
         this.renderNextFrame();
     }
 
@@ -1528,7 +1541,7 @@ class Viewer {
     update(deltaTime: number) {
         // update the orbit camera
         if (!this.xrMode?.active) {
-            this.multiCamera.update(deltaTime);
+            this.cameraControls.update(deltaTime);
         }
 
         const maxdiff = (a: Mat4, b: Mat4) => {
@@ -1723,7 +1736,7 @@ class Viewer {
         // set projective skybox radius
         this.setSkyboxDomeRadius(this.observer.get('skybox.domeProjection.domeRadius'));
 
-        // set camera clipping planes
+        // focus the camera on the scene
         this.focusSelection();
     }