Fix some issues with CameraFrame.enabled not working correctly (#7311)

Co-authored-by: Martin Valigursky <[email protected]>

Author: mvaligursky

examples/src/examples/graphics/ambient-occlusion.controls.mjs

@@ -7,6 +7,15 @@ import * as pc from 'playcanvas';
 export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
+        jsx(
+            LabelGroup,
+            { text: 'enabled' },
+            jsx(BooleanInput, {
+                type: 'toggle',
+                binding: new BindingTwoWay(),
+                link: { observer, path: 'data.enabled' }
+            })
+        ),
         jsx(
             Panel,
             { headerText: 'Ambient Occlusion' },

examples/src/examples/graphics/ambient-occlusion.example.mjs

@@ -146,7 +146,8 @@ assetListLoader.load(() => {
     cameraEntity.addComponent('camera', {
         clearColor: new pc.Color(0.4, 0.45, 0.5),
         nearClip: 1,
-        farClip: 600
+        farClip: 600,
+        toneMapping: pc.TONEMAP_NEUTRAL
     });
 
     // add orbit camera script
@@ -175,6 +176,9 @@ assetListLoader.load(() => {
 
     const applySettings = () => {
 
+        // enabled
+        cameraFrame.enabled = data.get('data.enabled');
+
         cameraFrame.ssao.type = data.get('data.ssao.type');
         cameraFrame.ssao.blurEnabled = data.get('data.ssao.blurEnabled');
         cameraFrame.ssao.intensity = data.get('data.ssao.intensity');
@@ -215,6 +219,7 @@ assetListLoader.load(() => {
 
     // initial settings
     data.set('data', {
+        enabled: true,
         ssao: {
             type: pc.SSAOTYPE_LIGHTING,
             blurEnabled: true,

examples/src/examples/graphics/post-processing.controls.mjs

@@ -7,6 +7,15 @@ import * as pc from 'playcanvas';
 export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
+        jsx(
+            LabelGroup,
+            { text: 'enabled' },
+            jsx(BooleanInput, {
+                type: 'toggle',
+                binding: new BindingTwoWay(),
+                link: { observer, path: 'data.enabled' }
+            })
+        ),
         jsx(
             Panel,
             { headerText: 'Scene Rendering' },

examples/src/examples/graphics/post-processing.example.mjs

@@ -237,6 +237,9 @@ assetListLoader.load(() => {
             material.update();
         });
 
+        // enabled
+        cameraFrame.enabled = data.get('data.enabled');
+
         // Scene
         cameraFrame.rendering.renderTargetScale = data.get('data.scene.scale');
         cameraFrame.rendering.toneMapping = data.get('data.scene.tonemapping');
@@ -283,6 +286,7 @@ assetListLoader.load(() => {
 
     // set initial values
     data.set('data', {
+        enabled: true,
         scene: {
             scale: 1.8,
             background: 6,

src/extras/render-passes/camera-frame.js

@@ -173,6 +173,9 @@ import { CameraFrameOptions, RenderPassCameraFrame } from './render-pass-camera-
  * @category Render Pass
  */
 class CameraFrame {
+    /** @private */
+    _enabled = true;
+
     /**
      * Rendering settings.
      *
@@ -303,7 +306,7 @@ class CameraFrame {
         Debug.assert(cameraComponent, 'CameraFrame: cameraComponent must be defined');
 
         this.updateOptions();
-        this.enabled = true;
+        this.enable();
     }
 
     /**
@@ -314,40 +317,44 @@ class CameraFrame {
     }
 
     enable() {
-        if (!this.renderPassCamera) {
-            const cameraComponent = this.cameraComponent;
-            this.renderPassCamera = new RenderPassCameraFrame(this.app, cameraComponent, this.options);
-            cameraComponent.renderPasses = [this.renderPassCamera];
-        }
+        Debug.assert(!this.renderPassCamera);
+
+        const cameraComponent = this.cameraComponent;
+        this.renderPassCamera = new RenderPassCameraFrame(this.app, cameraComponent, this.options);
+        cameraComponent.renderPasses = [this.renderPassCamera];
     }
 
     disable() {
-        if (this.renderPassCamera) {
-            const cameraComponent = this.cameraComponent;
-            cameraComponent.renderPasses?.forEach((renderPass) => {
-                renderPass.destroy();
-            });
-            cameraComponent.renderPasses = [];
-            cameraComponent.rendering = null;
-
-            cameraComponent.jitter = 0;
-
-            // no longer HDR rendering
-            cameraComponent.gammaCorrection = GAMMA_SRGB;
-        }
+        Debug.assert(this.renderPassCamera);
+
+        const cameraComponent = this.cameraComponent;
+        cameraComponent.renderPasses?.forEach((renderPass) => {
+            renderPass.destroy();
+        });
+        cameraComponent.renderPasses = [];
+        cameraComponent.rendering = null;
+
+        cameraComponent.jitter = 0;
+
+        // no longer HDR rendering
+        cameraComponent.gammaCorrection = GAMMA_SRGB;
+
+        this.renderPassCamera = null;
     }
 
     /**
-     * Sets the enabled state of the camera frame. This disabled the render passes, and releases
-     * any resources.
+     * Sets the enabled state of the camera frame. Passing false will release associated resources.
      *
      * @type {boolean}
      */
     set enabled(value) {
-        if (value) {
-            this.enable();
-        } else {
-            this.disable();
+        if (this._enabled !== value) {
+            if (value) {
+                this.enable();
+            } else {
+                this.disable();
+            }
+            this._enabled = value;
         }
     }
 
@@ -357,7 +364,7 @@ class CameraFrame {
      * @type {boolean}
      */
     get enabled() {
-        return this.renderPassCamera !== null;
+        return this._enabled;
     }
 
     updateOptions() {
@@ -382,7 +389,7 @@ class CameraFrame {
      */
     update() {
 
-        if (!this.enabled) return;
+        if (!this._enabled) return;
 
         const cameraComponent = this.cameraComponent;
         const { options, renderPassCamera, rendering, bloom, grading, vignette, fringing, taa, ssao } = this;