@agent-os-lab/agent-game-sdk 0.1.1

package/src/office/renderers/three/mount.ts

@@ -0,0 +1,253 @@
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+
+import type {
+  AgentGameOfficeAgent,
+  AgentGameOfficeRendererController,
+  AgentGameOfficeResolvedOptions,
+  AgentGameOfficeSnapshot,
+} from "../../core/types";
+import { applyAgentPose, updateAgentMotion } from "./agent-animation";
+import { createAgentBodyInstancedLayer } from "./agent-body-instancing";
+import { resolveAgentFacingTarget, resolveAgentPosition } from "./agent-layout";
+import {
+  type AgentLabelRecord,
+  createAgentLabel,
+  removeAgentLabel,
+  updateAgentLabel,
+  updateAgentLabelPosition,
+} from "./agent-label";
+import { type AgentMeshParts, createAgentMesh } from "./agent-mesh";
+import { addLights, buildOfficeScene, disposeObject } from "./scene";
+
+type AgentMeshRecord = {
+  id: string;
+  agent: AgentGameOfficeAgent;
+  renderIndex: number;
+  mesh: AgentMeshParts;
+  label: AgentLabelRecord;
+  target: THREE.Vector3;
+};
+
+export const THREE_RENDERER_PIXEL_RATIO_LIMIT = 1.5;
+export const THREE_RENDERER_TARGET_FPS = 30;
+
+export function createOfficeMouseButtons(): OrbitControls["mouseButtons"] {
+  return {
+    LEFT: THREE.MOUSE.PAN,
+    MIDDLE: THREE.MOUSE.DOLLY,
+    RIGHT: THREE.MOUSE.ROTATE,
+  };
+}
+
+export function mountThreeAgentGameOffice(
+  container: HTMLElement,
+  initialSnapshot: AgentGameOfficeSnapshot,
+  _options: AgentGameOfficeResolvedOptions,
+): AgentGameOfficeRendererController {
+  const width = Math.max(container.clientWidth || 960, 320);
+  const height = Math.max(container.clientHeight || 540, 240);
+  const scene = new THREE.Scene();
+  scene.background = new THREE.Color(0xf7f8fb);
+
+  const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
+  camera.position.set(30, 24, 28);
+  camera.lookAt(10, 0, 0);
+
+  const renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    alpha: false,
+    powerPreference: "high-performance",
+  });
+  renderer.setSize(width, height);
+  renderer.setPixelRatio(Math.min(globalThis.devicePixelRatio || 1, THREE_RENDERER_PIXEL_RATIO_LIMIT));
+  renderer.shadowMap.enabled = false;
+  renderer.domElement.style.width = "100%";
+  renderer.domElement.style.height = "100%";
+  renderer.domElement.style.display = "block";
+  renderer.domElement.style.cursor = "grab";
+
+  function setGrabbingCursor() {
+    renderer.domElement.style.cursor = "grabbing";
+  }
+
+  function setGrabCursor() {
+    renderer.domElement.style.cursor = "grab";
+  }
+
+  renderer.domElement.addEventListener("pointerdown", setGrabbingCursor);
+  renderer.domElement.addEventListener("pointerup", setGrabCursor);
+  renderer.domElement.addEventListener("pointerleave", setGrabCursor);
+
+  let labelsDirty = true;
+  const controls = new OrbitControls(camera, renderer.domElement);
+  controls.target.set(10, 0, 0);
+  controls.enableDamping = true;
+  controls.dampingFactor = 0.08;
+  controls.enablePan = true;
+  controls.enableRotate = true;
+  controls.enableZoom = true;
+  controls.mouseButtons = createOfficeMouseButtons();
+  controls.minDistance = 8;
+  controls.maxDistance = 70;
+  controls.maxPolarAngle = Math.PI * 0.48;
+  controls.addEventListener("change", () => {
+    labelsDirty = true;
+  });
+  controls.update();
+
+  const root = document.createElement("div");
+  root.style.position = "relative";
+  root.style.width = "100%";
+  root.style.height = "100%";
+  root.style.overflow = "hidden";
+  root.appendChild(renderer.domElement);
+
+  const overlay = document.createElement("div");
+  overlay.style.position = "absolute";
+  overlay.style.inset = "0";
+  overlay.style.pointerEvents = "none";
+  root.appendChild(overlay);
+  container.appendChild(root);
+
+  addLights(scene);
+  buildOfficeScene(scene);
+  const agentBodyLayer = createAgentBodyInstancedLayer(scene);
+
+  const agents = new Map<string, AgentMeshRecord>();
+  let frameId = 0;
+  let disposed = false;
+  let previousFrameTime = performance.now();
+  let previousRenderTime = previousFrameTime;
+
+  function update(snapshot: AgentGameOfficeSnapshot) {
+    const liveIds = new Set(snapshot.agents.map((agent) => agent.id));
+    for (const [agentId, record] of agents.entries()) {
+      if (!liveIds.has(agentId)) {
+        scene.remove(record.mesh.group);
+        removeAgentLabel(record.label);
+        agents.delete(agentId);
+      }
+    }
+
+    snapshot.agents.forEach((agent, index) => {
+      const record = agents.get(agent.id) ?? createAgentRecord(agent, index);
+      agents.set(agent.id, record);
+      const target = resolveAgentPosition(agent, index, snapshot.agents.length);
+      record.agent = agent;
+      record.renderIndex = index;
+      record.target.copy(target);
+      record.mesh.group.visible = agent.sceneState !== "offline";
+      updateAgentLabel(record.label, agent);
+      updateAgentLabelPosition(record.label, record.mesh.group.position, camera, renderer.domElement);
+    });
+    labelsDirty = true;
+  }
+
+  function createAgentRecord(agent: AgentGameOfficeAgent, index: number): AgentMeshRecord {
+    const mesh = createAgentMesh(agent, index);
+    const position = resolveAgentPosition(agent, index, initialSnapshot.agents.length);
+    mesh.group.position.copy(position);
+    scene.add(mesh.group);
+
+    const label = createAgentLabel(overlay);
+
+    return { id: agent.id, agent, renderIndex: index, mesh, label, target: position.clone() };
+  }
+
+  function animate() {
+    if (disposed) {
+      return;
+    }
+    const now = performance.now();
+    const targetFrameIntervalMs = 1000 / THREE_RENDERER_TARGET_FPS;
+    if (now - previousRenderTime < targetFrameIntervalMs) {
+      frameId = requestAnimationFrame(animate);
+      return;
+    }
+    const deltaSeconds = Math.min((now - previousFrameTime) / 1000, 0.05);
+    previousFrameTime = now;
+    previousRenderTime = now;
+    const elapsedSeconds = now / 1000;
+
+    const controlsChanged = controls.update();
+    const shouldUpdateLabels = labelsDirty || controlsChanged;
+
+    for (const record of agents.values()) {
+      const moving = record.agent.sceneState !== "offline" && updateAgentMotion({
+        mesh: record.mesh,
+        agent: record.agent,
+        target: record.target,
+        facingTarget: resolveAgentFacingTarget(record.agent),
+        elapsedSeconds,
+        deltaSeconds,
+      });
+      record.mesh.group.visible = record.agent.sceneState !== "offline";
+      applyAgentPose(record.mesh, record.agent, moving, elapsedSeconds);
+      if (moving || shouldUpdateLabels) {
+        updateAgentLabelPosition(record.label, record.mesh.group.position, camera, renderer.domElement);
+      }
+    }
+    agentBodyLayer.update(Array.from(agents.values()).map((record) => ({
+      mesh: record.mesh,
+      renderIndex: record.renderIndex,
+      visible: record.agent.sceneState !== "offline",
+    })));
+    renderer.render(scene, camera);
+    labelsDirty = false;
+    frameId = requestAnimationFrame(animate);
+  }
+
+  const resizeObserver = new ResizeObserver(() => {
+    const nextWidth = Math.max(container.clientWidth || width, 320);
+    const nextHeight = Math.max(container.clientHeight || height, 240);
+    camera.aspect = nextWidth / nextHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(nextWidth, nextHeight);
+    labelsDirty = true;
+  });
+  resizeObserver.observe(container);
+
+  update(initialSnapshot);
+  animate();
+
+  return {
+    update,
+    focusAgent(agentId) {
+      if (!agentId) {
+        camera.position.set(30, 24, 28);
+        controls.target.set(10, 0, 0);
+        controls.update();
+        labelsDirty = true;
+        return;
+      }
+      const record = agents.get(agentId);
+      if (!record) {
+        return;
+      }
+      const target = record.mesh.group.position;
+      camera.position.set(target.x + 5, 8, target.z + 7);
+      controls.target.set(target.x, 1, target.z);
+      controls.update();
+      labelsDirty = true;
+    },
+    destroy() {
+      disposed = true;
+      cancelAnimationFrame(frameId);
+      resizeObserver.disconnect();
+      controls.dispose();
+      renderer.domElement.removeEventListener("pointerdown", setGrabbingCursor);
+      renderer.domElement.removeEventListener("pointerup", setGrabCursor);
+      renderer.domElement.removeEventListener("pointerleave", setGrabCursor);
+      agents.forEach((record) => {
+        removeAgentLabel(record.label);
+        disposeObject(record.mesh.group);
+      });
+      agents.clear();
+      agentBodyLayer.dispose();
+      disposeObject(scene);
+      renderer.dispose();
+      root.remove();
+    },
+  };
+}