three-cad-viewer 4.1.2 → 4.2.0

package/src/core/viewer.ts

@@ -40,14 +40,19 @@ import { BoundingBox, BoxHelper } from "../scene/bbox.js";
 import { Tools, type ToolResponse } from "../tools/cad_tools/tools.js";
 import { version } from "../_version.js";
 import { PickedObject, Raycaster, TopoFilter } from "../rendering/raycast.js";
+import { StudioManager } from "./studio-manager.js";
 import { ViewerState } from "./viewer-state.js";
 import { logger } from "../utils/logger.js";
+import { isInstancedFormat, decodeInstancedFormat, decodeInlineBuffers } from "../utils/decode-instances.js";
 import type { Display } from "../ui/display.js";
 import type { Vector3Tuple, QuaternionTuple } from "three";
 import {
   CollapseState,
   type ZebraColorScheme,
   type ZebraMappingMode,
+  type StudioToneMapping,
+  type StudioTextureMapping,
+  type StudioBackground,
   type NotificationCallback,
   type RenderOptions,
   type ViewerOptions,
@@ -205,6 +210,8 @@ interface DisplayOptionsInternal {
   zebraTool?: boolean;
   glass?: boolean;
   tools?: boolean;
+  canvas?: HTMLCanvasElement;
+  gl?: WebGLRenderingContext | WebGL2RenderingContext;
   keymap?: KeymapConfig;
   [key: string]: unknown;
 }
@@ -289,6 +296,8 @@ class Viewer {
   // Always available (set in constructor)
   display!: Display;
   renderer!: THREE.WebGLRenderer;
+  private _externalGl: boolean;
+  onAfterRender: (() => void) | null;
   mouse!: THREE.Vector2;
   cadTools!: Tools;
   animation!: Animation;
@@ -352,6 +361,11 @@ class Viewer {
   // Raycaster
   raycaster: Raycaster | null;
 
+  // Studio mode orchestration (owns composer, floor, shadow lights, env manager)
+  private _studioManager!: StudioManager;
+
+  /** Environment manager — proxied from StudioManager for display.ts access. */
+  get envManager() { return this._studioManager.envManager; }
   // Z-scale
   zScale!: number;
 
@@ -402,6 +416,7 @@ class Viewer {
     this.notifyCallback = notifyCallback;
     this.pinAsPngCallback = pinAsPngCallback;
     this.updateMarker = updateMarker;
+    this.onAfterRender = null;
 
     this.hasAnimationLoop = false;
 
@@ -445,17 +460,28 @@ class Viewer {
 
     this.mouse = new THREE.Vector2();
 
-    // setup renderer
-    this.renderer = new THREE.WebGLRenderer({
+    // setup renderer — support externally provided canvas and/or WebGL context
+    const rendererParams: THREE.WebGLRendererParameters = {
       alpha: true,
       antialias: true,
       stencil: true,
-    });
+    };
+    if (options.canvas) {
+      rendererParams.canvas = options.canvas;
+    }
+    if (options.gl) {
+      rendererParams.context = options.gl;
+    }
+    this._externalGl = !!(options.canvas || options.gl);
+    this.renderer = new THREE.WebGLRenderer(rendererParams);
+    this.renderer.outputColorSpace = THREE.SRGBColorSpace;
     this.renderer.setPixelRatio(window.devicePixelRatio);
     this.renderer.setSize(this.state.get("cadWidth"), this.state.get("height"));
     this.renderer.setClearColor(0xffffff, 0);
     this.renderer.autoClear = false;
 
+    // Create studio manager (env, floor, composer created lazily inside)
+
     this.lastNotification = {};
     this.lastBbox = null;
 
@@ -493,9 +519,31 @@ class Viewer {
 
     this.display.setupUI(this, this.renderer.domElement);
 
+    // Create studio manager (owns env, floor, composer, shadows, subscriptions)
+    this._studioManager = new StudioManager({
+      renderer: this.renderer,
+      state: this.state,
+      isRendered: () => this._rendered !== null,
+      getScene: () => this.rendered.scene,
+      getCamera: () => this.rendered.camera,
+      getAmbientLight: () => this.rendered.ambientLight,
+      getDirectLight: () => this.rendered.directLight,
+      getNestedGroup: () => this.rendered.nestedGroup,
+      getClipping: () => this.rendered.clipping,
+      getBbox: () => this.bbox,
+      getLastBboxId: () => this.lastBbox?.id ?? null,
+      setAxes: (flag, notify) => this.setAxes(flag, notify),
+      setGrids: (grids, notify) => this.setGrids(grids, notify),
+      setOrtho: (flag, notify) => this.setOrtho(flag, notify),
+      update: (updateMarker, notify) => this.update(updateMarker, notify),
+      dispatchEvent: (event) => this.display.container.dispatchEvent(event),
+      onSelectionChanged: (id) => this.display.onSelectionChanged(id),
+    });
+
     console.debug("three-cad-viewer: WebGL Renderer created");
   }
 
+
   /**
    * Return three-cad-viewer version as semver string.
    * @returns semver version
@@ -805,7 +853,14 @@ class Viewer {
   update = (updateMarker: boolean, notify: boolean = true): void => {
     if (!this.ready) return;
 
-    this.renderer.clear();
+    if (this._externalGl) {
+      this.renderer.resetState();
+    }
+    // When the composer is active, its RenderPass handles clearing;
+    // skip manual clear to avoid double-clear artifacts.
+    if (!this._studioManager.hasComposer) {
+      this.renderer.clear();
+    }
 
     if (
       this.raycaster &&
@@ -823,7 +878,19 @@ class Viewer {
       this.state.get("cadWidth"),
       this.state.get("height"),
     );
-    this.renderer.render(this.rendered.scene, this.rendered.camera.getCamera());
+
+    // Env background: render HDRI to 2D render target (fixed-FOV bgCamera)
+    if (this._studioManager.isEnvBackgroundActive) {
+      this._studioManager.updateEnvBackground(this.renderer, this.rendered.camera.getCamera());
+    }
+
+    // Render: use composer pipeline when available (AO + tone mapping + SMAA),
+    // otherwise fall back to direct renderer.render().
+    if (this._studioManager.hasComposer) {
+      this._studioManager.render();
+    } else {
+      this.renderer.render(this.rendered.scene, this.rendered.camera.getCamera());
+    }
     this.cadTools.update();
 
     this.rendered.directLight.position.copy(this.rendered.camera.getCamera().position);
@@ -860,6 +927,16 @@ class Viewer {
       },
       notify,
     );
+
+    // In shared/external WebGL mode, clean up renderer state before external
+    // renderers/hooks (overlays, etc.) draw on the same context.
+    if (this._externalGl) {
+      this.renderer.resetState();
+    }
+
+    if (this.onAfterRender) {
+      this.onAfterRender();
+    }
   };
 
   /**
@@ -917,11 +994,13 @@ class Viewer {
   dispose(): void {
     this.clear();
 
+    // dispose studio resources (composer, floor, env, shadows — must be before renderer)
+    this._studioManager.dispose();
     // dispose renderer
     this.renderer.renderLists.dispose();
     this.renderer.dispose();
-    // forceContextLoss may not exist in test mocks
-    if (typeof this.renderer.forceContextLoss === "function") {
+    // Skip context loss for externally provided WebGL contexts
+    if (!this._externalGl && typeof this.renderer.forceContextLoss === "function") {
       this.renderer.forceContextLoss();
     }
     console.debug("three-cad-viewer: WebGL context disposed");
@@ -984,7 +1063,11 @@ class Viewer {
         this.state.set("zscaleActive", false);
       }
 
-      // Reset to tree tab for next render
+      // Reset to tree tab for next render.
+      // IMPORTANT: This fires the activeTab subscription synchronously,
+      // which calls switchToTab("tree", oldTab). If oldTab was "studio",
+      // leaveStudioMode() runs here, while _rendered and scene are still valid.
+      // Do NOT move this after deepDispose(scene).
       this.state.set("activeTab", "tree");
 
       // clear render canvas
@@ -1002,6 +1085,8 @@ class Viewer {
 
       // dispose all rendered state objects
       deepDispose(this._rendered.scene);
+
+      // Studio lights were children of the scene and have been disposed by
       deepDispose(this._rendered.gridHelper);
       deepDispose(this._rendered.clipping);
       deepDispose(this._rendered.camera);
@@ -1133,6 +1218,9 @@ class Viewer {
       if (group.front) {
         return "#" + group.front.material.color.getHexString();
       }
+      if (group.originalColor) {
+        return "#" + group.originalColor.getHexString();
+      }
     }
     return null;
   };
@@ -1289,7 +1377,7 @@ class Viewer {
 
   /**
    * Set the active sidebar tab.
-   * @param tabName - Tab name: "tree", "clip", "material", or "zebra"
+   * @param tabName - Tab name: "tree", "clip", "material", "zebra", or "studio"
    * @param notify - whether to send notification or not.
    */
   setActiveTab(tabName: ActiveTab, notify: boolean = true): void {
@@ -1341,10 +1429,26 @@ class Viewer {
     renderOptions: RenderOptions,
     viewerOptions: ViewerOptions,
   ): void {
+    // Decode instanced/compressed format if detected
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (isInstancedFormat(shapes as any)) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      shapes = decodeInstancedFormat(shapes as any);
+    }
+    // Decode any remaining inline base64 buffers (e.g., edge/vertex-only objects)
+    decodeInlineBuffers(shapes);
     this.shapes = shapes;
     this.renderOptions = renderOptions;
     this.setViewerDefaults(viewerOptions);
 
+    // Backward compat: studioOptions on shapes root is deprecated
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if ((shapes as any).studioOptions) {
+      logger.warn("shapes.studioOptions is deprecated — pass studio settings in viewerOptions instead");
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      this.state.updateStudioState((shapes as any).studioOptions);
+    }
+
     this.animation.cleanBackup();
 
     const timer = new Timer("viewer", this.state.get("timeit"));
@@ -1435,8 +1539,12 @@ class Viewer {
       cadWidth: this.state.get("cadWidth"),
       height: this.state.get("height"),
       maxAnisotropy: this.renderer.capabilities.getMaxAnisotropy(),
-      tickValueElement: this.display.tickValueElement,
-      tickInfoElement: this.display.tickInfoElement,
+      ...(this.state.get("tools")
+        ? {
+          tickValueElement: this.display.tickValueElement,
+          tickInfoElement: this.display.tickInfoElement,
+        }
+        : {}),
       getCamera: () => this._rendered?.camera.getCamera() ?? null,
       getAxes0: () => this.state?.get("axes0") ?? false,
     });
@@ -1485,6 +1593,9 @@ class Viewer {
 
     scene.add(clipping);
 
+    // Add studio floor group to scene (hidden by default, shown in enterStudioMode)
+    scene.add(this._studioManager.floor.group);
+
     // Theme is already resolved ("light" or "dark") by ViewerState constructor
     const theme = this.state.get("theme");
 
@@ -1589,6 +1700,11 @@ class Viewer {
 
     this.ready = true;
 
+    if (!this.state.get("tools")) {
+      this.display.showToolsPanel(false);
+      this.rendered.orientationMarker.setVisible(false);
+    }
+
     // Apply clip settings AFTER ready=true (clip setters check this.ready)
     // Set normals first (if provided), passing slider values to avoid reset to gridSize/2
     this.setClipNormal(0, viewerOptions.clipNormal0 ?? null, clipSlider0, true);
@@ -1748,6 +1864,10 @@ class Viewer {
     this.rendered.camera.switchCamera(flag);
     this.rendered.controls.setCamera(this.rendered.camera.getCamera());
 
+    // Update composer camera after the actual swap (not in the ortho
+    // subscriber, which fires before the camera switches)
+    this._studioManager.setCamera(this.rendered.camera.getCamera());
+
     this.rendered.gridHelper.scaleLabels();
     this.rendered.gridHelper.update(this.rendered.camera.getZoom(), true);
 
@@ -1994,7 +2114,7 @@ class Viewer {
     name: string,
     meta: boolean,
     shift: boolean,
-    _alt: boolean,
+    alt: boolean,
     point: THREE.Vector3 | null,
     nodeType: string | null = "leaf",
     tree: boolean = false,
@@ -2036,7 +2156,8 @@ class Viewer {
         this.removeLastBbox();
         if (tree) {
           this.rendered.treeview.hideAll();
-          this.setState(id, [1, 1], nodeType ?? "leaf");
+          const showEdges = this._studioManager.isActive ? 0 : 1;
+          this.setState(id, [1, showEdges], nodeType ?? "leaf");
         } else {
           const center = boundingBox.center();
           this.setCameraTarget(point ?? new THREE.Vector3(...center));
@@ -2045,18 +2166,27 @@ class Viewer {
       } else if (shift) {
         this.removeLastBbox();
         this.rendered.treeview.hideAll();
-        this.setState(id, [1, 1], nodeType ?? "leaf");
+        const showEdges = this._studioManager.isActive ? 0 : 1;
+        this.setState(id, [1, showEdges], nodeType ?? "leaf");
         const center = boundingBox.center();
         this.setCameraTarget(new THREE.Vector3(...center));
         this.display.showCenterInfo(center);
       } else if (meta) {
         this.setState(id, [0, 0], nodeType ?? "leaf");
+      } else if (alt) {
+        // same as else branch to make typscript happy
+        this.display.showBoundingBoxInfo(path, name, boundingBox);
+        this.setBoundingBox(id);
+        this.rendered.treeview.openPath(id);
       } else {
         this.display.showBoundingBoxInfo(path, name, boundingBox);
         this.setBoundingBox(id);
         this.rendered.treeview.openPath(id);
       }
     }
+    if (this._studioManager.isActive) {
+      this.display.onSelectionChanged(this.lastBbox?.id ?? null);
+    }
     this.update(true);
   };
 
@@ -2088,7 +2218,7 @@ class Viewer {
       this.state.get("height"),
       this.bb_max / 30,
       this.rendered.scene.children[0],
-      () => {},
+      () => { },
     );
     raycaster.init();
     raycaster.onPointerMove(e);
@@ -2121,9 +2251,9 @@ class Viewer {
       boundingBox:
         shapesFormat === "GDS"
           ? new THREE.Box3(
-              point.clone().subScalar(10),
-              point.clone().addScalar(10),
-            )
+            point.clone().subScalar(10),
+            point.clone().addScalar(10),
+          )
           : nearestMesh.geometry.boundingBox,
       boundingSphere:
         shapesFormat === "GDS"
@@ -2672,6 +2802,18 @@ class Viewer {
     this.update(this.updateMarker);
   };
 
+  /**
+   * Resets zebra tool settings to defaults: count=9, opacity=1, direction=0,
+   * colorScheme=blackwhite, mappingMode=reflection.
+   */
+  resetZebra = (): void => {
+    this.setZebraCount(9);
+    this.setZebraOpacity(1.0);
+    this.setZebraDirection(0);
+    this.setZebraColorScheme("blackwhite");
+    this.setZebraMappingMode("reflection");
+  };
+
   /**
    * Gets the current stripe count value.
    * @returns The stripe count (2-50).
@@ -2712,6 +2854,253 @@ class Viewer {
     return this.state.get("zebraMappingMode");
   };
 
+  // ---------------------------------------------------------------------------
+  // Getters & Setters: Studio Mode
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Sets the studio environment preset.
+   * @param value - The environment name ("studio", "neutral", "outdoor", "none", or custom HDR URL).
+   * @param notify - Whether to notify about the changes.
+   * @public
+   */
+  setStudioEnvironment = (value: string, notify: boolean = true): void => {
+    this.state.set("studioEnvironment", value, notify);
+  };
+
+  /**
+   * Sets the studio environment intensity.
+   * @param value - The environment intensity (0-3).
+   * @param notify - Whether to notify about the changes.
+   * @public
+   */
+  setStudioEnvIntensity = (value: number, notify: boolean = true): void => {
+    value = Math.max(0, Math.min(3, value));
+    this.state.set("studioEnvIntensity", value, notify);
+  };
+
+  /**
+   * Sets the background mode for Studio mode.
+   * @param value - The background mode ("grey", "white", "gradient", "environment", or "transparent").
+   * @param notify - Whether to notify about the changes.
+   * @public
+   */
+  setStudioBackground = (value: StudioBackground, notify: boolean = true): void => {
+    this.state.set("studioBackground", value, notify);
+  };
+
+  /**
+   * Sets the tone mapping mode for Studio mode.
+   * @param value - The tone mapping mode ("neutral", "ACES", or "none").
+   * @param notify - Whether to notify about the changes.
+   * @public
+   */
+  setStudioToneMapping = (value: StudioToneMapping, notify: boolean = true): void => {
+    this.state.set("studioToneMapping", value, notify);
+  };
+
+  /**
+   * Sets the exposure value for Studio mode.
+   * @param value - The exposure value (0-2).
+   * @param notify - Whether to notify about the changes.
+   * @public
+   */
+  setStudioExposure = (value: number, notify: boolean = true): void => {
+    value = Math.max(0, Math.min(2, value));
+    this.state.set("studioExposure", value, notify);
+  };
+
+  /**
+   * Sets whether 4K environment maps are used (default: 2K).
+   * @param value - True for 4K, false for 2K.
+   * @param notify - Whether to notify about the changes.
+   * @public
+   */
+  setStudio4kEnvMaps = (value: boolean, notify: boolean = true): void => {
+    this.state.set("studio4kEnvMaps", value, notify);
+  };
+
+  /**
+   * Gets whether 4K environment maps are enabled.
+   * @returns True for 4K, false for 2K.
+   * @public
+   */
+  getStudio4kEnvMaps = (): boolean => {
+    return this.state.get("studio4kEnvMaps");
+  };
+
+  /**
+   * Sets the environment rotation for Studio mode.
+   * @param value - The rotation in degrees (0-360).
+   * @param notify - Whether to notify about the changes.
+   * @public
+   */
+  setStudioEnvRotation = (value: number, notify: boolean = true): void => {
+    this.state.set("studioEnvRotation", value, notify);
+  };
+
+  /**
+   * Gets the current environment rotation for Studio mode.
+   * @returns The rotation in degrees (0-360).
+   * @public
+   */
+  getStudioEnvRotation = (): number => {
+    return this.state.get("studioEnvRotation");
+  };
+
+  /**
+   * Sets the texture mapping mode for Studio mode.
+   * @param value - The texture mapping mode ("triplanar" or "parametric").
+   * @param notify - Whether to notify about the changes.
+   * @public
+   */
+  setStudioTextureMapping = (value: StudioTextureMapping, notify: boolean = true): void => {
+    this.state.set("studioTextureMapping", value, notify);
+  };
+
+  /**
+   * Gets the current texture mapping mode for Studio mode.
+   * @returns The texture mapping mode ("triplanar" or "parametric").
+   * @public
+   */
+  getStudioTextureMapping = (): StudioTextureMapping => {
+    return this.state.get("studioTextureMapping");
+  };
+
+  /**
+   * Gets the current studio environment preset.
+   * @returns The environment name ("studio", "neutral", "outdoor", "none", or custom HDR URL).
+   * @public
+   */
+  getStudioEnvironment = (): string => {
+    return this.state.get("studioEnvironment");
+  };
+
+  /**
+   * Gets the current studio environment intensity.
+   * @returns The environment intensity (0-3).
+   * @public
+   */
+  getStudioEnvIntensity = (): number => {
+    return this.state.get("studioEnvIntensity");
+  };
+
+  /**
+   * Gets the current background mode for Studio mode.
+   * @returns The background mode ("grey", "white", "gradient", "environment", or "transparent").
+   * @public
+   */
+  getStudioBackground = (): StudioBackground => {
+    return this.state.get("studioBackground");
+  };
+
+  /**
+   * Gets the current tone mapping mode for Studio mode.
+   * @returns The tone mapping mode ("neutral", "ACES", or "none").
+   * @public
+   */
+  getStudioToneMapping = (): StudioToneMapping => {
+    return this.state.get("studioToneMapping");
+  };
+
+  /**
+   * Gets the current exposure value for Studio mode.
+   * @returns The exposure value (0-3).
+   * @public
+   */
+  getStudioExposure = (): number => {
+    return this.state.get("studioExposure");
+  };
+
+  /**
+   * Sets the shadow intensity in Studio mode.
+   * A value of 0 disables shadows; values > 0 enable them at that darkness.
+   * @param value - The shadow intensity (0-1).
+   * @param notify - Whether to notify about the changes.
+   * @public
+   */
+  setStudioShadowIntensity = (value: number, notify: boolean = true): void => {
+    value = Math.max(0, Math.min(1, value));
+    this.state.set("studioShadowIntensity", value, notify);
+  };
+
+  /**
+   * Gets the current shadow intensity in Studio mode.
+   * @returns The shadow intensity (0-1). 0 means shadows are off.
+   * @public
+   */
+  getStudioShadowIntensity = (): number => {
+    return this.state.get("studioShadowIntensity");
+  };
+
+  /**
+   * Sets the shadow softness in Studio mode.
+   * Controls PCSS penumbra width (virtual light source size).
+   * @param value - The shadow softness (0-1).
+   * @param notify - Whether to notify about the changes.
+   * @public
+   */
+  setStudioShadowSoftness = (value: number, notify: boolean = true): void => {
+    value = Math.max(0, Math.min(1, value));
+    this.state.set("studioShadowSoftness", value, notify);
+  };
+
+  /**
+   * Gets the current shadow softness in Studio mode.
+   * @returns The shadow softness (0-1).
+   * @public
+   */
+  getStudioShadowSoftness = (): number => {
+    return this.state.get("studioShadowSoftness");
+  };
+
+  /**
+   * Sets the ambient occlusion intensity in Studio mode.
+   * A value of 0 disables AO; values > 0 enable it at that intensity.
+   * @param value - The AO intensity (0-3.0).
+   * @param notify - Whether to notify about the changes.
+   * @public
+   */
+  setStudioAOIntensity = (value: number, notify: boolean = true): void => {
+    this.state.set("studioAOIntensity", value, notify);
+  };
+
+  /**
+   * Gets the current ambient occlusion intensity in Studio mode.
+   * @returns The AO intensity value (0.5-3.0).
+   * @public
+   */
+  getStudioAOIntensity = (): number => {
+    return this.state.get("studioAOIntensity");
+  };
+
+  /**
+   * Returns whether Studio mode is currently active.
+   * @returns True if Studio mode is active and the viewer has rendered content.
+   * @public
+   */
+  get isStudioActive(): boolean {
+    return this._studioManager.isActive;
+  }
+
+  /**
+   * Get the ObjectGroup and path for the currently selected object in Studio mode.
+   * Returns null if nothing is selected, Studio mode is inactive, or the
+   * selection is a CompoundGroup (assembly node) rather than a leaf object.
+   */
+  getSelectedObjectGroup(): { object: ObjectGroup; path: string } | null {
+    return this._studioManager.getSelectedObjectGroup();
+  }
+
+  /** Enter Studio mode. Called by display.ts switchToTab(). @internal */
+  enterStudioMode = () => this._studioManager.enterStudioMode();
+
+  /** Leave Studio mode. Called by display.ts switchToTab(). @internal */
+  leaveStudioMode = () => this._studioManager.leaveStudioMode();
+
+  /** Reset Studio settings to defaults. @public */
+  resetStudio = () => this._studioManager.resetStudio();
+
   // ---------------------------------------------------------------------------
   // Camera State Getters & Setters
   // ---------------------------------------------------------------------------
@@ -3927,6 +4316,21 @@ class Viewer {
     }
   };
 
+  /**
+   * Resets clip planes to default normals and slider positions.
+   * Normals reset to -X, -Y, -Z; sliders to gridSize/2; checkboxes unchecked.
+   */
+  resetClip = (): void => {
+    if (!this.ready) return;
+    const mid = this.gridSize / 2;
+    this.setClipNormal(0, [-1, 0, 0], mid, true);
+    this.setClipNormal(1, [0, -1, 0], mid, true);
+    this.setClipNormal(2, [0, 0, -1], mid, true);
+    this.setClipIntersection(false, true);
+    this.setClipObjectColorCaps(false, true);
+    this.setClipPlaneHelpers(false, true);
+  };
+
   // ---------------------------------------------------------------------------
   // Image Export
   // ---------------------------------------------------------------------------
@@ -3982,7 +4386,14 @@ class Viewer {
           this.state.get("cadWidth"),
           this.state.get("height"),
         );
-        this.renderer.render(this.rendered.scene, this.rendered.camera.getCamera());
+        if (this._studioManager.isEnvBackgroundActive) {
+          this._studioManager.updateEnvBackground(this.renderer, this.rendered.camera.getCamera());
+        }
+        if (this._studioManager.hasComposer) {
+          this._studioManager.render();
+        } else {
+          this.renderer.render(this.rendered.scene, this.rendered.camera.getCamera());
+        }
       },
       onComplete: () => {
         // Restore animation loop to original state
@@ -4226,6 +4637,9 @@ class Viewer {
     this.rendered.camera.changeDimensions(this.bb_radius, cadWidth, height);
     this.controls.handleResize();
 
+    // Resize the post-processing composer (render targets must match viewport)
+    this._studioManager.setSize(cadWidth, height);
+
     // update the this
     this.update(true);
 
@@ -4307,14 +4721,31 @@ class Viewer {
   };
 
   /**
-   * Show/hide the info panel.
-   * @param flag - whether to show the info panel
+   * Collapse or expand the info panel in glass mode.
+   * @param flag - true to show, false to collapse
    * @public
    */
-  showInfo = (flag: boolean): void => {
+  showInfoPanel = (flag: boolean): void => {
     this.display.showInfo(flag);
   };
 
+  /**
+   * @deprecated Use showInfoPanel() instead.
+   */
+  showInfo = (flag: boolean): void => {
+    console.warn("showInfo() is deprecated, use showInfoPanel() instead.");
+    this.showInfoPanel(flag);
+  };
+
+  /**
+   * Collapse or expand the tools panel (tabs + content) in glass mode.
+   * @param flag - true to show, false to collapse
+   * @public
+   */
+  showToolsPanel = (flag: boolean): void => {
+    this.display.showToolsPanel(flag);
+  };
+
   /**
    * Show/hide the pinning button.
    * @param flag - whether to show the pinning button