worldorbit 3.0.6 → 3.0.7

package/dist/unpkg/worldorbit.js

@@ -37777,6 +37777,15 @@ void main() {
       starCore: "#ffcc67",
       starStroke: "rgba(255, 245, 203, 0.85)",
       starGlow: "#ffe8a3",
+      spaceFog: "#07131d",
+      starfield: "rgba(226, 239, 255, 0.9)",
+      starfieldDim: "rgba(164, 194, 228, 0.45)",
+      objectSpecular: "#f5f8ff",
+      orbitOpacity: 0.34,
+      orbitBandOpacity: 0.24,
+      selectionHalo: "rgba(255, 214, 139, 0.9)",
+      atmosphere: "rgba(143, 202, 255, 0.4)",
+      cometTail: "rgba(193, 243, 255, 0.7)",
       fontFamily: '"Segoe UI Variable", "Bahnschrift", sans-serif',
       displayFont: '"Bahnschrift", "Segoe UI Variable", sans-serif'
     },
@@ -37800,6 +37809,15 @@ void main() {
       starCore: "#e5f98c",
       starStroke: "rgba(246, 255, 217, 0.9)",
       starGlow: "#fffab4",
+      spaceFog: "#071723",
+      starfield: "rgba(220, 255, 245, 0.9)",
+      starfieldDim: "rgba(124, 212, 195, 0.42)",
+      objectSpecular: "#ecfffb",
+      orbitOpacity: 0.3,
+      orbitBandOpacity: 0.22,
+      selectionHalo: "rgba(120, 255, 215, 0.85)",
+      atmosphere: "rgba(120, 255, 215, 0.32)",
+      cometTail: "rgba(181, 255, 236, 0.68)",
       fontFamily: '"Segoe UI Variable", "Bahnschrift", sans-serif',
       displayFont: '"Bahnschrift", "Segoe UI Variable", sans-serif'
     },
@@ -37823,6 +37841,15 @@ void main() {
       starCore: "#ffb766",
       starStroke: "rgba(255, 236, 205, 0.88)",
       starGlow: "#ffe2ad",
+      spaceFog: "#1c0d12",
+      starfield: "rgba(255, 232, 214, 0.88)",
+      starfieldDim: "rgba(255, 176, 138, 0.38)",
+      objectSpecular: "#fff0e6",
+      orbitOpacity: 0.3,
+      orbitBandOpacity: 0.24,
+      selectionHalo: "rgba(255, 178, 125, 0.85)",
+      atmosphere: "rgba(255, 190, 140, 0.26)",
+      cometTail: "rgba(255, 214, 173, 0.62)",
       fontFamily: '"Segoe UI Variable", "Bahnschrift", sans-serif',
       displayFont: '"Bahnschrift", "Segoe UI Variable", sans-serif'
     }
@@ -38872,10 +38899,12 @@ void main() {
     let currentVisibleObjectIds = /* @__PURE__ */ new Set();
     let currentSelectedObjectId = null;
     let currentHoveredObjectId = null;
-    let currentTimeSeconds = 0;
     let currentPositions = /* @__PURE__ */ new Map();
     let pendingUpdate = null;
     let destroyed = false;
+    let smoothedCameraPosition = null;
+    let smoothedCameraTarget = null;
+    let currentEnvironmentKey = "";
     const objectVisuals = /* @__PURE__ */ new Map();
     const orbitVisuals = /* @__PURE__ */ new Map();
     const raycastTargets = [];
@@ -38884,7 +38913,7 @@ void main() {
         return;
       }
       const scene3d = new THREE.Scene();
-      const camera = new THREE.PerspectiveCamera(52, 1, 0.1, 2e4);
+      const camera = new THREE.PerspectiveCamera(46, 1, 0.1, 24e3);
       const renderer = new THREE.WebGLRenderer({
         antialias: true,
         alpha: true,
@@ -38894,27 +38923,40 @@ void main() {
       renderer.domElement.dataset.worldorbit3dCanvas = "true";
       root.innerHTML = "";
       root.append(renderer.domElement);
-      const ambientLight = new THREE.AmbientLight(16777215, 1.2);
-      const keyLight = new THREE.PointLight(16777215, 1.35, 0, 2);
-      scene3d.add(ambientLight);
-      scene3d.add(keyLight);
+      const ambientLight = new THREE.AmbientLight(16777215, 0.24);
+      const fillLight = new THREE.DirectionalLight(13625855, 0.36);
+      const rimLight = new THREE.DirectionalLight(8304895, 0.24);
+      const keyLight = new THREE.PointLight(16773327, 2.6, 0, 2);
+      fillLight.position.set(-360, 260, 220);
+      rimLight.position.set(340, 180, -280);
       const orbitLayer = new THREE.Group();
       const objectLayer = new THREE.Group();
+      const starfield = createStarfield(THREE, 320);
+      const raycaster = new THREE.Raycaster();
+      raycaster.params.Line = { threshold: 7 };
+      scene3d.add(ambientLight);
+      scene3d.add(fillLight);
+      scene3d.add(rimLight);
+      scene3d.add(keyLight);
+      scene3d.add(starfield);
       scene3d.add(orbitLayer);
       scene3d.add(objectLayer);
-      const raycaster = new THREE.Raycaster();
-      raycaster.params.Line = { threshold: 10 };
       runtime = {
         THREE,
         scene3d,
         camera,
         renderer,
+        ambientLight,
+        fillLight,
+        rimLight,
         keyLight,
+        starfield,
         orbitLayer,
         objectLayer,
         raycaster,
         pointer: new THREE.Vector2()
       };
+      configureRenderer(renderer, THREE, "balanced");
       if (pendingUpdate) {
         applyUpdate(pendingUpdate);
       }
@@ -38973,6 +39015,8 @@ void main() {
         destroyed = true;
         pendingUpdate = null;
         runtime?.renderer.dispose();
+        runtime?.starfield?.geometry?.dispose?.();
+        runtime?.starfield?.material?.dispose?.();
         root.remove();
         objectVisuals.clear();
         orbitVisuals.clear();
@@ -38991,7 +39035,16 @@ void main() {
       currentVisibleObjectIds = next.visibleObjectIds;
       currentSelectedObjectId = next.selectedObjectId;
       currentHoveredObjectId = next.hoveredObjectId;
-      currentTimeSeconds = next.timeSeconds;
+      configureRenderer(runtime.renderer, runtime.THREE, currentRenderOptions?.quality ?? "balanced");
+      const nextEnvironmentKey = JSON.stringify({
+        theme: currentRenderOptions?.theme ?? null,
+        quality: currentRenderOptions?.quality ?? "balanced",
+        style3d: currentRenderOptions?.style3d ?? "symbolic"
+      });
+      if (nextEnvironmentKey !== currentEnvironmentKey) {
+        updateEnvironment(runtime, currentRenderOptions);
+        currentEnvironmentKey = nextEnvironmentKey;
+      }
       if (sceneChanged) {
         rebuildScene(next.spatialScene);
       }
@@ -39001,8 +39054,9 @@ void main() {
       updateOrbitTransforms();
       updateVisibility();
       updateInteractionState();
+      updateLighting();
       updateCamera();
-      renderNow();
+      runtime.renderer.render(runtime.scene3d, runtime.camera);
     }
     function rebuildScene(spatialScene) {
       if (!runtime) {
@@ -39013,8 +39067,9 @@ void main() {
       objectVisuals.clear();
       orbitVisuals.clear();
       raycastTargets.length = 0;
+      smoothedCameraPosition = null;
+      smoothedCameraTarget = null;
       const theme = resolveTheme(currentRenderOptions?.theme);
-      runtime.scene3d.background = new runtime.THREE.Color(theme.backgroundStart);
       for (const orbit of spatialScene.orbits) {
         const visual = createOrbitVisual2(runtime.THREE, orbit, theme);
         runtime.orbitLayer.add(visual.root);
@@ -39032,10 +39087,9 @@ void main() {
       for (const object of currentScene?.objects ?? []) {
         const visual = objectVisuals.get(object.objectId);
         const position = currentPositions.get(object.objectId);
-        if (!visual || !position) {
-          continue;
+        if (visual && position) {
+          visual.root.position.set(position.x, position.y, position.z);
         }
-        visual.root.position.set(position.x, position.y, position.z);
       }
     }
     function updateOrbitTransforms() {
@@ -39056,8 +39110,7 @@ void main() {
           continue;
         }
         const hideStructure = layers.structures === false && (object.object.type === "structure" || object.object.type === "phenomenon");
-        const hideObjects = layers.objects === false;
-        visual.root.visible = !object.hidden && currentVisibleObjectIds.has(object.objectId) && !hideStructure && !hideObjects;
+        visual.root.visible = !object.hidden && currentVisibleObjectIds.has(object.objectId) && layers.objects !== false && !hideStructure;
       }
       for (const orbit of currentScene?.orbits ?? []) {
         const visual = orbitVisuals.get(orbit.objectId);
@@ -39073,14 +39126,27 @@ void main() {
         return;
       }
       for (const visual of objectVisuals.values()) {
-        applyVisualState(runtime.THREE, visual.materials, visual.baseColor, currentSelectedObjectId === visual.objectId, currentHoveredObjectId === visual.objectId);
-        const scale = currentSelectedObjectId === visual.objectId ? 1.2 : currentHoveredObjectId === visual.objectId ? 1.1 : 1;
+        const selected = currentSelectedObjectId === visual.objectId;
+        const hovered = currentHoveredObjectId === visual.objectId;
+        applyVisualState(runtime.THREE, visual.materials, selected, hovered);
+        const scale = selected ? 1.16 : hovered ? 1.08 : 1;
         visual.root.scale.set(scale, scale, scale);
+        if (visual.halo) {
+          visual.halo.visible = selected || hovered;
+        }
       }
       for (const visual of orbitVisuals.values()) {
-        applyVisualState(runtime.THREE, visual.materials, visual.baseColor, currentSelectedObjectId === visual.objectId, currentHoveredObjectId === visual.objectId);
+        applyVisualState(runtime.THREE, visual.materials, currentSelectedObjectId === visual.objectId, currentHoveredObjectId === visual.objectId);
       }
     }
+    function updateLighting() {
+      if (!runtime || !currentScene) {
+        return;
+      }
+      const primaryStar = currentScene.objects.find((object) => object.object.type === "star" && !object.hidden) ?? null;
+      const starPosition = primaryStar ? currentPositions.get(primaryStar.objectId) ?? primaryStar.position : { x: 0, y: 40, z: 0 };
+      runtime.keyLight.position.set(starPosition.x, starPosition.y + 20, starPosition.z);
+    }
     function updateCamera() {
       if (!runtime || !currentScene || !currentState) {
         return;
@@ -39088,19 +39154,27 @@ void main() {
       const sceneCamera = currentRenderOptions?.camera ?? currentScene.camera;
       const bounds = currentScene.contentBounds;
       const size = Math.max(bounds.width, bounds.depth, bounds.height, 160);
-      const yaw = degreesToRadians3((sceneCamera?.azimuth ?? 34) + currentState.rotationDeg);
-      const pitch = degreesToRadians3(clampValue(sceneCamera?.elevation ?? 24, -75, 75));
-      const zoomDistanceFactor = clampValue(2.4 / Math.max(currentState.scale, 0.1), 0.35, 8);
-      const semanticDistance = clampValue(sceneCamera?.distance ?? 6, 2, 24);
-      const distance = clampValue(size * zoomDistanceFactor * (semanticDistance / 6), 28, 8e3);
+      const yaw = degreesToRadians3((sceneCamera?.azimuth ?? 30) + currentState.rotationDeg);
+      const pitch = degreesToRadians3(clampValue(sceneCamera?.elevation ?? 22, -75, 75));
+      const zoomDistanceFactor = clampValue(2.2 / Math.max(currentState.scale, 0.1), 0.35, 7.2);
+      const semanticDistance = clampValue(sceneCamera?.distance ?? 5.4, 2, 24);
+      const distance = clampValue(size * zoomDistanceFactor * (semanticDistance / 5.4), 24, 8e3);
       const panFactor = Math.max(size / 900, 0.12);
       const target = new runtime.THREE.Vector3(bounds.center.x - currentState.translateX * panFactor, bounds.center.y, bounds.center.z - currentState.translateY * panFactor);
-      runtime.camera.position.set(target.x + distance * Math.cos(pitch) * Math.sin(yaw), target.y + distance * Math.sin(pitch), target.z + distance * Math.cos(pitch) * Math.cos(yaw));
-      runtime.camera.lookAt(target);
+      const desiredPosition = new runtime.THREE.Vector3(target.x + distance * Math.cos(pitch) * Math.sin(yaw), target.y + distance * Math.sin(pitch), target.z + distance * Math.cos(pitch) * Math.cos(yaw));
+      const smoothing = (currentRenderOptions?.style3d ?? "symbolic") === "cinematic" ? 0.16 : 0.32;
+      if (!smoothedCameraPosition || !smoothedCameraTarget) {
+        smoothedCameraPosition = desiredPosition.clone();
+        smoothedCameraTarget = target.clone();
+      } else {
+        smoothedCameraPosition.lerp(desiredPosition, smoothing);
+        smoothedCameraTarget.lerp(target, smoothing);
+      }
+      runtime.camera.position.copy(smoothedCameraPosition);
+      runtime.camera.lookAt(smoothedCameraTarget);
       if (sceneCamera?.roll) {
         runtime.camera.rotation.z = degreesToRadians3(sceneCamera.roll);
       }
-      runtime.keyLight.position.copy(runtime.camera.position);
     }
     function resizeRenderer(spatialScene) {
       if (!runtime) {
@@ -39112,35 +39186,63 @@ void main() {
       runtime.camera.aspect = width / height;
       runtime.camera.updateProjectionMatrix();
     }
-    function renderNow() {
-      if (!runtime) {
-        return;
-      }
-      runtime.renderer.render(runtime.scene3d, runtime.camera);
-    }
   }
   function createObjectVisual(THREE, object, theme) {
     const root = new THREE.Group();
     root.userData.objectId = object.objectId;
     const baseColor = object.fillColor ?? colorForObject(object);
-    const material = new THREE.MeshPhongMaterial({
-      color: baseColor,
-      emissive: object.object.type === "star" ? new THREE.Color(theme.starGlow) : new THREE.Color(0),
-      emissiveIntensity: object.object.type === "star" ? 0.6 : 0.08,
-      transparent: true,
-      opacity: object.object.type === "phenomenon" ? 0.7 : 1
-    });
-    const geometry = geometryForObject(THREE, object);
-    const body = new THREE.Mesh(geometry, material);
+    const materials = [];
+    const bodyMaterial = materialForObject(THREE, object, baseColor, theme);
+    const body = new THREE.Mesh(geometryForObject(THREE, object), bodyMaterial.material);
     body.userData.objectId = object.objectId;
     root.add(body);
-    return {
-      objectId: object.objectId,
-      root,
-      body,
-      materials: [material],
-      baseColor
-    };
+    materials.push(bodyMaterial);
+    if (shouldRenderAtmosphere(object)) {
+      const atmosphereMaterial = {
+        material: new THREE.MeshBasicMaterial({
+          color: theme.atmosphere,
+          transparent: true,
+          opacity: 0.24,
+          depthWrite: false,
+          side: 2
+        }),
+        baseColor: theme.atmosphere,
+        baseOpacity: 0.24,
+        hoveredOpacity: 0.34,
+        selectedOpacity: 0.42
+      };
+      const atmosphere = new THREE.Mesh(new THREE.SphereGeometry(Math.max(object.visualRadius, 2) * 1.16, 20, 14), atmosphereMaterial.material);
+      atmosphere.userData.objectId = object.objectId;
+      root.add(atmosphere);
+      materials.push(atmosphereMaterial);
+    }
+    if (object.object.type === "comet") {
+      const tailMaterial = {
+        material: new THREE.MeshBasicMaterial({
+          color: theme.cometTail,
+          transparent: true,
+          opacity: 0.36,
+          depthWrite: false
+        }),
+        baseColor: theme.cometTail,
+        baseOpacity: 0.36,
+        hoveredOpacity: 0.48,
+        selectedOpacity: 0.56
+      };
+      const tail = new THREE.Mesh(new THREE.ConeGeometry(Math.max(object.visualRadius * 0.55, 2), Math.max(object.visualRadius * 2.8, 8), 12, 1, true), tailMaterial.material);
+      tail.position.set(-Math.max(object.visualRadius * 1.4, 4), 0, 0);
+      tail.rotation.z = -Math.PI / 2;
+      tail.userData.objectId = object.objectId;
+      root.add(tail);
+      materials.push(tailMaterial);
+    }
+    const halo = createHalo(THREE, object, theme);
+    if (halo) {
+      halo.visible = false;
+      halo.userData.objectId = object.objectId;
+      root.add(halo);
+    }
+    return { objectId: object.objectId, root, halo, materials };
   }
   function createOrbitVisual2(THREE, orbit, theme) {
     const root = new THREE.Group();
@@ -39148,60 +39250,174 @@ void main() {
     root.rotation.y = degreesToRadians3(orbit.rotationDeg);
     root.rotation.x = degreesToRadians3(orbit.inclinationDeg);
     const baseColor = orbit.object.properties.color ?? theme.orbit;
-    const materials = [];
     if (orbit.band) {
-      const material = new THREE.MeshBasicMaterial({
-        color: baseColor,
-        transparent: true,
-        opacity: 0.42,
-        side: 2
-      });
-      const geometry = bandGeometryForOrbit(THREE, orbit);
-      const mesh = new THREE.Mesh(geometry, material);
+      const material2 = {
+        material: new THREE.MeshBasicMaterial({
+          color: baseColor,
+          transparent: true,
+          opacity: theme.orbitBandOpacity,
+          side: 2,
+          depthWrite: false
+        }),
+        baseColor,
+        baseOpacity: theme.orbitBandOpacity,
+        hoveredOpacity: Math.min(theme.orbitBandOpacity + 0.1, 0.58),
+        selectedOpacity: Math.min(theme.orbitBandOpacity + 0.18, 0.72),
+        hoveredColor: theme.accent,
+        selectedColor: theme.accentStrong
+      };
+      const mesh = new THREE.Mesh(bandGeometryForOrbit(THREE, orbit), material2.material);
       mesh.userData.objectId = orbit.objectId;
       root.add(mesh);
-      materials.push(material);
-    } else {
-      const material = new THREE.LineBasicMaterial({
+      return { objectId: orbit.objectId, root, materials: [material2] };
+    }
+    const material = {
+      material: new THREE.LineBasicMaterial({
         color: baseColor,
         transparent: true,
-        opacity: 0.55
-      });
-      const points = sampleOrbitPoints(THREE, orbit);
-      const geometry = new THREE.BufferGeometry().setFromPoints(points);
-      const line = new THREE.LineLoop(geometry, material);
-      line.userData.objectId = orbit.objectId;
-      root.add(line);
-      materials.push(material);
-    }
+        opacity: theme.orbitOpacity
+      }),
+      baseColor,
+      baseOpacity: theme.orbitOpacity,
+      hoveredOpacity: Math.min(theme.orbitOpacity + 0.18, 0.72),
+      selectedOpacity: Math.min(theme.orbitOpacity + 0.3, 0.88),
+      hoveredColor: theme.accent,
+      selectedColor: theme.accentStrong
+    };
+    const geometry = new THREE.BufferGeometry().setFromPoints(sampleOrbitPoints(THREE, orbit, 120));
+    const line = new THREE.LineLoop(geometry, material.material);
+    line.userData.objectId = orbit.objectId;
+    root.add(line);
+    return { objectId: orbit.objectId, root, materials: [material] };
+  }
+  function materialForObject(THREE, object, baseColor, theme) {
+    if (object.object.type === "star") {
+      return {
+        material: new THREE.MeshStandardMaterial({
+          color: baseColor,
+          emissive: new THREE.Color(theme.starGlow),
+          emissiveIntensity: 1.2,
+          roughness: 0.35,
+          metalness: 0.02
+        }),
+        baseColor,
+        baseOpacity: 1,
+        hoveredOpacity: 1,
+        selectedOpacity: 1,
+        hoveredColor: theme.starCore,
+        selectedColor: "#fff2c4",
+        baseEmissive: theme.starGlow,
+        hoveredEmissive: theme.starGlow,
+        selectedEmissive: "#fff6cc",
+        baseEmissiveIntensity: 1.2,
+        hoveredEmissiveIntensity: 1.5,
+        selectedEmissiveIntensity: 1.8
+      };
+    }
+    if (object.object.type === "phenomenon") {
+      return {
+        material: new THREE.MeshPhongMaterial({
+          color: baseColor,
+          transparent: true,
+          opacity: 0.7,
+          emissive: new THREE.Color(baseColor),
+          emissiveIntensity: 0.32,
+          shininess: 90
+        }),
+        baseColor,
+        baseOpacity: 0.7,
+        hoveredOpacity: 0.82,
+        selectedOpacity: 0.9,
+        hoveredColor: theme.accent,
+        selectedColor: theme.selectionHalo,
+        baseEmissive: baseColor,
+        hoveredEmissive: theme.accent,
+        selectedEmissive: theme.selectionHalo,
+        baseEmissiveIntensity: 0.32,
+        hoveredEmissiveIntensity: 0.52,
+        selectedEmissiveIntensity: 0.74
+      };
+    }
+    const shininess = object.object.type === "structure" ? 70 : object.object.type === "ring" ? 42 : object.object.type === "belt" ? 26 : 36;
     return {
-      objectId: orbit.objectId,
-      root,
-      materials,
-      baseColor
+      material: new THREE.MeshPhongMaterial({
+        color: baseColor,
+        specular: new THREE.Color(theme.objectSpecular),
+        shininess,
+        transparent: false,
+        opacity: 1,
+        emissive: new THREE.Color(0),
+        emissiveIntensity: 0.02
+      }),
+      baseColor,
+      baseOpacity: 1,
+      hoveredOpacity: 1,
+      selectedOpacity: 1,
+      hoveredColor: shiftColorLightness(THREE, baseColor, 0.08),
+      selectedColor: shiftColorLightness(THREE, baseColor, 0.16),
+      hoveredEmissive: "#8fcaff",
+      selectedEmissive: theme.selectionHalo,
+      baseEmissiveIntensity: 0.02,
+      hoveredEmissiveIntensity: 0.12,
+      selectedEmissiveIntensity: 0.22
     };
   }
   function geometryForObject(THREE, object) {
     const radius = Math.max(object.visualRadius, 2);
     switch (object.object.type) {
       case "star":
-        return new THREE.SphereGeometry(radius * 1.12, 28, 20);
+        return new THREE.SphereGeometry(radius * 1.14, 34, 24);
       case "structure":
-        return new THREE.BoxGeometry(radius * 1.5, radius * 1.5, radius * 1.5);
+        return geometryForStructure(THREE, object, radius);
       case "phenomenon":
-        return new THREE.OctahedronGeometry(radius * 1.25, 0);
+        return new THREE.IcosahedronGeometry(radius * 1.12, 1);
       case "belt":
+        return new THREE.TorusGeometry(Math.max(radius * 1.15, 4), Math.max(radius * 0.28, 1), 10, 24);
       case "ring":
-        return new THREE.OctahedronGeometry(Math.max(radius * 0.85, 3), 0);
+        return new THREE.TorusGeometry(Math.max(radius, 4), Math.max(radius * 0.18, 0.8), 10, 30);
+      case "asteroid":
+        return new THREE.DodecahedronGeometry(radius, 0);
+      case "comet":
+        return new THREE.SphereGeometry(radius * 0.94, 18, 14);
       default:
-        return new THREE.SphereGeometry(radius, 20, 14);
+        return new THREE.SphereGeometry(radius, 24, 18);
+    }
+  }
+  function geometryForStructure(THREE, object, radius) {
+    const kind = String(object.object.properties.kind ?? "").toLowerCase();
+    if (kind.includes("relay")) {
+      return new THREE.OctahedronGeometry(radius * 1.15, 0);
+    }
+    if (kind.includes("elevator") || kind.includes("skyhook")) {
+      return new THREE.CylinderGeometry(radius * 0.36, radius * 0.52, radius * 2.4, 10);
+    }
+    if (kind.includes("station")) {
+      return new THREE.TorusKnotGeometry(radius * 0.6, Math.max(radius * 0.18, 0.6), 42, 8);
     }
+    return new THREE.BoxGeometry(radius * 1.45, radius * 1.2, radius * 1.45);
+  }
+  function createHalo(THREE, object, theme) {
+    const radius = Math.max(object.visualRadius, 2);
+    const geometry = object.object.type === "structure" ? new THREE.BoxGeometry(radius * 2.2, radius * 2.2, radius * 2.2) : new THREE.SphereGeometry(radius * 1.38, 18, 14);
+    return new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
+      color: theme.selectionHalo,
+      transparent: true,
+      opacity: 0.18,
+      depthWrite: false,
+      side: 1
+    }));
+  }
+  function shouldRenderAtmosphere(object) {
+    if (object.object.type !== "planet" && object.object.type !== "moon") {
+      return false;
+    }
+    return object.object.properties.atmosphere !== void 0;
   }
   function bandGeometryForOrbit(THREE, orbit) {
     const thickness = Math.max(orbit.bandThickness ?? 8, 3);
     const points = sampleOrbitPoints(THREE, orbit, 72);
     const curve = new THREE.CatmullRomCurve3(points, true);
-    return new THREE.TubeGeometry(curve, 128, thickness * 0.28, 10, true);
+    return new THREE.TubeGeometry(curve, 144, thickness * 0.18, 10, true);
   }
   function sampleOrbitPoints(THREE, orbit, segments = 96) {
     const points = [];
@@ -39213,6 +39429,94 @@ void main() {
     }
     return points;
   }
+  function createStarfield(THREE, count) {
+    const geometry = new THREE.BufferGeometry();
+    const positions = new Float32Array(count * 3);
+    const colors = new Float32Array(count * 3);
+    for (let index = 0; index < count; index += 1) {
+      const offset = index * 3;
+      const radius = 1800 + Math.random() * 2600;
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.acos(2 * Math.random() - 1);
+      positions[offset] = radius * Math.sin(phi) * Math.cos(theta);
+      positions[offset + 1] = radius * Math.cos(phi) * 0.45;
+      positions[offset + 2] = radius * Math.sin(phi) * Math.sin(theta);
+    }
+    geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+    geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+    return new THREE.Points(geometry, new THREE.PointsMaterial({
+      size: 5,
+      transparent: true,
+      opacity: 0.84,
+      depthWrite: false,
+      vertexColors: true,
+      sizeAttenuation: true
+    }));
+  }
+  function configureRenderer(renderer, THREE, quality) {
+    const pixelRatioCap = quality === "high" ? 2.4 : quality === "low" ? 1.2 : 1.8;
+    renderer.setPixelRatio?.(Math.min(globalThis.window?.devicePixelRatio ?? 1, pixelRatioCap));
+    if ("outputColorSpace" in renderer && "SRGBColorSpace" in THREE) {
+      renderer.outputColorSpace = THREE.SRGBColorSpace;
+    } else if ("outputEncoding" in renderer && "sRGBEncoding" in THREE) {
+      renderer.outputEncoding = THREE.sRGBEncoding;
+    }
+    if ("ACESFilmicToneMapping" in THREE) {
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    }
+  }
+  function updateEnvironment(runtime, renderOptions) {
+    const theme = resolveTheme(renderOptions?.theme);
+    const quality = renderOptions?.quality ?? "balanced";
+    const style3d = renderOptions?.style3d ?? "symbolic";
+    const count = quality === "high" ? 520 : quality === "low" ? 180 : 320;
+    const positions = new Float32Array(count * 3);
+    const colors = new Float32Array(count * 3);
+    const bright = new runtime.THREE.Color(theme.starfield);
+    const dim = new runtime.THREE.Color(theme.starfieldDim);
+    for (let index = 0; index < count; index += 1) {
+      const offset = index * 3;
+      const radius = 1800 + Math.random() * 2600;
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.acos(2 * Math.random() - 1);
+      positions[offset] = radius * Math.sin(phi) * Math.cos(theta);
+      positions[offset + 1] = radius * Math.cos(phi) * 0.45;
+      positions[offset + 2] = radius * Math.sin(phi) * Math.sin(theta);
+      const color = Math.random() > 0.72 ? bright : dim;
+      colors[offset] = color.r;
+      colors[offset + 1] = color.g;
+      colors[offset + 2] = color.b;
+    }
+    runtime.scene3d.background = new runtime.THREE.Color(theme.backgroundStart);
+    runtime.scene3d.fog = new runtime.THREE.FogExp2(theme.spaceFog, 85e-5);
+    runtime.ambientLight.intensity = style3d === "cinematic" ? 0.18 : 0.26;
+    runtime.fillLight.intensity = style3d === "cinematic" ? 0.32 : 0.4;
+    runtime.rimLight.intensity = style3d === "cinematic" ? 0.28 : 0.22;
+    runtime.renderer.toneMappingExposure = style3d === "cinematic" ? 1.18 : 1.08;
+    runtime.starfield.geometry.setAttribute("position", new runtime.THREE.BufferAttribute(positions, 3));
+    runtime.starfield.geometry.setAttribute("color", new runtime.THREE.BufferAttribute(colors, 3));
+    runtime.starfield.material.opacity = quality === "high" ? 0.96 : quality === "low" ? 0.72 : 0.84;
+    runtime.starfield.material.size = quality === "high" ? 5.5 : quality === "low" ? 4.25 : 5;
+  }
+  function applyVisualState(THREE, materials, selected, hovered) {
+    for (const entry of materials) {
+      const material = entry.material;
+      if (!material) {
+        continue;
+      }
+      const color = selected ? entry.selectedColor ?? entry.baseColor : hovered ? entry.hoveredColor ?? entry.baseColor : entry.baseColor;
+      material.color?.set?.(new THREE.Color(color));
+      if (typeof material.opacity === "number") {
+        material.opacity = selected ? entry.selectedOpacity : hovered ? entry.hoveredOpacity : entry.baseOpacity;
+        material.transparent = material.opacity < 0.999;
+      }
+      const emissive = selected ? entry.selectedEmissive ?? entry.baseEmissive : hovered ? entry.hoveredEmissive ?? entry.baseEmissive : entry.baseEmissive;
+      material.emissive?.set?.(emissive ? new THREE.Color(emissive) : new THREE.Color(0));
+      if ("emissiveIntensity" in material) {
+        material.emissiveIntensity = selected ? entry.selectedEmissiveIntensity ?? entry.baseEmissiveIntensity ?? 0 : hovered ? entry.hoveredEmissiveIntensity ?? entry.baseEmissiveIntensity ?? 0 : entry.baseEmissiveIntensity ?? 0;
+      }
+    }
+  }
   function colorForObject(object) {
     switch (object.object.type) {
       case "star":
@@ -39235,35 +39539,23 @@ void main() {
         return "#b8f2ff";
     }
   }
-  function applyVisualState(THREE, materials, baseColor, selected, hovered) {
-    const color = new THREE.Color(baseColor);
-    if (selected) {
-      color.offsetHSL(0, 0, 0.16);
-    } else if (hovered) {
-      color.offsetHSL(0, 0, 0.08);
-    }
-    for (const material of materials) {
-      if (!material) {
-        continue;
-      }
-      material.color?.set?.(color);
-      if (typeof material.opacity === "number") {
-        material.opacity = selected ? 0.85 : hovered ? 0.72 : material.transparent ? 0.55 : 1;
-      }
-      material.emissive?.set?.(selected ? new THREE.Color("#ffdda9") : hovered ? new THREE.Color("#cfe9ff") : new THREE.Color(0));
-      material.emissiveIntensity = selected ? 0.28 : hovered ? 0.14 : material.emissiveIntensity ?? 0.08;
-    }
+  function shiftColorLightness(THREE, colorValue, delta) {
+    const color = new THREE.Color(colorValue);
+    color.offsetHSL(0, 0, delta);
+    return `#${color.getHexString()}`;
   }
   function clearGroup(group) {
     while (group.children.length > 0) {
       const child = group.children[0];
       group.remove(child);
-      child.geometry?.dispose?.();
-      if (Array.isArray(child.material)) {
-        child.material.forEach((entry) => entry?.dispose?.());
-      } else {
-        child.material?.dispose?.();
-      }
+      child.traverse?.((node) => {
+        node.geometry?.dispose?.();
+        if (Array.isArray(node.material)) {
+          node.material.forEach((entry) => entry?.dispose?.());
+        } else {
+          node.material?.dispose?.();
+        }
+      });
     }
   }
   function ensureWebGLSupport() {
@@ -39527,6 +39819,8 @@ void main() {
       preset: options.preset,
       projection: options.projection,
       viewMode: options.viewMode ?? "2d",
+      quality: options.quality ?? "balanced",
+      style3d: options.style3d ?? "symbolic",
       camera: options.camera ? { ...options.camera } : null,
       scaleModel: options.scaleModel ? { ...options.scaleModel } : void 0,
       theme: options.theme,
@@ -40710,6 +41004,9 @@ void main() {
           if (label.hidden || !visibleObjectIds.has(label.objectId)) {
             continue;
           }
+          if (is3DView() && !shouldRender3DLabel(label.objectId, visibleObjectIds)) {
+            continue;
+          }
           const point = is3DView() ? runtime3d?.projectObjectToContainer(label.objectId) ?? null : project2DScenePointToContainer({ x: label.x, y: label.y });
           if (!point) {
             continue;
@@ -40749,6 +41046,40 @@ void main() {
     function isEventVisible(event, visibleObjectIds) {
       return event.objectIds.some((objectId) => visibleObjectIds.has(objectId));
     }
+    function shouldRender3DLabel(objectId, visibleObjectIds) {
+      if (!is3DView()) {
+        return true;
+      }
+      if (objectId === state.selectedObjectId || objectId === hoveredObjectId) {
+        return true;
+      }
+      const object = getObjectById(objectId);
+      if (!object || object.hidden || !visibleObjectIds.has(objectId)) {
+        return false;
+      }
+      if (object.object.type === "star") {
+        return true;
+      }
+      const selected = state.selectedObjectId ? buildObjectDetails(state.selectedObjectId) : null;
+      const hovered = hoveredObjectId ? buildObjectDetails(hoveredObjectId) : null;
+      const selectedFocus = selected ? /* @__PURE__ */ new Set([
+        selected.objectId,
+        ...selected.renderObject.ancestorIds,
+        ...selected.renderObject.childIds
+      ]) : null;
+      const hoveredFocus = hovered ? /* @__PURE__ */ new Set([
+        hovered.objectId,
+        ...hovered.renderObject.ancestorIds,
+        ...hovered.renderObject.childIds
+      ]) : null;
+      if (selectedFocus?.has(objectId) || hoveredFocus?.has(objectId)) {
+        return true;
+      }
+      if (object.semanticGroupIds.length > 0 && object.visualRadius >= 12) {
+        return true;
+      }
+      return object.childIds.length > 0 && object.visualRadius >= 10;
+    }
     function createScreenLabelElement(descriptor) {
       const element = document.createElement("div");
       element.className = `wo-viewer-label wo-viewer-label-${descriptor.kind}`;
@@ -40885,7 +41216,9 @@ void main() {
       layers: renderOptions.layers ? { ...renderOptions.layers } : void 0,
       theme: renderOptions.theme && typeof renderOptions.theme === "object" ? { ...renderOptions.theme } : renderOptions.theme,
       activeEventId: renderOptions.activeEventId ?? null,
-      viewMode: renderOptions.viewMode ?? "2d"
+      viewMode: renderOptions.viewMode ?? "2d",
+      quality: renderOptions.quality ?? "balanced",
+      style3d: renderOptions.style3d ?? "symbolic"
     };
   }
   function mergeRenderOptions(current, next) {
@@ -40903,7 +41236,9 @@ void main() {
         ...next.layers
       } : current.layers ? { ...current.layers } : void 0,
       theme: next.theme && typeof next.theme === "object" ? { ...next.theme } : next.theme ?? current.theme,
-      viewMode: next.viewMode ?? current.viewMode ?? "2d"
+      viewMode: next.viewMode ?? current.viewMode ?? "2d",
+      quality: next.quality ?? current.quality ?? "balanced",
+      style3d: next.style3d ?? current.style3d ?? "symbolic"
     };
   }
   function hasSceneAffectingRenderOptions(options) {
@@ -41117,6 +41452,10 @@ void main() {
       position: absolute;
       display: grid;
       gap: 2px;
+      padding: 4px 8px;
+      border-radius: 999px;
+      background: linear-gradient(180deg, rgba(5, 16, 26, 0.72), rgba(5, 16, 26, 0.38));
+      border: 1px solid rgba(164, 194, 228, 0.16);
       color: #edf6ff;
       font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
       line-height: 1.15;