mujoco-react 10.2.1 → 10.3.0

package/src/core/MujocoSimProvider.tsx

@@ -37,6 +37,7 @@ import {
   LoadFromFilesOptions,
   LocalMujocoFile,
   ModelOptions,
+  MujocoRenderOptions,
   MujocoSimAPI,
   PhysicsStepCallback,
   RayHit,
@@ -241,6 +242,143 @@ function applyMountedCameraPoseOffsets(
   };
 }
 
+function resolveMujocoCameraCompatibilityOptions(
+  options: CameraFrameCaptureOptions
+) {
+  const compatibility = options.mujocoCameraCompatibility;
+  if (!compatibility) return null;
+  if (compatibility === true) {
+    return {
+      useResolution: true,
+      useIntrinsics: true,
+      useClipping: true,
+      preserveAspect: true,
+      preferResolution: false,
+    };
+  }
+  return {
+    useResolution: compatibility.useResolution ?? true,
+    useIntrinsics: compatibility.useIntrinsics ?? true,
+    useClipping: compatibility.useClipping ?? true,
+    preserveAspect: compatibility.preserveAspect ?? true,
+    preferResolution: compatibility.preferResolution ?? false,
+  };
+}
+
+function mujocoVisualClip(model: MujocoModel) {
+  const map = (model as unknown as {
+    vis?: { map?: { znear?: number; zfar?: number } };
+  }).vis?.map;
+  const near = typeof map?.znear === 'number' && map.znear > 0
+    ? map.znear
+    : undefined;
+  const far = typeof map?.zfar === 'number' && map.zfar > 0
+    ? map.zfar
+    : undefined;
+  return { near, far };
+}
+
+function mujocoCameraResolution(
+  model: MujocoModel,
+  cameraId: number
+): { width?: number; height?: number } {
+  const resolution = model.cam_resolution;
+  if (!resolution) return {};
+  const width = Number(resolution[cameraId * 2]);
+  const height = Number(resolution[cameraId * 2 + 1]);
+  return {
+    width: Number.isFinite(width) && width > 0 ? width : undefined,
+    height: Number.isFinite(height) && height > 0 ? height : undefined,
+  };
+}
+
+function mujocoCameraProjectionMatrix(
+  model: MujocoModel,
+  cameraId: number,
+  width: number | undefined,
+  height: number | undefined,
+  near: number | undefined,
+  far: number | undefined
+): THREE.Matrix4 | undefined {
+  const intrinsic = model.cam_intrinsic;
+  const sensorSize = model.cam_sensorsize;
+  if (!intrinsic || !sensorSize || !width || !height) return undefined;
+
+  const intrinsicOffset = cameraId * 4;
+  const sensorOffset = cameraId * 2;
+  const focalX = Number(intrinsic[intrinsicOffset]);
+  const focalY = Number(intrinsic[intrinsicOffset + 1]);
+  const principalX = Number(intrinsic[intrinsicOffset + 2]);
+  const principalY = Number(intrinsic[intrinsicOffset + 3]);
+  const sensorWidth = Number(sensorSize[sensorOffset]);
+  const sensorHeight = Number(sensorSize[sensorOffset + 1]);
+  if (
+    !Number.isFinite(focalX) ||
+    !Number.isFinite(focalY) ||
+    !Number.isFinite(principalX) ||
+    !Number.isFinite(principalY) ||
+    !Number.isFinite(sensorWidth) ||
+    !Number.isFinite(sensorHeight) ||
+    focalX <= 0 ||
+    focalY <= 0 ||
+    sensorWidth <= 0 ||
+    sensorHeight <= 0
+  ) {
+    return undefined;
+  }
+
+  const fx = focalX / sensorWidth * width;
+  const fy = focalY / sensorHeight * height;
+  const cx = width * (0.5 + principalX / sensorWidth);
+  const cy = height * (0.5 + principalY / sensorHeight);
+  const znear = near ?? 0.01;
+  const zfar = far ?? 100;
+
+  return new THREE.Matrix4().set(
+    2 * fx / width, 0, 1 - 2 * cx / width, 0,
+    0, 2 * fy / height, 2 * cy / height - 1, 0,
+    0, 0, -(zfar + znear) / (zfar - znear), -2 * zfar * znear / (zfar - znear),
+    0, 0, -1, 0
+  );
+}
+
+function resolveMujocoCameraCaptureDimensions(
+  requested: CameraFrameCaptureOptions,
+  cameraResolution: { width?: number; height?: number },
+  compatibility: NonNullable<ReturnType<typeof resolveMujocoCameraCompatibilityOptions>>
+) {
+  if (!compatibility.useResolution) {
+    return {
+      width: requested.width,
+      height: requested.height,
+    };
+  }
+
+  if (compatibility.preferResolution) {
+    return {
+      width: cameraResolution.width ?? requested.width,
+      height: cameraResolution.height ?? requested.height,
+    };
+  }
+
+  let width = requested.width ?? cameraResolution.width;
+  let height = requested.height ?? cameraResolution.height;
+
+  if (
+    compatibility.preserveAspect &&
+    cameraResolution.width &&
+    cameraResolution.height
+  ) {
+    if (requested.width !== undefined && requested.height === undefined) {
+      height = requested.width * cameraResolution.height / cameraResolution.width;
+    } else if (requested.height !== undefined && requested.width === undefined) {
+      width = requested.height * cameraResolution.width / cameraResolution.height;
+    }
+  }
+
+  return { width, height };
+}
+
 function countMountedCameraSelectors(options: CameraFrameCaptureOptions) {
   return Number(Boolean(options.cameraName)) +
     Number(Boolean(options.siteName)) +
@@ -406,6 +544,7 @@ interface MujocoSimProviderProps {
   paused?: boolean;
   speed?: number;
   interpolate?: boolean;
+  renderOptions?: MujocoRenderOptions;
   children: React.ReactNode;
 }
 
@@ -423,6 +562,7 @@ export function MujocoSimProvider({
   paused,
   speed,
   interpolate,
+  renderOptions,
   children,
 }: MujocoSimProviderProps) {
   const { gl, camera, scene } = useThree();
@@ -462,14 +602,12 @@ export function MujocoSimProvider({
   const hiddenBodiesRef = useRef(new Set<string>());
   const bodyReloadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  useEffect(() => { configRef.current = config; }, [config]);
-  useEffect(() => { mujocoRef.current = mujoco; }, [mujoco]);
-
-  // Sync declarative props to refs
-  useEffect(() => { pausedRef.current = paused ?? false; }, [paused]);
-  useEffect(() => { speedRef.current = speed ?? 1; }, [speed]);
-  useEffect(() => { substepsRef.current = substeps ?? 1; }, [substeps]);
-  useEffect(() => { interpolateRef.current = interpolate ?? false; }, [interpolate]);
+  configRef.current = config;
+  mujocoRef.current = mujoco;
+  pausedRef.current = paused ?? false;
+  speedRef.current = speed ?? 1;
+  substepsRef.current = substeps ?? 1;
+  interpolateRef.current = interpolate ?? false;
 
   // Sync gravity prop
   useEffect(() => {
@@ -1037,11 +1175,33 @@ export function MujocoSimProvider({
     for (let i = 0; i < ncam; i += 1) {
       const posOffset = i * 3;
       const quatOffset = i * 4;
+      const intrinsicOffset = i * 4;
+      const resolutionOffset = i * 2;
       result.push({
         id: i,
         name: getName(model, nameAddresses[i]),
         bodyId: model.cam_bodyid?.[i] ?? -1,
         fov: model.cam_fovy?.[i] ?? null,
+        resolution: model.cam_resolution
+          ? [
+            model.cam_resolution[resolutionOffset],
+            model.cam_resolution[resolutionOffset + 1],
+          ]
+          : null,
+        sensorSize: model.cam_sensorsize
+          ? [
+            model.cam_sensorsize[resolutionOffset],
+            model.cam_sensorsize[resolutionOffset + 1],
+          ]
+          : null,
+        intrinsic: model.cam_intrinsic
+          ? [
+            model.cam_intrinsic[intrinsicOffset],
+            model.cam_intrinsic[intrinsicOffset + 1],
+            model.cam_intrinsic[intrinsicOffset + 2],
+            model.cam_intrinsic[intrinsicOffset + 3],
+          ]
+          : null,
         position: model.cam_pos
           ? vector3FromArray(model.cam_pos, posOffset)
           : null,
@@ -1087,11 +1247,31 @@ export function MujocoSimProvider({
         }
 
         const pose = applyMountedCameraPoseOffsets(options, position, quaternion);
+        const compatibility = resolveMujocoCameraCompatibilityOptions(options);
+        const cameraResolution = compatibility?.useResolution
+          ? mujocoCameraResolution(model, cameraId)
+          : { width: undefined, height: undefined };
+        const clip = compatibility?.useClipping
+          ? mujocoVisualClip(model)
+          : { near: undefined, far: undefined };
+        const { width, height } = compatibility
+          ? resolveMujocoCameraCaptureDimensions(options, cameraResolution, compatibility)
+          : { width: options.width, height: options.height };
+        const near = options.near ?? clip.near;
+        const far = options.far ?? clip.far;
+        const projectionMatrix = compatibility?.useIntrinsics
+          ? mujocoCameraProjectionMatrix(model, cameraId, width, height, near, far)
+          : undefined;
 
         return {
           ...baseOptions,
+          width,
+          height,
           ...pose,
           fov: options.fov ?? model.cam_fovy?.[cameraId],
+          near,
+          far,
+          projectionMatrix: options.projectionMatrix ?? projectionMatrix,
           source: { kind: 'mujoco-camera', cameraName: options.cameraName },
         };
       }
@@ -1759,7 +1939,7 @@ export function MujocoSimProvider({
 
   return (
     <MujocoSimContext.Provider value={contextValue}>
-      <SceneRenderer />
+      <SceneRenderer renderOptions={renderOptions} />
       {children}
     </MujocoSimContext.Provider>
   );

package/src/rendering/GeomBuilder.ts

@@ -5,9 +5,12 @@
 
 
 import * as THREE from 'three';
+import { mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { CapsuleGeometry } from './CapsuleGeometry';
 import { getName } from '../core/SceneLoader';
-import { MujocoModel, MujocoModule } from '../types';
+import { MujocoModel, MujocoModule, MujocoRenderOptions } from '../types';
+
+const DEFAULT_MESH_NORMAL_SMOOTHING_TOLERANCE = 1e-4;
 
 /**
  * GeomBuilder
@@ -20,9 +23,18 @@ import { MujocoModel, MujocoModule } from '../types';
 export class GeomBuilder {
     private mujoco: MujocoModule; 
     private textureCache = new Map<number, THREE.Texture>();
+    private renderOptions?: MujocoRenderOptions;
 
-    constructor(mujoco: MujocoModule) {
+    constructor(mujoco: MujocoModule, renderOptions?: MujocoRenderOptions) {
         this.mujoco = mujoco;
+        this.renderOptions = renderOptions;
+    }
+
+    private getMeshNormalSmoothingTolerance(): number | null {
+        const smoothing = this.renderOptions?.meshNormalSmoothing;
+        if (!smoothing) return null;
+        if (smoothing === true) return DEFAULT_MESH_NORMAL_SMOOTHING_TOLERANCE;
+        return smoothing.tolerance ?? DEFAULT_MESH_NORMAL_SMOOTHING_TOLERANCE;
     }
 
     private getMaterialTexture(mjModel: MujocoModel, matId: number): THREE.Texture | null {
@@ -148,6 +160,10 @@ export class GeomBuilder {
             geo.setAttribute('position', new THREE.Float32BufferAttribute(mjModel.mesh_vert.subarray(vAdr * 3, (vAdr + vNum) * 3), 3));
             // 'index' = faces (triangles connecting vertices)
             geo.setIndex(Array.from(mjModel.mesh_face.subarray(fAdr * 3, (fAdr + fNum) * 3)));
+            const smoothingTolerance = this.getMeshNormalSmoothingTolerance();
+            if (smoothingTolerance !== null) {
+                geo = mergeVertices(geo, smoothingTolerance);
+            }
             geo.computeVertexNormals(); // Auto-calculate smooth lighting normals
         }
 

package/src/rendering/cameraFrameCapture.ts

@@ -80,6 +80,15 @@ type RendererState = {
   clearColor: THREE.Color;
   clearAlpha: number;
   autoClear: boolean;
+  shadowMapEnabled: boolean;
+  toneMapping: THREE.WebGLRenderer['toneMapping'];
+  outputColorSpace: THREE.WebGLRenderer['outputColorSpace'];
+};
+
+type SceneVisualState = {
+  background: THREE.Scene['background'];
+  environment: THREE.Scene['environment'];
+  fog: THREE.Scene['fog'];
 };
 
 type VisibilityState = {
@@ -89,6 +98,107 @@ type VisibilityState = {
 
 type CameraFrameCapturePreRender = () => void;
 
+const isolatedRendererCache = new WeakMap<
+  THREE.WebGLRenderer,
+  Map<string, THREE.WebGLRenderer>
+>();
+
+function shouldUseRenderIsolation(
+  options: CameraFrameCaptureOptions
+): boolean {
+  return options.renderIsolation === true || (
+    typeof options.renderIsolation === 'object' &&
+    options.renderIsolation.enabled !== false
+  );
+}
+
+function getRenderIsolationOptions(
+  options: CameraFrameCaptureOptions
+) {
+  return typeof options.renderIsolation === 'object'
+    ? options.renderIsolation
+    : {};
+}
+
+function getRenderIsolationCacheKey(
+  width: number,
+  height: number,
+  options: CameraFrameCaptureOptions
+) {
+  const isolation = getRenderIsolationOptions(options);
+  return JSON.stringify({
+    width,
+    height,
+    antialias: isolation.antialias ?? false,
+    alpha: isolation.alpha ?? false,
+    preserveDrawingBuffer: isolation.preserveDrawingBuffer ?? false,
+    powerPreference: isolation.powerPreference ?? null,
+  });
+}
+
+function createIsolatedRenderer(
+  sourceRenderer: THREE.WebGLRenderer,
+  width: number,
+  height: number,
+  options: CameraFrameCaptureOptions
+): { renderer: THREE.WebGLRenderer; cached: boolean } | null {
+  if (!shouldUseRenderIsolation(options)) return null;
+
+  const isolation = getRenderIsolationOptions(options);
+  if (isolation.cache !== false) {
+    const cacheKey = getRenderIsolationCacheKey(width, height, options);
+    let rendererCache = isolatedRendererCache.get(sourceRenderer);
+    if (!rendererCache) {
+      rendererCache = new Map();
+      isolatedRendererCache.set(sourceRenderer, rendererCache);
+    }
+    const cachedRenderer = rendererCache.get(cacheKey);
+    if (cachedRenderer) {
+      cachedRenderer.outputColorSpace = sourceRenderer.outputColorSpace;
+      cachedRenderer.toneMapping = sourceRenderer.toneMapping;
+      cachedRenderer.shadowMap.enabled = false;
+      return { renderer: cachedRenderer, cached: true };
+    }
+    const createdRenderer = createUncachedIsolatedRenderer(
+      sourceRenderer,
+      width,
+      height,
+      options
+    );
+    rendererCache.set(cacheKey, createdRenderer);
+    return { renderer: createdRenderer, cached: true };
+  }
+
+  return {
+    renderer: createUncachedIsolatedRenderer(sourceRenderer, width, height, options),
+    cached: false,
+  };
+}
+
+function createUncachedIsolatedRenderer(
+  sourceRenderer: THREE.WebGLRenderer,
+  width: number,
+  height: number,
+  options: CameraFrameCaptureOptions
+) {
+  const isolation = getRenderIsolationOptions(options);
+  const canvas = document.createElement('canvas');
+  const renderer = new THREE.WebGLRenderer({
+    canvas,
+    antialias: isolation.antialias ?? false,
+    alpha: isolation.alpha ?? false,
+    preserveDrawingBuffer: isolation.preserveDrawingBuffer ?? false,
+    powerPreference: isolation.powerPreference,
+  });
+
+  renderer.setPixelRatio(1);
+  renderer.setSize(width, height, false);
+  renderer.outputColorSpace = sourceRenderer.outputColorSpace;
+  renderer.toneMapping = sourceRenderer.toneMapping;
+  renderer.shadowMap.enabled = false;
+  return renderer;
+}
+
 function toVector3(
   value: CameraFrameCaptureVector3 | undefined,
   fallback: THREE.Vector3
@@ -127,6 +237,19 @@ function applyCameraPose(
   camera.updateMatrixWorld();
 }
 
+function applyProjectionMatrix(
+  camera: THREE.Camera,
+  projectionMatrix: CameraFrameCaptureOptions['projectionMatrix'] | undefined
+) {
+  if (!projectionMatrix) return;
+  if (projectionMatrix instanceof THREE.Matrix4) {
+    camera.projectionMatrix.copy(projectionMatrix);
+  } else {
+    camera.projectionMatrix.fromArray(projectionMatrix);
+  }
+  camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
+}
+
 function createCaptureCamera(
   options: CameraFrameCaptureOptions,
   fallbackCamera: THREE.Camera,
@@ -146,6 +269,7 @@ function createCaptureCamera(
     camera.far = options.far ?? camera.far;
     camera.updateProjectionMatrix();
   }
+  applyProjectionMatrix(camera, options.projectionMatrix);
 
   applyCameraPose(camera, options, fallbackCamera);
   return camera;
@@ -184,6 +308,7 @@ function prepareCaptureCamera(
     camera.far = options.far ?? camera.far;
     camera.updateProjectionMatrix();
   }
+  applyProjectionMatrix(camera, options.projectionMatrix);
 
   applyCameraPose(camera, options, fallbackCamera);
 }
@@ -362,6 +487,9 @@ function saveRendererState(renderer: THREE.WebGLRenderer): RendererState {
     clearColor,
     clearAlpha: renderer.getClearAlpha(),
     autoClear: renderer.autoClear,
+    shadowMapEnabled: renderer.shadowMap.enabled,
+    toneMapping: renderer.toneMapping,
+    outputColorSpace: renderer.outputColorSpace,
   };
 }
 
@@ -376,6 +504,64 @@ function restoreRendererState(
   renderer.setScissorTest(state.scissorTest);
   renderer.setClearColor(state.clearColor, state.clearAlpha);
   renderer.autoClear = state.autoClear;
+  renderer.shadowMap.enabled = state.shadowMapEnabled;
+  renderer.toneMapping = state.toneMapping;
+  renderer.outputColorSpace = state.outputColorSpace;
+}
+
+function saveSceneVisualState(scene: THREE.Scene): SceneVisualState {
+  return {
+    background: scene.background,
+    environment: scene.environment,
+    fog: scene.fog,
+  };
+}
+
+function restoreSceneVisualState(scene: THREE.Scene, state: SceneVisualState) {
+  scene.background = state.background;
+  scene.environment = state.environment;
+  scene.fog = state.fog;
+}
+
+function hasOwn<T extends object>(object: T, key: keyof T) {
+  return Object.prototype.hasOwnProperty.call(object, key);
+}
+
+function applyCaptureVisualOverrides(
+  renderer: THREE.WebGLRenderer,
+  scene: THREE.Scene,
+  options: CameraFrameCaptureOptions
+): SceneVisualState | null {
+  const overrides = options.visualOverrides;
+  if (!overrides) return null;
+
+  const previousSceneState = saveSceneVisualState(scene);
+  if (hasOwn(overrides, 'sceneBackground')) {
+    const background = overrides.sceneBackground;
+    scene.background = background === false ? null : (
+      typeof background === 'string' || typeof background === 'number'
+        ? new THREE.Color(background)
+        : background ?? null
+    );
+  }
+  if (hasOwn(overrides, 'sceneEnvironment')) {
+    const environment = overrides.sceneEnvironment;
+    scene.environment = environment === false ? null : environment ?? null;
+  }
+  if (hasOwn(overrides, 'sceneFog')) {
+    const fog = overrides.sceneFog;
+    scene.fog = fog === false ? null : fog ?? null;
+  }
+  if (overrides.shadows !== undefined) {
+    renderer.shadowMap.enabled = overrides.shadows;
+  }
+  if (overrides.toneMapping !== undefined) {
+    renderer.toneMapping = overrides.toneMapping;
+  }
+  if (overrides.outputColorSpace !== undefined) {
+    renderer.outputColorSpace = overrides.outputColorSpace;
+  }
+  return previousSceneState;
 }
 
 function getCaptureRenderer(
@@ -410,6 +596,8 @@ export function createCameraFrameCaptureSession(
   options: CameraFrameCaptureOptions = {}
 ): CameraFrameCaptureSession {
   const { width, height } = getCaptureDimensions(renderer, options);
+  const isolatedRenderer = createIsolatedRenderer(renderer, width, height, options);
+  const sessionRenderer = isolatedRenderer?.renderer ?? renderer;
   const camera = createCaptureCamera(options, fallbackCamera, width, height);
   const target = new THREE.WebGLRenderTarget(width, height, {
     format: THREE.RGBAFormat,
@@ -430,6 +618,13 @@ export function createCameraFrameCaptureSession(
 
   function resolveCaptureOptions(nextOptions: CameraFrameCaptureOptions = {}) {
     const captureOptions = { ...options, ...nextOptions };
+    if (
+      shouldUseRenderIsolation(captureOptions) !== shouldUseRenderIsolation(options)
+    ) {
+      throw new Error(
+        'Camera frame capture sessions require stable renderIsolation settings.'
+      );
+    }
     const nextDimensions = getCaptureDimensions(renderer, captureOptions);
     if (
       nextDimensions.width !== width ||
@@ -452,7 +647,12 @@ export function createCameraFrameCaptureSession(
   }
 
   function renderPreparedCapture(captureOptions: CameraFrameCaptureOptions) {
-    const previousState = saveRendererState(renderer);
+    const previousState = saveRendererState(sessionRenderer);
+    const previousSceneState = applyCaptureVisualOverrides(
+      sessionRenderer,
+      scene,
+      captureOptions
+    );
     const hidden = [
       ...hideExcludedCaptureObjects(scene),
       ...hideCaptureGeomGroups(scene, captureOptions),
@@ -461,23 +661,23 @@ export function createCameraFrameCaptureSession(
     runCapturePreRenderHooks(scene);
     scene.updateMatrixWorld(true);
     try {
-      renderer.xr.enabled = false;
-      renderer.setRenderTarget(target);
-      renderer.setViewport(0, 0, width, height);
-      renderer.setScissor(0, 0, width, height);
-      renderer.setScissorTest(false);
+      sessionRenderer.xr.enabled = false;
+      sessionRenderer.setRenderTarget(target);
+      sessionRenderer.setViewport(0, 0, width, height);
+      sessionRenderer.setScissor(0, 0, width, height);
+      sessionRenderer.setScissorTest(false);
       if (captureOptions.background !== undefined) {
-        renderer.setClearColor(
+        sessionRenderer.setClearColor(
           new THREE.Color(captureOptions.background),
           captureOptions.backgroundAlpha ?? previousState.clearAlpha
         );
       } else if (captureOptions.backgroundAlpha !== undefined) {
-        renderer.setClearColor(previousState.clearColor, captureOptions.backgroundAlpha);
+        sessionRenderer.setClearColor(previousState.clearColor, captureOptions.backgroundAlpha);
       }
-      renderer.clear();
-      renderer.render(scene, camera);
+      sessionRenderer.clear();
+      sessionRenderer.render(scene, camera);
       readRenderTargetToCanvas(
-        renderer,
+        sessionRenderer,
         target,
         canvas,
         drawContext,
@@ -485,7 +685,7 @@ export function createCameraFrameCaptureSession(
         imageData,
         width,
         height,
-        renderer.outputColorSpace,
+        sessionRenderer.outputColorSpace,
         captureOptions.flipX ?? false
       );
       return {
@@ -497,7 +697,8 @@ export function createCameraFrameCaptureSession(
       };
     } finally {
       restoreObjectVisibility(hidden);
-      restoreRendererState(renderer, previousState);
+      if (previousSceneState) restoreSceneVisualState(scene, previousSceneState);
+      restoreRendererState(sessionRenderer, previousState);
     }
   }
 
@@ -511,23 +712,28 @@ export function createCameraFrameCaptureSession(
     scene.updateMatrixWorld(true);
     const captureRenderer = getCaptureRenderer(scene);
     if (captureRenderer) {
-      const previousState = saveRendererState(renderer);
+      const previousState = saveRendererState(sessionRenderer);
+      const previousSceneState = applyCaptureVisualOverrides(
+        sessionRenderer,
+        scene,
+        captureOptions
+      );
       const hidden = [
         ...hideExcludedCaptureObjects(scene),
         ...hideCaptureGeomGroups(scene, captureOptions),
       ];
       try {
-        renderer.xr.enabled = false;
+        sessionRenderer.xr.enabled = false;
         if (captureOptions.background !== undefined) {
-          renderer.setClearColor(
+          sessionRenderer.setClearColor(
             new THREE.Color(captureOptions.background),
             captureOptions.backgroundAlpha ?? previousState.clearAlpha
           );
         } else if (captureOptions.backgroundAlpha !== undefined) {
-          renderer.setClearColor(previousState.clearColor, captureOptions.backgroundAlpha);
+          sessionRenderer.setClearColor(previousState.clearColor, captureOptions.backgroundAlpha);
         }
         const captureResult = await captureRenderer({
-          renderer,
+          renderer: sessionRenderer,
           scene,
           camera,
           target,
@@ -561,7 +767,8 @@ export function createCameraFrameCaptureSession(
         }
       } finally {
         restoreObjectVisibility(hidden);
-        restoreRendererState(renderer, previousState);
+        if (previousSceneState) restoreSceneVisualState(scene, previousSceneState);
+        restoreRendererState(sessionRenderer, previousState);
       }
     }
     return renderPreparedCapture(captureOptions);
@@ -613,6 +820,9 @@ export function createCameraFrameCaptureSession(
     },
     dispose() {
       target.dispose();
+      if (isolatedRenderer && !isolatedRenderer.cached) {
+        isolatedRenderer.renderer.dispose();
+      }
     },
   };
 }