mujoco-react 10.2.1 → 10.4.0

package/dist/index.js

@@ -1,11 +1,12 @@
-import { withContacts, getContact, captureCameraFrame, captureCameraFrameBlob, createCameraFrameCaptureSession, CAMERA_FRAME_CAPTURE_PRE_RENDER_USER_DATA_KEY, CAPTURE_EXCLUDE_KEY } from './chunk-CYDGWNKQ.js';
-export { CAMERA_FRAME_CAPTURE_PRE_RENDER_USER_DATA_KEY, CAMERA_FRAME_CAPTURE_RENDER_USER_DATA_KEY, CAPTURE_EXCLUDE_KEY, ModelActuators, ModelBodies, ModelCameras, ModelGeoms, ModelJoints, ModelKeyframes, ModelResources, ModelSensors, ModelSites, ScenarioLighting, SplatEnvironment, SplatEnvironmentReadinessStatus, VisualScenarioEffects, captureCameraFrame, captureCameraFrameBlob, createCameraFrameCaptureSession, createPairedSplatEnvironment, createSparkSplatViewerUrl, createSplatEnvironmentUserData, createSplatSceneConfig, createVisualScenarioExecutionContext, getContact, getScenarioBackground, getScenarioCameraPosition, getSplatEnvironmentReadiness, registerModelResources, renderCameraFrameToCanvas, useSplatEnvironment, useSplatSceneConfig, useVisualScenarioEffects, useVisualScenarioExecutionContext, withSplatEnvironment } from './chunk-CYDGWNKQ.js';
+import { withContacts, getContact, captureCameraFrame, captureCameraFrameBlob, createCameraFrameCaptureSession, CAMERA_FRAME_CAPTURE_PRE_RENDER_USER_DATA_KEY, CAPTURE_EXCLUDE_KEY } from './chunk-FBXXXPLQ.js';
+export { CAMERA_FRAME_CAPTURE_PRE_RENDER_USER_DATA_KEY, CAMERA_FRAME_CAPTURE_RENDER_USER_DATA_KEY, CAPTURE_EXCLUDE_KEY, ModelActuators, ModelBodies, ModelCameras, ModelGeoms, ModelJoints, ModelKeyframes, ModelResources, ModelSensors, ModelSites, ScenarioLighting, SplatEnvironment, SplatEnvironmentReadinessStatus, VisualScenarioEffects, captureCameraFrame, captureCameraFrameBlob, createCameraFrameCaptureSession, createPairedSplatEnvironment, createSparkSplatViewerUrl, createSplatEnvironmentUserData, createSplatSceneConfig, createVisualScenarioExecutionContext, getContact, getScenarioBackground, getScenarioCameraPosition, getSplatEnvironmentReadiness, registerModelResources, renderCameraFrameToCanvas, useSplatEnvironment, useSplatSceneConfig, useVisualScenarioEffects, useVisualScenarioExecutionContext, withSplatEnvironment } from './chunk-FBXXXPLQ.js';
 import loadMujoco from '@mujoco/mujoco';
 import defaultMujocoWasmUrl from '@mujoco/mujoco/mujoco.wasm?url';
-import { createContext, forwardRef, useEffect, useContext, useState, useRef, useCallback, useMemo, useLayoutEffect } from 'react';
+import { createContext, forwardRef, useRef, useEffect, useContext, useState, useCallback, useMemo, useLayoutEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Canvas, useThree, useFrame } from '@react-three/fiber';
 import * as THREE11 from 'three';
+import { mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { PivotControls } from '@react-three/drei';
 
 var MujocoContext = createContext({
@@ -43,6 +44,8 @@ function MujocoProvider({
   const [error, setError] = useState(null);
   const moduleRef = useRef(null);
   const isMounted = useRef(true);
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
   useEffect(() => {
     isMounted.current = true;
     const variant = resolveWasmVariant(wasmVariant, threadedLoader, mtWasmUrl);
@@ -50,7 +53,7 @@ function MujocoProvider({
       const err = new Error('MujocoProvider wasmVariant="threaded" requires a threadedLoader from @mujoco/mujoco/mt');
       setError(err.message);
       setStatus("error");
-      onError?.(err);
+      onErrorRef.current?.(err);
       return;
     }
     let selectedWasmUrl = wasmUrl ?? defaultMujocoWasmUrl;
@@ -59,7 +62,7 @@ function MujocoProvider({
         const err = new Error('MujocoProvider wasmVariant="threaded" requires mtWasmUrl from @mujoco/mujoco/mt/mujoco.wasm?url');
         setError(err.message);
         setStatus("error");
-        onError?.(err);
+        onErrorRef.current?.(err);
         return;
       }
       selectedWasmUrl = mtWasmUrl;
@@ -90,13 +93,13 @@ function MujocoProvider({
         const msg = err.message || "Failed to init spatial simulation";
         setError(msg);
         setStatus("error");
-        onError?.(new Error(msg));
+        onErrorRef.current?.(new Error(msg));
       }
     });
     return () => {
       isMounted.current = false;
     };
-  }, [wasmUrl, mtWasmUrl, threadedLoader, wasmVariant, timeout, onError]);
+  }, [wasmUrl, mtWasmUrl, threadedLoader, wasmVariant, timeout]);
   return /* @__PURE__ */ jsx(
     MujocoContext.Provider,
     {
@@ -891,11 +894,20 @@ function collectDependencyPaths(xmlString, currentFile, parser) {
 }
 
 // src/rendering/GeomBuilder.ts
+var DEFAULT_MESH_NORMAL_SMOOTHING_TOLERANCE = 1e-4;
 var GeomBuilder = class {
   mujoco;
   textureCache = /* @__PURE__ */ new Map();
-  constructor(mujoco) {
+  renderOptions;
+  constructor(mujoco, renderOptions) {
     this.mujoco = mujoco;
+    this.renderOptions = renderOptions;
+  }
+  getMeshNormalSmoothingTolerance() {
+    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;
   }
   getMaterialTexture(mjModel, matId) {
     if (matId < 0 || !mjModel.mat_texid || !mjModel.tex_data) return null;
@@ -990,6 +1002,10 @@ var GeomBuilder = class {
       geo = new THREE11.BufferGeometry();
       geo.setAttribute("position", new THREE11.Float32BufferAttribute(mjModel.mesh_vert.subarray(vAdr * 3, (vAdr + vNum) * 3), 3));
       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();
     }
     if (geo) {
@@ -1020,7 +1036,13 @@ var GeomBuilder = class {
     return null;
   }
 };
-function SceneRenderer(props) {
+function getRenderOptionsKey(renderOptions) {
+  const smoothing = renderOptions?.meshNormalSmoothing;
+  if (!smoothing) return "default";
+  if (smoothing === true) return "meshNormalSmoothing:true";
+  return `meshNormalSmoothing:${smoothing.tolerance ?? "default"}`;
+}
+function SceneRenderer({ renderOptions, ...props }) {
   const {
     mjModelRef,
     mjDataRef,
@@ -1034,17 +1056,22 @@ function SceneRenderer(props) {
   const groupRef = useRef(null);
   const bodyRefs = useRef([]);
   const prevModelRef = useRef(null);
+  const prevRenderOptionsKeyRef = useRef(null);
+  const renderOptionsKey = getRenderOptionsKey(renderOptions);
   const geomBuilder = useMemo(() => {
     if (status !== "ready") return null;
-    return new GeomBuilder(mujocoRef.current);
-  }, [status, mujocoRef]);
+    return new GeomBuilder(mujocoRef.current, renderOptions);
+  }, [status, mujocoRef, renderOptionsKey]);
   useEffect(() => {
     if (status !== "ready" || !geomBuilder) return;
     const model = mjModelRef.current;
     const group = groupRef.current;
     if (!model || !group) return;
-    if (prevModelRef.current === model) return;
+    if (prevModelRef.current === model && prevRenderOptionsKeyRef.current === renderOptionsKey) {
+      return;
+    }
     prevModelRef.current = model;
+    prevRenderOptionsKeyRef.current = renderOptionsKey;
     while (group.children.length > 0) {
       group.remove(group.children[0]);
     }
@@ -1065,7 +1092,7 @@ function SceneRenderer(props) {
       refs.push(bodyGroup);
     }
     bodyRefs.current = refs;
-  }, [status, geomBuilder, mjModelRef]);
+  }, [status, geomBuilder, mjModelRef, renderOptionsKey]);
   const syncBodiesToData = useCallback(() => {
     const data = mjDataRef.current;
     if (!data) return;
@@ -1930,6 +1957,106 @@ function applyMountedCameraPoseOffsets(options, position, quaternion) {
     ]
   };
 }
+function resolveMujocoCameraCompatibilityOptions(options) {
+  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) {
+  const map = model.vis?.map;
+  const near = typeof map?.znear === "number" && map.znear > 0 ? map.znear : void 0;
+  const far = typeof map?.zfar === "number" && map.zfar > 0 ? map.zfar : void 0;
+  return { near, far };
+}
+function mujocoCameraResolution(model, cameraId) {
+  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 : void 0,
+    height: Number.isFinite(height) && height > 0 ? height : void 0
+  };
+}
+function mujocoCameraProjectionMatrix(model, cameraId, width, height, near, far) {
+  const intrinsic = model.cam_intrinsic;
+  const sensorSize = model.cam_sensorsize;
+  if (!intrinsic || !sensorSize || !width || !height) return void 0;
+  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 void 0;
+  }
+  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 THREE11.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, cameraResolution, compatibility) {
+  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 !== void 0 && requested.height === void 0) {
+      height = requested.width * cameraResolution.height / cameraResolution.width;
+    } else if (requested.height !== void 0 && requested.width === void 0) {
+      width = requested.height * cameraResolution.width / cameraResolution.height;
+    }
+  }
+  return { width, height };
+}
 function countMountedCameraSelectors(options) {
   return Number(Boolean(options.cameraName)) + Number(Boolean(options.siteName)) + Number(Boolean(options.bodyName));
 }
@@ -2033,6 +2160,7 @@ function MujocoSimProvider({
   paused,
   speed,
   interpolate,
+  renderOptions,
   children
 }) {
   const { gl, camera, scene } = useThree();
@@ -2067,24 +2195,12 @@ function MujocoSimProvider({
   const bodyRegistryRef = useRef(/* @__PURE__ */ new Map());
   const hiddenBodiesRef = useRef(/* @__PURE__ */ new Set());
   const bodyReloadTimerRef = useRef(null);
-  useEffect(() => {
-    configRef.current = config;
-  }, [config]);
-  useEffect(() => {
-    mujocoRef.current = mujoco;
-  }, [mujoco]);
-  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;
   useEffect(() => {
     if (!gravity) return;
     const model = mjModelRef.current;
@@ -2590,11 +2706,27 @@ 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,
         quaternion: model.cam_quat ? quaternionFromMujocoQuat(model.cam_quat, quatOffset) : null
       });
@@ -2622,10 +2754,22 @@ function MujocoSimProvider({
           );
         }
         const pose = applyMountedCameraPoseOffsets(options, position, quaternion);
+        const compatibility = resolveMujocoCameraCompatibilityOptions(options);
+        const cameraResolution = compatibility?.useResolution ? mujocoCameraResolution(model, cameraId) : { width: void 0, height: void 0 };
+        const clip = compatibility?.useClipping ? mujocoVisualClip(model) : { near: void 0, far: void 0 };
+        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) : void 0;
         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 }
         };
       }
@@ -3271,7 +3415,7 @@ function MujocoSimProvider({
     [api, status, requestBodyReload]
   );
   return /* @__PURE__ */ jsxs(MujocoSimContext.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ jsx(SceneRenderer, {}),
+    /* @__PURE__ */ jsx(SceneRenderer, { renderOptions }),
     children
   ] });
 }
@@ -3289,16 +3433,19 @@ var MujocoCanvas = forwardRef(
     paused,
     speed,
     interpolate,
+    renderOptions,
     loadingFallback,
     children,
     ...canvasProps
   }, ref) {
     const { mujoco, status: wasmStatus, error: wasmError } = useMujocoWasm();
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
     useEffect(() => {
-      if (wasmStatus === "error" && onError) {
-        onError(new Error(wasmError ?? "WASM load failed"));
+      if (wasmStatus === "error") {
+        onErrorRef.current?.(new Error(wasmError ?? "WASM load failed"));
       }
-    }, [wasmStatus, wasmError, onError]);
+    }, [wasmStatus, wasmError]);
     if (wasmStatus === "loading" || !mujoco) {
       return loadingFallback ? /* @__PURE__ */ jsx(Canvas, { ...canvasProps, children: loadingFallback }) : null;
     }
@@ -3321,6 +3468,7 @@ var MujocoCanvas = forwardRef(
         paused,
         speed,
         interpolate,
+        renderOptions,
         children
       }
     ) });
@@ -3329,11 +3477,13 @@ var MujocoCanvas = forwardRef(
 var MujocoPhysics = forwardRef(
   function MujocoPhysics2({ onError, children, ...props }, ref) {
     const { mujoco, status: wasmStatus, error: wasmError } = useMujocoWasm();
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
     useEffect(() => {
-      if (wasmStatus === "error" && onError) {
-        onError(new Error(wasmError ?? "WASM load failed"));
+      if (wasmStatus === "error") {
+        onErrorRef.current?.(new Error(wasmError ?? "WASM load failed"));
       }
-    }, [wasmStatus, wasmError, onError]);
+    }, [wasmStatus, wasmError]);
     if (wasmStatus === "error" || wasmStatus === "loading" || !mujoco) {
       return null;
     }
@@ -4717,11 +4867,161 @@ var _contactNormal = new THREE11.Vector3();
 var MAX_CONTACT_ARROWS = 50;
 var CAMERA_DEBUG_LENGTH = 0.12;
 var CAMERA_DEBUG_FRUSTUM_DEPTH = 0.08;
+function toVector32(value, fallback) {
+  if (!value) return fallback.clone();
+  return value instanceof THREE11.Vector3 ? value.clone() : new THREE11.Vector3(value[0], value[1], value[2]);
+}
+function createCameraLabel(text, color) {
+  const canvas = document.createElement("canvas");
+  canvas.width = 256;
+  canvas.height = 64;
+  const ctx = canvas.getContext("2d");
+  ctx.fillStyle = new THREE11.Color(color).getStyle();
+  ctx.font = "bold 32px monospace";
+  ctx.textAlign = "center";
+  ctx.fillText(text, 128, 42);
+  const texture = new THREE11.CanvasTexture(canvas);
+  const sprite = new THREE11.Sprite(
+    new THREE11.SpriteMaterial({
+      map: texture,
+      depthTest: false,
+      transparent: true
+    })
+  );
+  sprite.position.set(0, 0.014, 0.01);
+  sprite.scale.set(0.05, 0.012, 1);
+  sprite.renderOrder = 999;
+  return sprite;
+}
+function createVirtualCameraDebugObject(camera, index) {
+  const color = camera.color ?? "#ff3d71";
+  const aimColor = camera.aimColor ?? "#38bdf8";
+  const markerScale = camera.markerScale ?? 1;
+  const cameraPosition = toVector32(camera.position, new THREE11.Vector3());
+  const configuredUp = toVector32(camera.up, new THREE11.Vector3(0, 0, 1)).normalize();
+  const cameraQuaternion = new THREE11.Quaternion();
+  const forward = new THREE11.Vector3();
+  if (camera.quaternion) {
+    if (camera.quaternion instanceof THREE11.Quaternion) {
+      cameraQuaternion.copy(camera.quaternion);
+    } else {
+      cameraQuaternion.set(
+        camera.quaternion[0],
+        camera.quaternion[1],
+        camera.quaternion[2],
+        camera.quaternion[3]
+      );
+    }
+    forward.set(0, 0, -1).applyQuaternion(cameraQuaternion).normalize();
+  } else {
+    const target2 = toVector32(
+      camera.lookAt,
+      cameraPosition.clone().add(new THREE11.Vector3(0, 0, -1))
+    );
+    forward.copy(target2).sub(cameraPosition);
+    if (forward.lengthSq() < 1e-8) forward.set(0, 0, -1);
+    forward.normalize();
+    cameraQuaternion.setFromRotationMatrix(
+      new THREE11.Matrix4().lookAt(cameraPosition, target2, configuredUp)
+    );
+  }
+  const target = camera.lookAt ? toVector32(camera.lookAt, cameraPosition.clone().add(forward)) : cameraPosition.clone().addScaledVector(forward, 0.4);
+  const distanceToTarget = Math.max(target.distanceTo(cameraPosition), 1e-3);
+  const depth = camera.frustumDepth ?? Math.min(Math.max(distanceToTarget * 0.42, 0.16), 0.45);
+  const fov = camera.fov ?? 50;
+  const aspect = (camera.width ?? 640) / (camera.height ?? 480);
+  const right = forward.clone().cross(configuredUp);
+  if (right.lengthSq() < 1e-8) right.set(1, 0, 0);
+  right.normalize();
+  const orthogonalUp = right.clone().cross(forward).normalize();
+  const frustumHeight = 2 * Math.tan(THREE11.MathUtils.degToRad(fov) / 2) * depth;
+  const frustumWidth = frustumHeight * aspect;
+  const center = cameraPosition.clone().addScaledVector(forward, depth);
+  const halfRight = right.clone().multiplyScalar(frustumWidth / 2);
+  const halfUp = orthogonalUp.clone().multiplyScalar(frustumHeight / 2);
+  const topLeft = center.clone().sub(halfRight).add(halfUp);
+  const topRight = center.clone().add(halfRight).add(halfUp);
+  const bottomRight = center.clone().add(halfRight).sub(halfUp);
+  const bottomLeft = center.clone().sub(halfRight).sub(halfUp);
+  const frustumPoints = [
+    cameraPosition,
+    topLeft,
+    cameraPosition,
+    topRight,
+    cameraPosition,
+    bottomRight,
+    cameraPosition,
+    bottomLeft,
+    topLeft,
+    topRight,
+    topRight,
+    bottomRight,
+    bottomRight,
+    bottomLeft,
+    bottomLeft,
+    topLeft
+  ];
+  const group = new THREE11.Group();
+  group.name = camera.name ?? `virtual-camera-${index}`;
+  group.renderOrder = 999;
+  group.frustumCulled = false;
+  const frustum = new THREE11.LineSegments(
+    new THREE11.BufferGeometry().setFromPoints(frustumPoints),
+    new THREE11.LineBasicMaterial({
+      color,
+      transparent: true,
+      opacity: 0.9,
+      depthTest: false
+    })
+  );
+  frustum.renderOrder = 999;
+  frustum.frustumCulled = false;
+  group.add(frustum);
+  const aim = new THREE11.LineSegments(
+    new THREE11.BufferGeometry().setFromPoints([cameraPosition, target]),
+    new THREE11.LineBasicMaterial({
+      color: aimColor,
+      transparent: true,
+      opacity: 0.95,
+      depthTest: false
+    })
+  );
+  aim.renderOrder = 999;
+  aim.frustumCulled = false;
+  group.add(aim);
+  const markerGroup = new THREE11.Group();
+  markerGroup.position.copy(cameraPosition);
+  markerGroup.quaternion.copy(cameraQuaternion);
+  markerGroup.renderOrder = 999;
+  markerGroup.frustumCulled = false;
+  markerGroup.add(new THREE11.Mesh(
+    new THREE11.BoxGeometry(0.045 * markerScale, 0.028 * markerScale, 0.022 * markerScale),
+    new THREE11.MeshBasicMaterial({ color, depthTest: false })
+  ));
+  const lens = new THREE11.Mesh(
+    new THREE11.BoxGeometry(0.025 * markerScale, 0.018 * markerScale, 0.014 * markerScale),
+    new THREE11.MeshBasicMaterial({ color: aimColor, depthTest: false })
+  );
+  lens.position.set(0, 0, -0.021 * markerScale);
+  markerGroup.add(lens);
+  if (camera.name) markerGroup.add(createCameraLabel(camera.name, color));
+  group.add(markerGroup);
+  const targetMarker = new THREE11.Mesh(
+    new THREE11.SphereGeometry(0.018 * markerScale, 16, 10),
+    new THREE11.MeshBasicMaterial({ color: aimColor, depthTest: false })
+  );
+  targetMarker.position.copy(target);
+  targetMarker.renderOrder = 999;
+  targetMarker.frustumCulled = false;
+  group.add(targetMarker);
+  return group;
+}
 function Debug({
   showGeoms = false,
   showSites = false,
   showJoints = false,
   showCameras = false,
+  virtualCameras = [],
   showContacts = false,
   showCOM = false,
   showInertia = false,
@@ -4738,6 +5038,7 @@ function Debug({
     const sites = [];
     const joints = [];
     const cameras = [];
+    const virtualCameraObjects = [];
     const comMarkers = [];
     if (showGeoms) {
       for (let i = 0; i < model.ngeom; i++) {
@@ -4916,6 +5217,9 @@ function Debug({
         cameras.push(group);
       }
     }
+    for (let i = 0; i < virtualCameras.length; i += 1) {
+      virtualCameraObjects.push(createVirtualCameraDebugObject(virtualCameras[i], i));
+    }
     if (showCOM) {
       for (let i = 1; i < model.nbody; i++) {
         const geometry = new THREE11.SphereGeometry(5e-3, 6, 6);
@@ -4925,8 +5229,8 @@ function Debug({
         comMarkers.push(mesh);
       }
     }
-    return { geoms, sites, joints, cameras, comMarkers };
-  }, [status, mjModelRef, showGeoms, showSites, showJoints, showCameras, showCOM]);
+    return { geoms, sites, joints, cameras, virtualCameraObjects, comMarkers };
+  }, [status, mjModelRef, showGeoms, showSites, showJoints, showCameras, virtualCameras, showCOM]);
   useEffect(() => {
     const group = groupRef.current;
     if (!group || !debugGeometry) return;
@@ -4935,6 +5239,7 @@ function Debug({
       ...debugGeometry.sites,
       ...debugGeometry.joints,
       ...debugGeometry.cameras,
+      ...debugGeometry.virtualCameraObjects,
       ...debugGeometry.comMarkers
     ];
     for (const obj of allObjects) group.add(obj);