feat(examples): add Camera Frame toggle to portal example

examples/src/examples/graphics/portal.controls.mjs

@@ -0,0 +1,23 @@
+/**
+ * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
+ * @returns {JSX.Element} The returned JSX Element.
+ */
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
+    const { BindingTwoWay, BooleanInput, LabelGroup, Panel } = ReactPCUI;
+    return fragment(
+        jsx(
+            Panel,
+            { headerText: 'Camera' },
+            jsx(
+                LabelGroup,
+                { text: 'Camera Frame' },
+                jsx(BooleanInput, {
+                    type: 'toggle',
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'cameraFrame' },
+                    value: observer.get('cameraFrame') || false
+                })
+            )
+        )
+    );
+};

examples/src/examples/graphics/portal.example.mjs

@@ -1,3 +1,4 @@
+import { data } from 'examples/observer';
 import { deviceType, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 
@@ -154,13 +155,27 @@ assetListLoader.load(() => {
     camera.setLocalEulerAngles(-27, 45, 0);
     app.root.addChild(camera);
 
-    // ------ Custom render passes set up ------
+    // ------ Camera frame (optional), stencil + MSAA — default off ------
 
-    const cameraFrame = new pc.CameraFrame(app, camera.camera);
-    cameraFrame.rendering.stencil = true;
-    cameraFrame.rendering.samples = 4;
-    cameraFrame.rendering.toneMapping = pc.TONEMAP_ACES2;
-    cameraFrame.update();
+    /** @type {pc.CameraFrame|null} */
+    let cameraFrame = null;
+
+    data.set('cameraFrame', false);
+    data.on('cameraFrame:set', () => {
+        if (data.get('cameraFrame')) {
+            if (!cameraFrame) {
+                cameraFrame = new pc.CameraFrame(app, camera.camera);
+                cameraFrame.rendering.stencil = true;
+                cameraFrame.rendering.samples = 4;
+                cameraFrame.rendering.toneMapping = camera.camera.toneMapping;
+            }
+            cameraFrame.enabled = true;
+            cameraFrame.update();
+        } else if (cameraFrame) {
+            cameraFrame.destroy();
+            cameraFrame = null;
+        }
+    });
 
     // ------------------------------------------