feat: refactor FarFieldViewport and introduce VehicleMesh component for improved rendering

Author: sakobu

rpo-app/src/viewport3d/far-field/FarFieldViewport.tsx

@@ -1,21 +1,14 @@
-import { useMemo } from 'react';
 import { OrbitControls } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
 import { useShallow } from 'zustand/react/shallow';
 
-import { type Vehicle, VEHICLE_LABELS } from '@/domain/vehicle';
 import { PRESETS, type SpacecraftConfig } from '@/schemas/spacecraft';
 import type { StateVectorInput } from '@/schemas/stateVector';
 import { useConfig, type VehicleStateSlot } from '@/stores/configuration';
-import { configToSpacecraftProps, Spacecraft, TINTS } from '@/viewport3d/spacecraft';
 
-import {
-  FARFIELD_LABEL_FONT_SIZE,
-  FARFIELD_LABEL_OFFSET_Y,
-  FARFIELD_SPACECRAFT_SCALE,
-} from './constants';
-import { eciKmToScenePosition } from './coordinates';
 import Earth from './Earth';
+import { computeCameraPos, computeEraRad, computeSunScenePos, FALLBACK_LIGHT_POS } from './scene';
+import VehicleMesh from './VehicleMesh';
 
 const FALLBACK_CONFIG: SpacecraftConfig = {
   preset: 'Servicer 500kg',
@@ -26,33 +19,6 @@ function loadedVector(slot: VehicleStateSlot): StateVectorInput | null {
   return slot.status === 'loaded' ? slot.vector : null;
 }
 
-function VehicleMesh({
-  vehicle,
-  config,
-  vector,
-}: {
-  vehicle: Vehicle;
-  config: SpacecraftConfig;
-  vector: StateVectorInput;
-}) {
-  const props = useMemo(() => configToSpacecraftProps(config, vehicle), [config, vehicle]);
-  const position = useMemo(
-    () => eciKmToScenePosition(vector.position_eci_km),
-    [vector.position_eci_km],
-  );
-  return (
-    <Spacecraft
-      {...props}
-      position={position}
-      scale={FARFIELD_SPACECRAFT_SCALE}
-      label={VEHICLE_LABELS[vehicle]}
-      labelColor={TINTS[vehicle].accent}
-      labelFontSize={FARFIELD_LABEL_FONT_SIZE}
-      labelOffsetY={FARFIELD_LABEL_OFFSET_Y}
-    />
-  );
-}
-
 export default function FarFieldViewport() {
   const { chiefConfig, deputyConfig, chiefState, deputyState } = useConfig(
     useShallow((s) => ({
@@ -66,13 +32,19 @@ export default function FarFieldViewport() {
   const chiefVector = loadedVector(chiefState);
   const deputyVector = loadedVector(deputyState);
 
+  const epoch = chiefVector?.epoch ?? deputyVector?.epoch ?? null;
+  const eraRad = epoch === null ? 0 : computeEraRad(epoch);
+  const sunScenePos = epoch === null ? FALLBACK_LIGHT_POS : computeSunScenePos(epoch);
+  // OrbitControls owns the camera after first render; remount to re-apply.
+  const cameraPos = computeCameraPos(chiefVector, deputyVector);
+
   return (
     <div className="h-full w-full">
-      <Canvas camera={{ position: [0, 0, 6], fov: 50, near: 0.1, far: 100 }} dpr={[1, 2]}>
+      <Canvas camera={{ position: cameraPos, fov: 50, near: 0.1, far: 100 }} dpr={[1, 2]}>
         <ambientLight intensity={0.35} />
         <hemisphereLight args={['#8aa0c0', '#1a1f2c', 0.4]} />
-        <directionalLight position={[10, 5, 10]} intensity={1.0} />
-        <Earth />
+        <directionalLight position={sunScenePos} intensity={1.0} />
+        <Earth rotationY={eraRad} />
         {chiefVector && <VehicleMesh vehicle="chief" config={chiefConfig} vector={chiefVector} />}
         {deputyVector && (
           <VehicleMesh vehicle="deputy" config={deputyConfig} vector={deputyVector} />

rpo-app/src/viewport3d/far-field/VehicleMesh.tsx

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+
+import { type Vehicle, VEHICLE_LABELS } from '@/domain/vehicle';
+import type { SpacecraftConfig } from '@/schemas/spacecraft';
+import type { StateVectorInput } from '@/schemas/stateVector';
+import { configToSpacecraftProps, Spacecraft, TINTS } from '@/viewport3d/spacecraft';
+
+import {
+  FARFIELD_LABEL_FONT_SIZE,
+  FARFIELD_LABEL_OFFSET_Y,
+  FARFIELD_SPACECRAFT_SCALE,
+} from './constants';
+import { eciKmToScenePosition } from './coordinates';
+
+type Props = {
+  vehicle: Vehicle;
+  config: SpacecraftConfig;
+  vector: StateVectorInput;
+};
+
+export default function VehicleMesh({ vehicle, config, vector }: Props) {
+  const props = useMemo(() => configToSpacecraftProps(config, vehicle), [config, vehicle]);
+  const position = useMemo(
+    () => eciKmToScenePosition(vector.position_eci_km),
+    [vector.position_eci_km],
+  );
+  return (
+    <Spacecraft
+      {...props}
+      position={position}
+      scale={FARFIELD_SPACECRAFT_SCALE}
+      label={VEHICLE_LABELS[vehicle]}
+      labelColor={TINTS[vehicle].accent}
+      labelFontSize={FARFIELD_LABEL_FONT_SIZE}
+      labelOffsetY={FARFIELD_LABEL_OFFSET_Y}
+    />
+  );
+}

rpo-app/src/viewport3d/far-field/constants.ts

@@ -29,3 +29,7 @@ export const TEXTURE_PATHS = {
   normal: '/textures/earth/earth_normal.jpg',
   specular: '/textures/earth/earth_specular.jpg',
 } as const;
+
+// Offset to absorb Three.js SphereGeometry UV seam shift if a future texture
+// swap introduces one; keep at 0 otherwise.
+export const EARTH_TEXTURE_LON_OFFSET_RAD = 0;

rpo-app/src/viewport3d/far-field/coordinates.ts

@@ -14,3 +14,17 @@ export const SCENE_UNITS_PER_KM = EARTH_RADIUS / EARTH_RADIUS_KM;
 export function eciKmToScenePosition([x_km, y_km, z_km]: Vec3): Vec3 {
   return [x_km * SCENE_UNITS_PER_KM, z_km * SCENE_UNITS_PER_KM, -y_km * SCENE_UNITS_PER_KM];
 }
+
+// Same axis swap as eciKmToScenePosition; caller wraps in ERA-rotated group.
+export function ecefKmToScenePosition(r_ecef_km: Vec3): Vec3 {
+  return eciKmToScenePosition(r_ecef_km);
+}
+
+// Normalize, apply scene axis swap, and place on a sphere of `distance` scene
+// units — used as a parallel-light source point.
+export function scaleToSceneFar([x, y, z]: Vec3, distance = 20): Vec3 {
+  const norm = Math.hypot(x, y, z);
+  if (norm === 0) return [distance, 0, 0];
+  const s = distance / norm;
+  return [x * s, z * s, -y * s];
+}

rpo-app/src/viewport3d/far-field/scene.ts

@@ -0,0 +1,47 @@
+import { match } from '@railway-ts/pipelines/result';
+
+import type { StateVectorInput } from '@/schemas/stateVector';
+import type { Vec3 } from '@/viewport3d/types';
+import { earthRotationAngleRad, sunPositionEciKm } from '@/wasm/earth';
+
+import { EARTH_TEXTURE_LON_OFFSET_RAD } from './constants';
+import { eciKmToScenePosition, scaleToSceneFar } from './coordinates';
+
+export const FALLBACK_LIGHT_POS: Vec3 = scaleToSceneFar([10, 5, 10]);
+
+// ~3× Earth radius, sized to fill ~2/3 of frame.
+export const CAMERA_DISTANCE_SCENE = 6;
+export const DEFAULT_CAMERA_POS: Vec3 = [0, 0, CAMERA_DISTANCE_SCENE];
+
+export function computeEraRad(epoch: string): number {
+  return match(earthRotationAngleRad(epoch), {
+    ok: (v) => v + EARTH_TEXTURE_LON_OFFSET_RAD,
+    err: () => 0,
+  });
+}
+
+export function computeSunScenePos(epoch: string): Vec3 {
+  return match(sunPositionEciKm(epoch), {
+    ok: (eciKm) => scaleToSceneFar(eciKm),
+    err: () => FALLBACK_LIGHT_POS,
+  });
+}
+
+export function computeCameraPos(
+  chief: StateVectorInput | null,
+  deputy: StateVectorInput | null,
+): Vec3 {
+  const sources = [chief, deputy].filter((v): v is StateVectorInput => v !== null);
+  if (sources.length === 0) return DEFAULT_CAMERA_POS;
+  const mean: Vec3 = [0, 0, 0];
+  for (const v of sources) {
+    const scenePos = eciKmToScenePosition(v.position_eci_km);
+    mean[0] += scenePos[0];
+    mean[1] += scenePos[1];
+    mean[2] += scenePos[2];
+  }
+  const norm = Math.hypot(mean[0], mean[1], mean[2]);
+  if (norm === 0) return DEFAULT_CAMERA_POS;
+  const s = CAMERA_DISTANCE_SCENE / norm;
+  return [mean[0] * s, mean[1] * s, mean[2] * s];
+}

rpo-app/src/wasm/earth.ts

@@ -0,0 +1,51 @@
+import type { Result } from '@railway-ts/pipelines/result';
+
+import type { EcefState, GeodeticCoord, StateVector, Vec3, WasmError } from 'rpo-wasm';
+import {
+  earth_rotation_angle_rad,
+  ecef_to_eci_position_km,
+  ecef_to_geodetic,
+  eci_to_ecef_position_km,
+  eci_to_ecef_state,
+  geodetic_to_ecef_km,
+  moon_position_eci_km,
+  sun_position_eci_km,
+} from 'rpo-wasm';
+
+import { callWasm } from './error';
+
+export function earthRotationAngleRad(epoch: string): Result<number, WasmError> {
+  return callWasm(() => earth_rotation_angle_rad(epoch));
+}
+
+export function sunPositionEciKm(epoch: string): Result<Vec3, WasmError> {
+  return callWasm(() => sun_position_eci_km(epoch));
+}
+
+export function moonPositionEciKm(epoch: string): Result<Vec3, WasmError> {
+  return callWasm(() => moon_position_eci_km(epoch));
+}
+
+export function eciToEcefPositionKm(rEciKm: Vec3, epoch: string): Result<Vec3, WasmError> {
+  return callWasm(() => eci_to_ecef_position_km(rEciKm, epoch));
+}
+
+export function ecefToEciPositionKm(rEcefKm: Vec3, epoch: string): Result<Vec3, WasmError> {
+  return callWasm(() => ecef_to_eci_position_km(rEcefKm, epoch));
+}
+
+export function eciToEcefState(state: StateVector): Result<EcefState, WasmError> {
+  return callWasm(() => eci_to_ecef_state(state));
+}
+
+export function geodeticToEcefKm(
+  latitudeRad: number,
+  longitudeRad: number,
+  altitudeKm: number,
+): Result<Vec3, WasmError> {
+  return callWasm(() => geodetic_to_ecef_km(latitudeRad, longitudeRad, altitudeKm));
+}
+
+export function ecefToGeodetic(rEcefKm: Vec3): Result<GeodeticCoord, WasmError> {
+  return callWasm(() => ecef_to_geodetic(rEcefKm));
+}