Update dependencies

package.json

@@ -24,7 +24,7 @@
         "lint": "eslint src"
     },
     "devDependencies": {
-        "@playcanvas/eslint-config": "^2.0.7",
+        "@playcanvas/eslint-config": "^2.0.8",
         "@playcanvas/pcui": "^4.6.0",
         "@rollup/plugin-alias": "^5.1.1",
         "@rollup/plugin-image": "^3.0.3",
@@ -34,26 +34,26 @@
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^12.1.1",
         "@types/wicg-file-system-access": "^2023.10.5",
-        "@typescript-eslint/eslint-plugin": "^8.14.0",
-        "@typescript-eslint/parser": "^8.14.0",
+        "@typescript-eslint/eslint-plugin": "^8.17.0",
+        "@typescript-eslint/parser": "^8.17.0",
         "autoprefixer": "^10.4.20",
         "concurrently": "^9.1.0",
         "cors": "^2.8.5",
         "cross-env": "^7.0.3",
-        "eslint": "^9.14.0",
-        "eslint-import-resolver-typescript": "^3.6.3",
-        "globals": "^15.12.0",
-        "i18next": "^23.16.5",
+        "eslint": "^9.16.0",
+        "eslint-import-resolver-typescript": "^3.7.0",
+        "globals": "^15.13.0",
+        "i18next": "^24.0.5",
         "i18next-browser-languagedetector": "^8.0.0",
         "jest": "^29.7.0",
-        "playcanvas": "^2.2.2",
+        "playcanvas": "^2.3.1",
         "postcss": "^8.4.49",
-        "rollup": "^4.26.0",
+        "rollup": "^4.28.0",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-visualizer": "^5.12.0",
-        "sass": "^1.80.7",
+        "sass": "^1.82.0",
         "serve": "^14.2.4",
         "tslib": "^2.8.1",
-        "typescript": "^5.6.3"
+        "typescript": "^5.7.2"
     }
 }

src/camera.ts

@@ -4,25 +4,24 @@ import {
     FILTER_NEAREST,
     PIXELFORMAT_RGBA8,
     PIXELFORMAT_DEPTH,
+    PROJECTION_ORTHOGRAPHIC,
+    PROJECTION_PERSPECTIVE,
+    TONEMAP_ACES,
+    TONEMAP_ACES2,
+    TONEMAP_FILMIC,
+    TONEMAP_HEJL,
+    TONEMAP_LINEAR,
+    TONEMAP_NEUTRAL,
     BoundingBox,
     Entity,
-    Layer,
-    Mat4,
     Picker,
     Plane,
     Ray,
     RenderTarget,
     Texture,
     Vec3,
     Vec4,
-    WebglGraphicsDevice,
-    PROJECTION_ORTHOGRAPHIC,
-    PROJECTION_PERSPECTIVE,
-    TONEMAP_LINEAR,
-    TONEMAP_FILMIC,
-    TONEMAP_HEJL,
-    TONEMAP_ACES,
-    TONEMAP_ACES2
+    WebglGraphicsDevice
 } from 'playcanvas';
 
 import { PointerController } from './controllers';
@@ -225,12 +224,13 @@ class Camera extends Element {
         this.maxElev = (controls.maxPolarAngle * 180) / Math.PI - 90;
 
         // tonemapping
-        this.scene.app.scene.rendering.toneMapping = {
+        this.scene.camera.entity.camera.toneMapping = {
             linear: TONEMAP_LINEAR,
             filmic: TONEMAP_FILMIC,
             hejl: TONEMAP_HEJL,
             aces: TONEMAP_ACES,
-            aces2: TONEMAP_ACES2
+            aces2: TONEMAP_ACES2,
+            neutral: TONEMAP_NEUTRAL
         }[config.camera.toneMapping];
 
         // exposure
@@ -252,11 +252,6 @@ class Camera extends Element {
 
         this.scene.events.on('scene.boundChanged', this.onBoundChanged, this);
 
-        // multiple elements in the scene require this callback
-        this.entity.camera.onPreRenderLayer = (layer: Layer, transparent: boolean) => {
-            this.scene.events.fire('camera.preRenderLayer', layer, transparent);
-        };
-
         // prepare camera-specific uniforms
         this.updateCameraUniforms = () => {
             const device = this.scene.graphicsDevice;
@@ -313,7 +308,7 @@ class Camera extends Element {
     // also update the existing camera distance to maintain the current view
     onBoundChanged(bound: BoundingBox) {
         const prevDistance = this.distanceTween.value.distance * this.sceneRadius;
-        this.sceneRadius = bound.halfExtents.length();
+        this.sceneRadius = Math.max(1e-03, bound.halfExtents.length());
         this.setDistance(prevDistance / this.sceneRadius, 0);
     }
 

src/infinite-grid.ts

@@ -45,7 +45,7 @@ class InfiniteGrid extends Element {
             BLENDEQUATION_ADD, BLENDMODE_ONE, BLENDMODE_ONE_MINUS_SRC_ALPHA
         );
 
-        this.scene.events.on('camera.preRenderLayer', (layer: Layer, transparent: boolean) => {
+        this.scene.camera.entity.camera.on('preRenderLayer', (layer: Layer, transparent: boolean) => {
             if (this.visible && layer === this.scene.debugLayer && !transparent) {
                 device.setBlendState(blendState);
                 device.setCullMode(CULLFACE_NONE);

src/outline.ts

@@ -50,7 +50,7 @@ class Outline extends Element {
         const clrStorage = [1, 1, 1, 1];
 
         // apply the outline texture to the display before gizmos render
-        this.entity.camera.onPostRenderLayer = (layer: Layer, transparent: boolean) => {
+        this.entity.camera.on('postRenderLayer', (layer: Layer, transparent: boolean) => {
             if (!this.entity.enabled || layer !== this.scene.overlayLayer || !transparent) {
                 return;
             }
@@ -73,7 +73,7 @@ class Outline extends Element {
             glDevice.updateBegin();
             this.quadRender.render();
             glDevice.updateEnd();
-        };
+        });
     }
 
     remove() {

src/scene.ts

@@ -1,7 +1,10 @@
 import {
+    EVENT_POSTRENDER_LAYER,
+    EVENT_PRERENDER_LAYER,
     LAYERID_DEPTH,
     SORTMODE_NONE,
     BoundingBox,
+    CameraComponent,
     Color,
     Entity,
     Layer,
@@ -128,6 +131,15 @@ class Scene {
             this.forceRender = true;
         });
 
+        // fire pre and post render events on the camera
+        this.app.scene.on(EVENT_PRERENDER_LAYER, (camera: CameraComponent, layer: Layer, transparent: boolean) => {
+            camera.fire('preRenderLayer', layer, transparent);
+        });
+
+        this.app.scene.on(EVENT_POSTRENDER_LAYER, (camera: CameraComponent, layer: Layer, transparent: boolean) => {
+            camera.fire('postRenderLayer', layer, transparent);
+        });
+
         // background layer
         this.backgroundLayer = new Layer({
             enabled: true,