@zylem/game-lib 0.6.3 → 0.6.4

package/dist/camera.js

@@ -1,8 +1,8 @@
 // src/lib/camera/camera.ts
-import { Vector2 as Vector24, Vector3 as Vector34 } from "three";
+import { Vector2 as Vector23, Vector3 as Vector37 } from "three";
 
 // src/lib/camera/zylem-camera.ts
-import { PerspectiveCamera as PerspectiveCamera2, Vector3 as Vector33, Object3D as Object3D2, OrthographicCamera } from "three";
+import { PerspectiveCamera as PerspectiveCamera2, Vector3 as Vector36, OrthographicCamera, WebGLRenderTarget as WebGLRenderTarget2, LinearFilter } from "three";
 
 // src/lib/camera/perspective.ts
 var Perspectives = {
@@ -10,145 +10,12 @@ var Perspectives = {
   ThirdPerson: "third-person",
   Isometric: "isometric",
   Flat2D: "flat-2d",
-  Fixed2D: "fixed-2d"
-};
-
-// src/lib/camera/third-person.ts
-import { Vector3 } from "three";
-var ThirdPersonCamera = class {
-  distance;
-  screenResolution = null;
-  renderer = null;
-  scene = null;
-  cameraRef = null;
-  /** Padding multiplier when framing multiple targets. Higher = more zoom out. */
-  paddingFactor = 1.5;
-  /** Minimum camera distance when multi-framing (prevents extreme zoom-in). */
-  minDistance = 5;
-  /** Lerp factor for camera position smoothing. */
-  lerpFactor = 0.1;
-  constructor() {
-    this.distance = new Vector3(0, 5, 8);
-  }
-  /**
-   * Setup the third person camera controller
-   */
-  setup(params) {
-    const { screenResolution, renderer, scene, camera } = params;
-    this.screenResolution = screenResolution;
-    this.renderer = renderer;
-    this.scene = scene;
-    this.cameraRef = camera;
-  }
-  /**
-   * Update the third person camera.
-   * Handles 0, 1, and multi-target scenarios.
-   */
-  update(delta) {
-    if (!this.cameraRef) return;
-    const targets = this.cameraRef.targets;
-    if (targets.length === 0) {
-      this.cameraRef.camera.lookAt(new Vector3(0, 0, 0));
-      return;
-    }
-    if (targets.length === 1) {
-      this.updateSingleTarget(targets[0]);
-      return;
-    }
-    this.updateMultiTarget(targets);
-  }
-  /**
-   * Classic single-target follow: lerp to target position + offset, lookAt target.
-   */
-  updateSingleTarget(target) {
-    const useTarget = target.group?.position || new Vector3(0, 0, 0);
-    const desiredCameraPosition = useTarget.clone().add(this.distance);
-    this.cameraRef.camera.position.lerp(desiredCameraPosition, this.lerpFactor);
-    this.cameraRef.camera.lookAt(useTarget);
-  }
-  /**
-   * Multi-target framing: compute centroid, measure spread, zoom out to fit all.
-   */
-  updateMultiTarget(targets) {
-    const centroid = new Vector3();
-    for (const t of targets) {
-      centroid.add(t.group.position);
-    }
-    centroid.divideScalar(targets.length);
-    let maxDistFromCentroid = 0;
-    for (const t of targets) {
-      const dist = centroid.distanceTo(t.group.position);
-      if (dist > maxDistFromCentroid) {
-        maxDistFromCentroid = dist;
-      }
-    }
-    const dynamicDistance = Math.max(maxDistFromCentroid * this.paddingFactor, this.minDistance);
-    const offsetDirection = this.distance.clone().normalize();
-    const desiredCameraPosition = centroid.clone().add(
-      offsetDirection.multiplyScalar(dynamicDistance)
-    );
-    const baseLen = this.distance.length();
-    if (baseLen > 0) {
-      const heightRatio = this.distance.y / baseLen;
-      desiredCameraPosition.y = centroid.y + dynamicDistance * heightRatio;
-    }
-    this.cameraRef.camera.position.lerp(desiredCameraPosition, this.lerpFactor);
-    this.cameraRef.camera.lookAt(centroid);
-  }
-  /**
-   * Handle resize events
-   */
-  resize(width, height) {
-    if (this.screenResolution) {
-      this.screenResolution.set(width, height);
-    }
-  }
-  /**
-   * Set the distance offset from the target
-   */
-  setDistance(distance) {
-    this.distance = distance;
-  }
-};
-
-// src/lib/camera/fixed-2d.ts
-var Fixed2DCamera = class {
-  screenResolution = null;
-  renderer = null;
-  scene = null;
-  cameraRef = null;
-  constructor() {
-  }
-  /**
-   * Setup the fixed 2D camera controller
-   */
-  setup(params) {
-    const { screenResolution, renderer, scene, camera } = params;
-    this.screenResolution = screenResolution;
-    this.renderer = renderer;
-    this.scene = scene;
-    this.cameraRef = camera;
-    this.cameraRef.camera.position.set(0, 0, 10);
-    this.cameraRef.camera.lookAt(0, 0, 0);
-  }
-  /**
-   * Update the fixed 2D camera
-   * Fixed cameras don't need to update position/rotation automatically
-   */
-  update(delta) {
-  }
-  /**
-   * Handle resize events for 2D camera
-   */
-  resize(width, height) {
-    if (this.screenResolution) {
-      this.screenResolution.set(width, height);
-    }
-  }
+  Fixed2D: "fixed-2d",
+  TopDown: "top-down"
 };
 
 // src/lib/camera/camera-debug-delegate.ts
-import { Vector3 as Vector32 } from "three";
+import { Vector3 } from "three";
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 var CameraOrbitController = class {
   camera;
@@ -157,7 +24,7 @@ var CameraOrbitController = class {
   sceneRef = null;
   orbitControls = null;
   orbitTarget = null;
-  orbitTargetWorldPos = new Vector32();
+  orbitTargetWorldPos = new Vector3();
   debugDelegate = null;
   debugUnsubscribe = null;
   debugStateSnapshot = { enabled: false, selected: [] };
@@ -404,7 +271,7 @@ var CameraOrbitController = class {
       return;
     }
     this.savedCameraLocalPosition = this.camera.position.clone();
-    const worldPos = new Vector32();
+    const worldPos = new Vector3();
     this.camera.getWorldPosition(worldPos);
     this.cameraRig.remove(this.camera);
     if (this.sceneRef) {
@@ -432,7 +299,7 @@ var CameraOrbitController = class {
 };
 
 // src/lib/camera/renderer-manager.ts
-import { Vector2 as Vector22, WebGLRenderer as WebGLRenderer2 } from "three";
+import { Vector2, WebGLRenderer as WebGLRenderer2 } from "three";
 import { WebGPURenderer } from "three/webgpu";
 import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
 
@@ -564,8 +431,9 @@ var RendererManager = class {
   _isWebGPU = false;
   _initialized = false;
   _sceneRef = null;
+  _lastAnimationTimestamp = null;
   constructor(screenResolution, rendererType = "webgl") {
-    this.screenResolution = screenResolution || new Vector22(window.innerWidth, window.innerHeight);
+    this.screenResolution = screenResolution || new Vector2(window.innerWidth, window.innerHeight);
     this.rendererType = rendererType;
   }
   /**
@@ -647,14 +515,18 @@ var RendererManager = class {
    * Start the render loop. Calls the provided callback each frame.
    */
   startRenderLoop(onFrame) {
-    this.renderer.setAnimationLoop((delta) => {
-      onFrame(delta || 0);
+    this._lastAnimationTimestamp = null;
+    this.renderer.setAnimationLoop((timestamp) => {
+      const deltaSeconds = this._lastAnimationTimestamp === null ? 0 : Math.max(0, (timestamp - this._lastAnimationTimestamp) / 1e3);
+      this._lastAnimationTimestamp = timestamp;
+      onFrame(deltaSeconds);
     });
   }
   /**
    * Stop the render loop.
    */
   stopRenderLoop() {
+    this._lastAnimationTimestamp = null;
     try {
       this.renderer.setAnimationLoop(null);
     } catch {
@@ -683,6 +555,25 @@ var RendererManager = class {
       this.composer.render(0);
     }
   }
+  /**
+   * Render a camera to its offscreen render target (WebGL only).
+   * Bypasses the EffectComposer since post-processing is not needed
+   * for render-to-texture output.
+   *
+   * The camera must have a non-null renderTarget.
+   */
+  renderCameraToTarget(scene, camera) {
+    if (!camera.renderTarget) return;
+    if (this.renderer instanceof WebGLRenderer2) {
+      const prevTarget = this.renderer.getRenderTarget();
+      this.renderer.setRenderTarget(camera.renderTarget);
+      this.renderer.clear();
+      this.renderer.render(scene, camera.camera);
+      this.renderer.setRenderTarget(prevTarget);
+    } else {
+      console.warn("RendererManager: Render-to-texture is not yet supported for WebGPU");
+    }
+  }
   /**
    * Render a scene from multiple cameras, each with their own viewport.
    * Cameras are rendered in order (first = bottom layer, last = top layer).
@@ -753,8 +644,540 @@ var RendererManager = class {
   }
 };
 
+// src/lib/camera/smoothing.ts
+import { Vector3 as Vector32, Quaternion as Quaternion2, MathUtils } from "three";
+function defaultPose() {
+  return {
+    position: new Vector32(0, 0, 10),
+    rotation: new Quaternion2(),
+    fov: 75,
+    zoom: 1,
+    near: 0.1,
+    far: 1e3
+  };
+}
+function clonePose(pose) {
+  return {
+    position: pose.position.clone(),
+    rotation: pose.rotation.clone(),
+    fov: pose.fov,
+    zoom: pose.zoom,
+    near: pose.near,
+    far: pose.far,
+    lookAt: pose.lookAt?.clone()
+  };
+}
+function applyDelta(pose, delta) {
+  const result = clonePose(pose);
+  if (delta.position) {
+    result.position.add(delta.position);
+  }
+  if (delta.rotation) {
+    result.rotation.multiply(delta.rotation);
+  }
+  if (delta.fov != null && result.fov != null) {
+    result.fov += delta.fov;
+  }
+  if (delta.zoom != null && result.zoom != null) {
+    result.zoom += delta.zoom;
+  }
+  return result;
+}
+function smoothPose(current, target, damping, dt) {
+  const t = 1 - Math.pow(1 - MathUtils.clamp(damping, 0, 1), dt * 60);
+  const result = clonePose(current);
+  result.position.lerp(target.position, t);
+  result.rotation.slerp(target.rotation, t);
+  if (target.fov != null && result.fov != null) {
+    result.fov = MathUtils.lerp(result.fov, target.fov, t);
+  }
+  if (target.zoom != null && result.zoom != null) {
+    result.zoom = MathUtils.lerp(result.zoom, target.zoom, t);
+  }
+  if (target.near != null) {
+    result.near = target.near;
+  }
+  if (target.far != null) {
+    result.far = target.far;
+  }
+  result.lookAt = target.lookAt?.clone();
+  return result;
+}
+
+// src/lib/camera/camera-pipeline.ts
+var CameraPipeline = class {
+  /** Active perspective (exactly one at a time). */
+  perspective = null;
+  /** Keyed behaviors, sorted by priority each frame. */
+  behaviors = /* @__PURE__ */ new Map();
+  /** Active transient actions. Expired actions are auto-removed. */
+  actions = [];
+  /** The desired pose after perspective + behaviors + actions. */
+  _desiredPose = defaultPose();
+  /** The smoothed final pose committed to the Three.js camera. */
+  _finalPose = defaultPose();
+  /** Whether the pipeline has run at least once (prevents lerp from origin on first frame). */
+  _initialized = false;
+  /** Smoothing factor: 0 = no movement, 1 = instant snap. */
+  damping = 0.15;
+  constructor(perspective) {
+    if (perspective) {
+      this.perspective = perspective;
+      if (perspective.defaults?.damping != null) {
+        this.damping = perspective.defaults.damping;
+      }
+    }
+  }
+  /**
+   * Run the full pipeline for one frame.
+   * Returns the final pose that should be committed to the Three.js camera.
+   */
+  run(ctx) {
+    let pose = this.perspective ? this.perspective.getBasePose(ctx) : defaultPose();
+    const sorted = this.getSortedBehaviors();
+    for (const behavior of sorted) {
+      if (behavior.enabled === false) continue;
+      pose = behavior.update(ctx, pose);
+    }
+    this._desiredPose = clonePose(pose);
+    for (let i = this.actions.length - 1; i >= 0; i--) {
+      const action = this.actions[i];
+      const delta = action.update(ctx);
+      pose = applyDelta(pose, delta);
+      if (action.isDone(ctx)) {
+        this.actions.splice(i, 1);
+      }
+    }
+    if (!this._initialized) {
+      this._finalPose = clonePose(pose);
+      this._initialized = true;
+    } else {
+      this._finalPose = smoothPose(this._finalPose, pose, this.damping, ctx.dt);
+    }
+    return this._finalPose;
+  }
+  // ─── Behavior management ───────────────────────────────────────────────
+  /**
+   * Add or replace a behavior by key (idempotent).
+   * Calls onDetach on the old behavior and onAttach on the new one.
+   */
+  addBehavior(key, behavior, ctx) {
+    const existing = this.behaviors.get(key);
+    if (existing?.onDetach && ctx) {
+      existing.onDetach(ctx);
+    }
+    this.behaviors.set(key, behavior);
+    if (behavior.onAttach && ctx) {
+      behavior.onAttach(ctx);
+    }
+  }
+  /**
+   * Remove a behavior by key. Calls onDetach if a context is provided.
+   */
+  removeBehavior(key, ctx) {
+    const existing = this.behaviors.get(key);
+    if (!existing) return false;
+    if (existing.onDetach && ctx) {
+      existing.onDetach(ctx);
+    }
+    return this.behaviors.delete(key);
+  }
+  /**
+   * Check whether a behavior with the given key exists.
+   */
+  hasBehavior(key) {
+    return this.behaviors.has(key);
+  }
+  // ─── Action management ─────────────────────────────────────────────────
+  /**
+   * Add a transient action. Actions self-expire via isDone().
+   */
+  addAction(action) {
+    this.actions.push(action);
+  }
+  // ─── State inspection ──────────────────────────────────────────────────
+  /**
+   * Return a debug snapshot of the pipeline state.
+   */
+  getState() {
+    return {
+      perspectiveId: this.perspective?.id ?? null,
+      desiredPose: this._desiredPose ? clonePose(this._desiredPose) : null,
+      finalPose: this._finalPose ? clonePose(this._finalPose) : null,
+      activeBehaviors: Array.from(this.behaviors.keys()),
+      activeActionCount: this.actions.length
+    };
+  }
+  /**
+   * Set a new perspective. Resets the pipeline initialization flag so the
+   * first frame with the new perspective snaps instead of lerping from the old pose.
+   */
+  setPerspective(perspective) {
+    this.perspective = perspective;
+    this._initialized = false;
+    if (perspective.defaults?.damping != null) {
+      this.damping = perspective.defaults.damping;
+    }
+  }
+  // ─── Internal helpers ──────────────────────────────────────────────────
+  getSortedBehaviors() {
+    return Array.from(this.behaviors.values()).sort(
+      (a, b) => (a.priority ?? 0) - (b.priority ?? 0)
+    );
+  }
+};
+
+// src/lib/camera/perspectives/third-person-perspective.ts
+import { Vector3 as Vector33, Quaternion as Quaternion3 } from "three";
+var DEFAULTS = {
+  distance: 8,
+  height: 5,
+  shoulderOffset: 0,
+  targetKey: "primary",
+  fov: 75,
+  paddingFactor: 1.5,
+  minDistance: 5
+};
+var ThirdPersonPerspective = class {
+  id = "third-person";
+  defaults = { damping: 0.15 };
+  opts;
+  initialPosition;
+  initialLookAt;
+  constructor(options) {
+    const { initialPosition, initialLookAt, ...rest } = options ?? {};
+    this.opts = { ...DEFAULTS, ...rest };
+    this.initialPosition = initialPosition;
+    this.initialLookAt = initialLookAt;
+  }
+  getBasePose(ctx) {
+    const targetKeys = Object.keys(ctx.targets);
+    const primary = ctx.targets[this.opts.targetKey];
+    if (targetKeys.length === 0 || !primary) {
+      return this.staticPose();
+    }
+    if (targetKeys.length === 1) {
+      return this.singleTargetPose(primary.position);
+    }
+    return this.multiTargetPose(ctx);
+  }
+  /**
+   * No targets: use the user-specified initial position if available,
+   * otherwise fall back to a default pose behind the origin.
+   */
+  staticPose() {
+    if (this.initialPosition) {
+      return {
+        position: this.initialPosition.clone(),
+        rotation: new Quaternion3(),
+        fov: this.opts.fov,
+        zoom: 1,
+        near: 0.1,
+        far: 1e3,
+        lookAt: this.initialLookAt?.clone() ?? new Vector33(0, 0, 0)
+      };
+    }
+    const position = new Vector33(
+      this.opts.shoulderOffset,
+      this.opts.height,
+      this.opts.distance
+    );
+    return {
+      position,
+      rotation: new Quaternion3(),
+      fov: this.opts.fov,
+      zoom: 1,
+      near: 0.1,
+      far: 1e3,
+      lookAt: new Vector33(0, 0, 0)
+    };
+  }
+  /**
+   * Single target: position = target + offset, lookAt = target.
+   */
+  singleTargetPose(targetPos) {
+    const position = new Vector33(
+      targetPos.x + this.opts.shoulderOffset,
+      targetPos.y + this.opts.height,
+      targetPos.z + this.opts.distance
+    );
+    return {
+      position,
+      rotation: new Quaternion3(),
+      fov: this.opts.fov,
+      zoom: 1,
+      near: 0.1,
+      far: 1e3,
+      lookAt: targetPos.clone()
+    };
+  }
+  /**
+   * Multi-target: compute centroid and adjust distance to frame all targets.
+   */
+  multiTargetPose(ctx) {
+    const targets = Object.values(ctx.targets);
+    const centroid = new Vector33();
+    for (const t of targets) {
+      centroid.add(t.position);
+    }
+    centroid.divideScalar(targets.length);
+    let maxDist = 0;
+    for (const t of targets) {
+      const d = centroid.distanceTo(t.position);
+      if (d > maxDist) maxDist = d;
+    }
+    const dynamicDistance = Math.max(
+      maxDist * this.opts.paddingFactor,
+      this.opts.minDistance
+    );
+    const baseOffset = new Vector33(
+      this.opts.shoulderOffset,
+      this.opts.height,
+      this.opts.distance
+    );
+    const baseLen = baseOffset.length();
+    const dir = baseLen > 0 ? baseOffset.clone().normalize() : new Vector33(0, 0.5, 1).normalize();
+    const position = centroid.clone().add(dir.multiplyScalar(dynamicDistance));
+    if (baseLen > 0) {
+      const heightRatio = this.opts.height / baseLen;
+      position.y = centroid.y + dynamicDistance * heightRatio;
+    }
+    return {
+      position,
+      rotation: new Quaternion3(),
+      fov: this.opts.fov,
+      zoom: 1,
+      near: 0.1,
+      far: 1e3,
+      lookAt: centroid.clone()
+    };
+  }
+};
+
+// src/lib/camera/perspectives/fixed-2d-perspective.ts
+import { Vector3 as Vector34, Quaternion as Quaternion4 } from "three";
+var DEFAULTS2 = {
+  position: { x: 0, y: 0, z: 10 },
+  zoom: 10
+};
+var Fixed2DPerspective = class {
+  id = "fixed-2d";
+  defaults = { damping: 1 };
+  opts;
+  constructor(options) {
+    this.opts = { ...DEFAULTS2, ...options };
+  }
+  getBasePose(_ctx) {
+    return {
+      position: new Vector34(
+        this.opts.position.x,
+        this.opts.position.y,
+        this.opts.position.z
+      ),
+      rotation: new Quaternion4(),
+      zoom: this.opts.zoom,
+      near: 1,
+      far: 1e3,
+      lookAt: new Vector34(this.opts.position.x, this.opts.position.y, 0)
+    };
+  }
+};
+
+// src/lib/camera/perspectives/first-person-perspective.ts
+import { Vector3 as Vector35, Quaternion as Quaternion5, Euler, MathUtils as MathUtils2 } from "three";
+var DEFAULTS3 = {
+  eyeHeight: 1.7,
+  defaultFov: 75,
+  pitchLimit: Math.PI / 2 - 0.01,
+  lookAtLerpSpeed: 5,
+  fovLerpSpeed: 8,
+  targetKey: "primary"
+};
+var FirstPersonPerspective = class {
+  id = "first-person";
+  defaults = { damping: 1 };
+  opts;
+  /** Fallback position when no target entity is attached. Mutate directly for manual movement. */
+  initialPosition;
+  initialLookAt;
+  // --- Look state ---
+  _yaw = 0;
+  _pitch = 0;
+  // --- FOV zoom state ---
+  _currentFov;
+  _targetFov;
+  // --- Look-at target state ---
+  _lookAtTarget = null;
+  _lookAtLerpSpeed;
+  _currentRotation = new Quaternion5();
+  _rotationInitialized = false;
+  constructor(options) {
+    const { initialPosition, initialLookAt, ...rest } = options ?? {};
+    this.opts = { ...DEFAULTS3, ...rest };
+    this.initialPosition = initialPosition;
+    this.initialLookAt = initialLookAt;
+    this._currentFov = this.opts.defaultFov;
+    this._targetFov = this.opts.defaultFov;
+    this._lookAtLerpSpeed = this.opts.lookAtLerpSpeed;
+    if (initialPosition && initialLookAt) {
+      this.deriveYawPitchFromLookAt(initialPosition, initialLookAt);
+    }
+  }
+  // --- Public API (called by game code / FPS behavior) ---
+  /** Accumulate yaw and pitch deltas. Pitch is clamped to the configured limit. */
+  look(deltaYaw, deltaPitch) {
+    this._yaw += deltaYaw;
+    this._pitch = MathUtils2.clamp(
+      this._pitch + deltaPitch,
+      -this.opts.pitchLimit,
+      this.opts.pitchLimit
+    );
+  }
+  /** Set absolute yaw and pitch. Pitch is clamped to the configured limit. */
+  setLook(yaw, pitch) {
+    this._yaw = yaw;
+    this._pitch = MathUtils2.clamp(pitch, -this.opts.pitchLimit, this.opts.pitchLimit);
+  }
+  /** Current yaw in radians. */
+  get yaw() {
+    return this._yaw;
+  }
+  /** Current pitch in radians. */
+  get pitch() {
+    return this._pitch;
+  }
+  /** Set the target FOV for a smooth zoom transition (e.g. sniper scope). */
+  zoom(fov) {
+    this._targetFov = fov;
+  }
+  /** Return to the default FOV. */
+  resetZoom() {
+    this._targetFov = this.opts.defaultFov;
+  }
+  /** Current field of view. */
+  get currentFov() {
+    return this._currentFov;
+  }
+  /**
+   * Enable smooth look-at toward a world position.
+   * The camera will slerp from the current rotation toward the look-at direction.
+   */
+  lookAt(target, lerpSpeed) {
+    this._lookAtTarget = target;
+    if (lerpSpeed != null) {
+      this._lookAtLerpSpeed = lerpSpeed;
+    }
+  }
+  /** Disable look-at and return to manual yaw/pitch control. */
+  clearLookAt() {
+    if (this._lookAtTarget) {
+      this.deriveYawPitchFromQuaternion(this._currentRotation);
+    }
+    this._lookAtTarget = null;
+  }
+  // --- CameraPerspective interface ---
+  getBasePose(ctx) {
+    const position = this.computePosition(ctx);
+    const rotation = this.computeRotation(position, ctx.dt);
+    this._currentFov = this.lerpFov(ctx.dt);
+    return {
+      position,
+      rotation,
+      fov: this._currentFov,
+      near: 0.1,
+      far: 1e3
+    };
+  }
+  // --- Private helpers ---
+  computePosition(ctx) {
+    const target = ctx.targets[this.opts.targetKey];
+    if (target) {
+      return new Vector35(
+        target.position.x,
+        target.position.y + this.opts.eyeHeight,
+        target.position.z
+      );
+    }
+    if (this.initialPosition) {
+      return this.initialPosition.clone();
+    }
+    return new Vector35(0, this.opts.eyeHeight, 0);
+  }
+  computeRotation(eyePosition, dt) {
+    const yawPitchQuat = new Quaternion5().setFromEuler(
+      new Euler(this._pitch, this._yaw, 0, "YXZ")
+    );
+    if (!this._rotationInitialized) {
+      this._currentRotation.copy(yawPitchQuat);
+      this._rotationInitialized = true;
+    }
+    if (this._lookAtTarget) {
+      const dir = _vec3.copy(this._lookAtTarget).sub(eyePosition);
+      if (dir.lengthSq() > 1e-4) {
+        dir.normalize();
+        const desiredYaw = Math.atan2(-dir.x, -dir.z);
+        const desiredPitch = Math.asin(MathUtils2.clamp(dir.y, -1, 1));
+        const desiredQuat = _quat.setFromEuler(
+          _euler.set(desiredPitch, desiredYaw, 0, "YXZ")
+        );
+        const t = 1 - Math.pow(1 - Math.min(this._lookAtLerpSpeed * dt, 1), 1);
+        this._currentRotation.slerp(desiredQuat, MathUtils2.clamp(t, 0, 1));
+        return this._currentRotation.clone();
+      }
+    }
+    this._currentRotation.copy(yawPitchQuat);
+    return yawPitchQuat;
+  }
+  lerpFov(dt) {
+    if (Math.abs(this._currentFov - this._targetFov) < 0.01) {
+      return this._targetFov;
+    }
+    const t = 1 - Math.pow(1 - Math.min(this.opts.fovLerpSpeed * dt, 1), 1);
+    return MathUtils2.lerp(this._currentFov, this._targetFov, MathUtils2.clamp(t, 0, 1));
+  }
+  deriveYawPitchFromLookAt(from, to) {
+    const dir = _vec3.copy(to).sub(from).normalize();
+    this._yaw = Math.atan2(-dir.x, -dir.z);
+    this._pitch = Math.asin(MathUtils2.clamp(dir.y, -1, 1));
+  }
+  deriveYawPitchFromQuaternion(q) {
+    const euler = _euler.setFromQuaternion(q, "YXZ");
+    this._yaw = euler.y;
+    this._pitch = MathUtils2.clamp(euler.x, -this.opts.pitchLimit, this.opts.pitchLimit);
+  }
+};
+var _vec3 = new Vector35();
+var _quat = new Quaternion5();
+var _euler = new Euler();
+
+// src/lib/camera/perspectives/index.ts
+function createPerspective(type, options) {
+  switch (type) {
+    case "third-person":
+      return new ThirdPersonPerspective(options);
+    case "first-person":
+      return new FirstPersonPerspective(options);
+    case "isometric":
+      return new ThirdPersonPerspective({
+        distance: 10,
+        height: 10,
+        ...options
+      });
+    case "flat-2d":
+      return new Fixed2DPerspective(options);
+    case "fixed-2d":
+      return new Fixed2DPerspective(options);
+    default:
+      return new ThirdPersonPerspective(options);
+  }
+}
+
 // src/lib/camera/zylem-camera.ts
 var ZylemCamera = class {
+  /**
+   * @deprecated No longer used. Kept as null for backward compatibility
+   * with code that checks `camera.cameraRig` (e.g. scene graph insertion).
+   */
   cameraRig = null;
   camera;
   screenResolution;
@@ -762,7 +1185,7 @@ var ZylemCamera = class {
   frustumSize = 10;
   rendererType;
   sceneRef = null;
-  /** Name for camera manager lookup */
+  /** Name for camera manager lookup. */
   name = "";
   /**
    * Viewport in normalized coordinates (0-1).
@@ -771,11 +1194,21 @@ var ZylemCamera = class {
   viewport = { ...DEFAULT_VIEWPORT };
   /**
    * Multiple targets for the camera to follow/frame.
-   * Replaces the old single `target` property.
    */
   targets = [];
   /**
-   * @deprecated Use `targets` array instead. This getter/setter is kept for backward compatibility.
+   * The camera pose pipeline.
+   * Exposed so CameraWrapper can delegate addBehavior/addAction/getState.
+   */
+  pipeline;
+  /**
+   * Offscreen render target for render-to-texture (RTT) cameras.
+   * When set, the camera renders to this target instead of the screen viewport.
+   * Created via createRenderTarget() or automatically by setCameraFeed().
+   */
+  renderTarget = null;
+  /**
+   * @deprecated Use `targets` array instead. Kept for backward compatibility.
    */
   get target() {
     return this.targets.length > 0 ? this.targets[0] : null;
@@ -791,13 +1224,15 @@ var ZylemCamera = class {
       this.targets = [];
     }
   }
-  // Perspective controller delegation
-  perspectiveController = null;
   // Orbit controls
   orbitController = null;
   _useOrbitalControls = false;
-  /** Reference to the shared renderer manager (set during setup) */
+  /** When true, debug-mode orbital controls are not attached to this camera. */
+  _skipDebugOrbit = false;
+  /** Reference to the shared renderer manager (set during setup). */
   _rendererManager = null;
+  /** Elapsed time tracker for CameraContext. */
+  _elapsedTime = 0;
   constructor(perspective, screenResolution, frustumSize = 10, rendererType = "webgl") {
     this._perspective = perspective;
     this.screenResolution = screenResolution;
@@ -805,20 +1240,13 @@ var ZylemCamera = class {
     this.rendererType = rendererType;
     const aspectRatio = screenResolution.x / screenResolution.y;
     this.camera = this.createCameraForPerspective(aspectRatio);
-    if (this.needsRig()) {
-      this.cameraRig = new Object3D2();
-      this.cameraRig.position.set(0, 3, 10);
-      this.cameraRig.add(this.camera);
-      this.camera.lookAt(new Vector33(0, 2, 0));
-    } else {
-      this.camera.position.set(0, 0, 10);
-      this.camera.lookAt(new Vector33(0, 0, 0));
-    }
-    this.initializePerspectiveController();
+    this.camera.position.set(0, 0, 10);
+    this.camera.lookAt(new Vector36(0, 0, 0));
+    const perspectiveImpl = createPerspective(perspective);
+    this.pipeline = new CameraPipeline(perspectiveImpl);
   }
   /**
    * Setup the camera with a scene and renderer manager.
-   * The renderer manager provides shared rendering infrastructure.
    */
   async setup(scene, rendererManager) {
     this.sceneRef = scene;
@@ -828,19 +1256,12 @@ var ZylemCamera = class {
     if (this._rendererManager && !this._rendererManager.initialized) {
       await this._rendererManager.initRenderer();
     }
-    if (this.perspectiveController && this._rendererManager) {
-      this.perspectiveController.setup({
-        screenResolution: this.screenResolution,
-        renderer: this._rendererManager.renderer,
-        scene,
-        camera: this
-      });
-    }
     if (this._rendererManager) {
       this.orbitController = new CameraOrbitController(
         this.camera,
         this._rendererManager.renderer.domElement,
-        this.cameraRig
+        null
+        // no camera rig
       );
       this.orbitController.setScene(scene);
       if (this._useOrbitalControls) {
@@ -868,17 +1289,24 @@ var ZylemCamera = class {
     await this.setup(scene, this._rendererManager);
   }
   /**
-   * Update camera controllers (called each frame).
-   * Does NOT render -- rendering is handled by RendererManager.
+   * Update the camera each frame.
+   *
+   * When orbit/debug controls are active, the pipeline is skipped and
+   * orbit controls manage the camera directly. Otherwise, the pipeline
+   * runs: Perspective -> Behaviors -> Actions -> Smoothing -> Commit.
    */
   update(delta) {
     this.orbitController?.update();
-    if (this.perspectiveController && !this.isDebugModeActive() && !this._useOrbitalControls) {
-      this.perspectiveController.update(delta);
+    if (this.isDebugModeActive() || this._useOrbitalControls) {
+      return;
     }
+    this._elapsedTime += delta;
+    const ctx = this.buildContext(delta);
+    const finalPose = this.pipeline.run(ctx);
+    this.commitPose(finalPose);
   }
   /**
-   * Check if debug mode is active (orbit controls taking over camera)
+   * Check if debug mode is active (orbit controls taking over camera).
    */
   isDebugModeActive() {
     return this.orbitController?.isActive ?? false;
@@ -903,6 +1331,7 @@ var ZylemCamera = class {
   get useOrbitalControls() {
     return this._useOrbitalControls;
   }
+  // ─── Target management ──────────────────────────────────────────────────
   /**
    * Add a target entity for the camera to follow/frame.
    */
@@ -926,23 +1355,12 @@ var ZylemCamera = class {
   clearTargets() {
     this.targets = [];
   }
+  // ─── Viewport & resize ──────────────────────────────────────────────────
   /**
-   * Dispose camera resources (not the renderer -- that's managed by RendererManager).
-   */
-  destroy() {
-    try {
-      this.orbitController?.dispose();
-    } catch {
-    }
-    this.sceneRef = null;
-    this.targets = [];
-    this._rendererManager = null;
-  }
-  /**
-   * Attach a delegate to react to debug state changes.
+   * Set the viewport for this camera (normalized 0-1 coordinates).
    */
-  setDebugDelegate(delegate) {
-    this.orbitController?.setDebugDelegate(delegate);
+  setViewport(x, y, width, height) {
+    this.viewport = { x, y, width, height };
   }
   /**
    * Resize camera projection.
@@ -953,110 +1371,87 @@ var ZylemCamera = class {
       this.camera.aspect = width / height;
       this.camera.updateProjectionMatrix();
     }
-    if (this.perspectiveController) {
-      this.perspectiveController.resize(width, height);
+    if (this.camera instanceof OrthographicCamera) {
+      const aspect = width / height;
+      this.camera.left = this.frustumSize * aspect / -2;
+      this.camera.right = this.frustumSize * aspect / 2;
+      this.camera.top = this.frustumSize / 2;
+      this.camera.bottom = this.frustumSize / -2;
+      this.camera.updateProjectionMatrix();
     }
   }
+  // ─── Render-to-texture ─────────────────────────────────────────────────
   /**
-   * Set the viewport for this camera (normalized 0-1 coordinates).
+   * Create an offscreen render target for this camera.
+   * When a render target is present, CameraManager renders this camera
+   * to the target instead of the screen viewport.
+   *
+   * @param width  Texture width in pixels (default 512)
+   * @param height Texture height in pixels (default 512)
    */
-  setViewport(x, y, width, height) {
-    this.viewport = { x, y, width, height };
+  createRenderTarget(width = 512, height = 512) {
+    if (this.renderTarget) {
+      this.renderTarget.dispose();
+    }
+    this.renderTarget = new WebGLRenderTarget2(width, height, {
+      minFilter: LinearFilter,
+      magFilter: LinearFilter
+    });
+    return this.renderTarget;
   }
   /**
-   * Create camera based on perspective type
+   * Get the texture from the render target (for applying to a mesh material).
+   * Returns null if no render target has been created.
    */
-  createCameraForPerspective(aspectRatio) {
-    switch (this._perspective) {
-      case Perspectives.ThirdPerson:
-        return this.createThirdPersonCamera(aspectRatio);
-      case Perspectives.FirstPerson:
-        return this.createFirstPersonCamera(aspectRatio);
-      case Perspectives.Isometric:
-        return this.createIsometricCamera(aspectRatio);
-      case Perspectives.Flat2D:
-        return this.createFlat2DCamera(aspectRatio);
-      case Perspectives.Fixed2D:
-        return this.createFixed2DCamera(aspectRatio);
-      default:
-        return this.createThirdPersonCamera(aspectRatio);
-    }
+  getRenderTexture() {
+    return this.renderTarget?.texture ?? null;
   }
+  // ─── Lifecycle ──────────────────────────────────────────────────────────
   /**
-   * Initialize perspective-specific controller
+   * Dispose camera resources.
    */
-  initializePerspectiveController() {
-    switch (this._perspective) {
-      case Perspectives.ThirdPerson:
-        this.perspectiveController = new ThirdPersonCamera();
-        break;
-      case Perspectives.Fixed2D:
-        this.perspectiveController = new Fixed2DCamera();
-        break;
-      default:
-        this.perspectiveController = new ThirdPersonCamera();
+  destroy() {
+    try {
+      this.orbitController?.dispose();
+    } catch {
     }
+    try {
+      this.renderTarget?.dispose();
+    } catch {
+    }
+    this.renderTarget = null;
+    this.sceneRef = null;
+    this.targets = [];
+    this._rendererManager = null;
   }
-  createThirdPersonCamera(aspectRatio) {
-    return new PerspectiveCamera2(75, aspectRatio, 0.1, 1e3);
-  }
-  createFirstPersonCamera(aspectRatio) {
-    return new PerspectiveCamera2(75, aspectRatio, 0.1, 1e3);
-  }
-  createIsometricCamera(aspectRatio) {
-    return new OrthographicCamera(
-      this.frustumSize * aspectRatio / -2,
-      this.frustumSize * aspectRatio / 2,
-      this.frustumSize / 2,
-      this.frustumSize / -2,
-      1,
-      1e3
-    );
-  }
-  createFlat2DCamera(aspectRatio) {
-    return new OrthographicCamera(
-      this.frustumSize * aspectRatio / -2,
-      this.frustumSize * aspectRatio / 2,
-      this.frustumSize / 2,
-      this.frustumSize / -2,
-      1,
-      1e3
-    );
-  }
-  createFixed2DCamera(aspectRatio) {
-    return this.createFlat2DCamera(aspectRatio);
+  // ─── Debug delegate ─────────────────────────────────────────────────────
+  /**
+   * Attach a delegate to react to debug state changes.
+   * Skipped when _skipDebugOrbit is true so the pipeline always runs.
+   */
+  setDebugDelegate(delegate) {
+    if (this._skipDebugOrbit) return;
+    this.orbitController?.setDebugDelegate(delegate);
   }
-  // Movement methods
-  moveCamera(position) {
+  // ─── Movement helpers (backward compat) ─────────────────────────────────
+  /**
+   * Directly set the camera position.
+   */
+  move(position) {
     if (this._perspective === Perspectives.Flat2D || this._perspective === Perspectives.Fixed2D) {
       this.frustumSize = position.z;
     }
-    if (this.cameraRig) {
-      this.cameraRig.position.set(position.x, position.y, position.z);
-    } else {
-      this.camera.position.set(position.x, position.y, position.z);
-    }
-  }
-  move(position) {
-    this.moveCamera(position);
-  }
-  rotate(pitch, yaw, roll) {
-    if (this.cameraRig) {
-      this.cameraRig.rotateX(pitch);
-      this.cameraRig.rotateY(yaw);
-      this.cameraRig.rotateZ(roll);
-    } else {
-      this.camera.rotateX(pitch);
-      this.camera.rotateY(yaw);
-      this.camera.rotateZ(roll);
-    }
+    this.camera.position.set(position.x, position.y, position.z);
   }
   /**
-   * Check if this perspective type needs a camera rig
+   * Apply incremental rotation to the camera.
    */
-  needsRig() {
-    return this._perspective === Perspectives.ThirdPerson;
+  rotate(pitch, yaw, roll) {
+    this.camera.rotateX(pitch);
+    this.camera.rotateY(yaw);
+    this.camera.rotateZ(roll);
   }
+  // ─── Renderer manager access ────────────────────────────────────────────
   /**
    * Get the DOM element for the renderer.
    * @deprecated Access via RendererManager instead.
@@ -1080,24 +1475,108 @@ var ZylemCamera = class {
     this._rendererManager = manager;
   }
   // ─── Legacy compatibility methods ────────────────────────────────────────
-  /**
-   * @deprecated Renderer is now owned by RendererManager
-   */
+  /** @deprecated Renderer is now owned by RendererManager */
   get renderer() {
     return this._rendererManager?.renderer;
   }
-  /**
-   * @deprecated Composer is now owned by RendererManager
-   */
+  /** @deprecated Composer is now owned by RendererManager */
   get composer() {
     return this._rendererManager?.composer;
   }
-  /**
-   * @deprecated Use RendererManager.setPixelRatio() instead
-   */
+  /** @deprecated Use RendererManager.setPixelRatio() instead */
   setPixelRatio(dpr) {
     this._rendererManager?.setPixelRatio(dpr);
   }
+  // ─── Private helpers ────────────────────────────────────────────────────
+  /**
+   * Build a CameraContext from current ZylemCamera state.
+   * Converts StageEntity[] targets into Record<string, TransformLike>.
+   */
+  buildContext(delta) {
+    const targets = {};
+    for (let i = 0; i < this.targets.length; i++) {
+      const entity = this.targets[i];
+      const key = i === 0 ? "primary" : `target_${i}`;
+      if (entity.group) {
+        targets[key] = {
+          position: entity.group.position,
+          rotation: entity.group.quaternion
+        };
+      }
+    }
+    return {
+      dt: delta,
+      time: this._elapsedTime,
+      viewport: {
+        width: this.screenResolution.x,
+        height: this.screenResolution.y,
+        aspect: this.screenResolution.x / this.screenResolution.y
+      },
+      targets
+    };
+  }
+  /**
+   * Apply the final pipeline pose to the Three.js camera.
+   */
+  commitPose(pose) {
+    this.camera.position.copy(pose.position);
+    if (pose.lookAt) {
+      this.camera.lookAt(pose.lookAt);
+    } else {
+      this.camera.quaternion.copy(pose.rotation);
+    }
+    if (this.camera instanceof PerspectiveCamera2) {
+      if (pose.fov != null) this.camera.fov = pose.fov;
+      if (pose.near != null) this.camera.near = pose.near;
+      if (pose.far != null) this.camera.far = pose.far;
+      this.camera.updateProjectionMatrix();
+    }
+    if (this.camera instanceof OrthographicCamera) {
+      if (pose.zoom != null) {
+        const aspect = this.screenResolution.x / this.screenResolution.y;
+        const size = pose.zoom;
+        this.camera.left = -size * aspect / 2;
+        this.camera.right = size * aspect / 2;
+        this.camera.top = size / 2;
+        this.camera.bottom = -size / 2;
+      }
+      if (pose.near != null) this.camera.near = pose.near;
+      if (pose.far != null) this.camera.far = pose.far;
+      this.camera.updateProjectionMatrix();
+    }
+  }
+  /**
+   * Create a Three.js camera based on perspective type.
+   */
+  createCameraForPerspective(aspectRatio) {
+    switch (this._perspective) {
+      case Perspectives.ThirdPerson:
+        return new PerspectiveCamera2(75, aspectRatio, 0.1, 1e3);
+      case Perspectives.FirstPerson:
+        return new PerspectiveCamera2(75, aspectRatio, 0.1, 1e3);
+      case Perspectives.Isometric:
+        return new OrthographicCamera(
+          this.frustumSize * aspectRatio / -2,
+          this.frustumSize * aspectRatio / 2,
+          this.frustumSize / 2,
+          this.frustumSize / -2,
+          1,
+          1e3
+        );
+      case Perspectives.Flat2D:
+      case Perspectives.Fixed2D:
+        return new OrthographicCamera(
+          this.frustumSize * aspectRatio / -2,
+          this.frustumSize * aspectRatio / 2,
+          this.frustumSize / 2,
+          this.frustumSize / -2,
+          1,
+          1e3
+        );
+      default:
+        return new PerspectiveCamera2(75, aspectRatio, 0.1, 1e3);
+    }
+  }
 };
 
 // src/lib/camera/camera.ts
@@ -1151,9 +1630,73 @@ var CameraWrapper = class {
   setViewport(x, y, width, height) {
     this.cameraRef.setViewport(x, y, width, height);
   }
+  // ─── Pipeline: Behaviors ────────────────────────────────────────────────
+  /**
+   * Add or replace a behavior by key (idempotent).
+   * Behaviors modify the desired camera pose each frame.
+   *
+   * @param key   Unique key for this behavior (used for replacement/removal).
+   * @param behavior  The CameraBehavior implementation.
+   */
+  addBehavior(key, behavior) {
+    this.cameraRef.pipeline.addBehavior(key, behavior);
+  }
+  /**
+   * Remove a behavior by key.
+   */
+  removeBehavior(key) {
+    return this.cameraRef.pipeline.removeBehavior(key);
+  }
+  // ─── Pipeline: Actions ──────────────────────────────────────────────────
+  /**
+   * Add a transient action (screenshake, recoil, etc.).
+   * Actions apply additive deltas and self-expire when isDone() returns true.
+   */
+  addAction(action) {
+    this.cameraRef.pipeline.addAction(action);
+  }
+  // ─── Pipeline: Perspective ──────────────────────────────────────────────
+  /**
+   * Switch the camera's active perspective at runtime.
+   * The first frame after switching snaps to the new pose (no lerp).
+   *
+   * @param type     Perspective type string (e.g. Perspectives.ThirdPerson).
+   * @param options  Perspective-specific options (distance, height, zoom, etc.).
+   */
+  setPerspective(type, options) {
+    this.cameraRef.pipeline.setPerspective(createPerspective(type, options));
+  }
+  /**
+   * Retrieve the active perspective instance, cast to the desired type.
+   * Useful for calling perspective-specific methods (e.g. FirstPersonPerspective.look()).
+   *
+   * @example
+   * const fps = camera.getPerspective<FirstPersonPerspective>();
+   * fps.look(dx, dy);
+   */
+  getPerspective() {
+    return this.cameraRef.pipeline.perspective;
+  }
+  // ─── Pipeline: Debug state ──────────────────────────────────────────────
+  /**
+   * Return a debug snapshot of the camera pipeline state.
+   * Includes: active perspective, desired/final pose, behavior keys, action count.
+   */
+  getState() {
+    return this.cameraRef.pipeline.getState();
+  }
+  // ─── Render-to-texture ─────────────────────────────────────────────────
+  /**
+   * Get the offscreen render texture for this camera.
+   * Returns null if the camera was not created with renderToTexture.
+   * Use with setCameraFeed() or apply directly to a mesh material.
+   */
+  getRenderTexture() {
+    return this.cameraRef.getRenderTexture();
+  }
 };
 function createCamera(options) {
-  const screenResolution = options.screenResolution || new Vector24(window.innerWidth, window.innerHeight);
+  const screenResolution = options.screenResolution || new Vector23(window.innerWidth, window.innerHeight);
   let frustumSize = 10;
   if (options.perspective === "fixed-2d") {
     frustumSize = options.zoom || 10;
@@ -1167,21 +1710,49 @@ function createCamera(options) {
   if (options.name) {
     zylemCamera.name = options.name;
   }
-  const position = options.position ? options.position instanceof Vector34 ? options.position : new Vector34(options.position.x, options.position.y, options.position.z) : new Vector34(0, 0, 0);
-  const target = options.target ? options.target instanceof Vector34 ? options.target : new Vector34(options.target.x, options.target.y, options.target.z) : new Vector34(0, 0, 0);
+  const position = options.position ? options.position instanceof Vector37 ? options.position : new Vector37(options.position.x, options.position.y, options.position.z) : new Vector37(0, 0, 0);
+  const target = options.target ? options.target instanceof Vector37 ? options.target : new Vector37(options.target.x, options.target.y, options.target.z) : new Vector37(0, 0, 0);
   zylemCamera.move(position);
   zylemCamera.camera.lookAt(target);
+  const perspType = options.perspective || "third-person";
+  if (perspType === "fixed-2d" || perspType === "flat-2d") {
+    zylemCamera.pipeline.setPerspective(
+      createPerspective(perspType, { zoom: frustumSize })
+    );
+  } else {
+    zylemCamera.pipeline.setPerspective(
+      createPerspective(perspType, {
+        initialPosition: position.clone(),
+        initialLookAt: target.clone()
+      })
+    );
+  }
   if (options.viewport) {
     zylemCamera.viewport = { ...options.viewport };
   }
   if (options.useOrbitalControls) {
     zylemCamera._useOrbitalControls = true;
   }
+  if (options.skipDebugOrbit) {
+    zylemCamera._skipDebugOrbit = true;
+  }
+  if (options.damping != null) {
+    zylemCamera.pipeline.damping = options.damping;
+  }
+  if (options.behaviors) {
+    for (const [key, behavior] of Object.entries(options.behaviors)) {
+      zylemCamera.pipeline.addBehavior(key, behavior);
+    }
+  }
+  if (options.renderToTexture) {
+    const { width = 512, height = 512 } = options.renderToTexture;
+    zylemCamera.createRenderTarget(width, height);
+  }
   return new CameraWrapper(zylemCamera);
 }
 
 // src/lib/camera/camera-manager.ts
-import { Vector2 as Vector25 } from "three";
+import { Vector2 as Vector24 } from "three";
 var CameraManager = class {
   /** Named camera registry */
   cameras = /* @__PURE__ */ new Map();
@@ -1344,17 +1915,33 @@ var CameraManager = class {
   }
   /**
    * Render all active cameras through the renderer manager.
+   * RTT cameras (those with a renderTarget) are rendered first to their
+   * offscreen textures, then viewport cameras are rendered to the screen.
    */
   render(scene) {
     if (!this._rendererManager || this._activeCameras.length === 0) return;
-    this._rendererManager.renderCameras(scene, this._activeCameras);
+    const rttCameras = [];
+    const viewportCameras = [];
+    for (const cam of this._activeCameras) {
+      if (cam.renderTarget) {
+        rttCameras.push(cam);
+      } else {
+        viewportCameras.push(cam);
+      }
+    }
+    for (const cam of rttCameras) {
+      this._rendererManager.renderCameraToTarget(scene, cam);
+    }
+    if (viewportCameras.length > 0) {
+      this._rendererManager.renderCameras(scene, viewportCameras);
+    }
   }
   /**
    * Create a default third-person camera if no cameras have been added.
    */
   ensureDefaultCamera() {
     if (this.cameras.size === 0 || this._activeCameras.length === 0) {
-      const screenRes = this._rendererManager?.screenResolution || new Vector25(window.innerWidth, window.innerHeight);
+      const screenRes = this._rendererManager?.screenResolution || new Vector24(window.innerWidth, window.innerHeight);
       const defaultCam = new ZylemCamera(Perspectives.ThirdPerson, screenRes);
       this.addCamera(defaultCam, "default");
       return defaultCam;