From 5bbcb2c850616688cd8b60c2bcca7bfb96a4c05c Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Mon, 13 Apr 2026 14:11:18 +0200
Subject: [PATCH] Remove unused background overlay and update tests

---
 src/app/app.css                              |  7 --
 src/runner-web/RunnerCanvas.tsx              | 51 --------------
 tests/unit/runner-canvas.test.tsx            |  6 +-
 tests/unit/world-background-renderer.test.ts | 73 ++++++++++++++++++++
 4 files changed, 77 insertions(+), 60 deletions(-)
 create mode 100644 tests/unit/world-background-renderer.test.ts

diff --git a/src/app/app.css b/src/app/app.css
index c67f54b3..b80d3b33 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -1258,13 +1258,6 @@ button:disabled {
   pointer-events: auto;
 }
 
-.runner-canvas__background-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-}
-
 .runner-canvas__loading-overlay--hidden {
   opacity: 0;
   visibility: hidden;
diff --git a/src/runner-web/RunnerCanvas.tsx b/src/runner-web/RunnerCanvas.tsx
index e7d3c772..5b5c7777 100644
--- a/src/runner-web/RunnerCanvas.tsx
+++ b/src/runner-web/RunnerCanvas.tsx
@@ -15,14 +15,12 @@ import type { RuntimeInteractionPrompt } from "../runtime-three/runtime-interact
 import {
   areRuntimeClockStatesEqual,
   createRuntimeClockState,
-  resolveRuntimeDayNightWorldState,
   type RuntimeClockState
 } from "../runtime-three/runtime-project-time";
 import type {
   RuntimeNavigationMode,
   RuntimeSceneDefinition
 } from "../runtime-three/runtime-scene-build";
-import { createWorldBackgroundStyle } from "../shared-ui/world-background-style";
 
 const FORWARD_RUNTIME_CLOCK_INTERVAL_MS = 240;
 
@@ -73,28 +71,13 @@ export function RunnerCanvas({
     useState<RuntimeInteractionPrompt | null>(null);
   const [firstPersonTelemetry, setFirstPersonTelemetry] =
     useState<FirstPersonTelemetry | null>(null);
-  const [visualRuntimeClock, setVisualRuntimeClock] = useState(runtimeClock);
   const overlayMessage = runnerMessage ?? sceneLoadState.message;
   const overlayStatus =
     overlayMessage !== null ? "error" : sceneLoadState.status;
   const runnerReady = overlayStatus === "ready";
-  const resolvedWorld = resolveRuntimeDayNightWorldState(
-    runtimeScene.world,
-    runtimeScene.time,
-    visualRuntimeClock
-  );
 
   onRuntimeClockChangeRef.current = onRuntimeClockChange;
 
-  useEffect(() => {
-    lastForwardedRuntimeClockRef.current = runtimeClock;
-    setVisualRuntimeClock((currentClock) =>
-      areRuntimeClockStatesEqual(currentClock, runtimeClock)
-        ? currentClock
-        : runtimeClock
-    );
-  }, [runtimeClock.dayCount, runtimeClock.dayLengthMinutes, runtimeClock.timeOfDayHours]);
-
   useEffect(() => {
     const container = containerRef.current;
 
@@ -111,12 +94,6 @@ export function RunnerCanvas({
       runtimeHost.setRuntimeMessageHandler(onRuntimeMessageChange);
       runtimeHost.setSceneLoadStateHandler(setSceneLoadState);
       runtimeHost.setRuntimeClockStateHandler?.((clock) => {
-        setVisualRuntimeClock((currentClock) =>
-          areRuntimeClockStatesEqual(currentClock, clock)
-            ? currentClock
-            : clock
-        );
-
         const now = performance.now();
 
         if (
@@ -226,35 +203,7 @@ export function RunnerCanvas({
       data-testid="runner-shell"
       aria-label="Built-in scene runner"
       aria-busy={!runnerReady}
-      style={createWorldBackgroundStyle(
-        resolvedWorld.background,
-        resolvedWorld.background.mode === "image"
-          ? (loadedImageAssets[resolvedWorld.background.assetId]
-              ?.sourceUrl ?? null)
-          : null
-      )}
     >
-      {resolvedWorld.nightBackgroundOverlay === null ? null : (
-        <div
-          className="runner-canvas__background-overlay"
-          data-testid="runner-night-background-overlay"
-          aria-hidden="true"
-          style={{
-            ...createWorldBackgroundStyle(
-              {
-                mode: "image",
-                assetId: resolvedWorld.nightBackgroundOverlay.assetId,
-                environmentIntensity:
-                  resolvedWorld.nightBackgroundOverlay.environmentIntensity
-              },
-              loadedImageAssets[
-                resolvedWorld.nightBackgroundOverlay.assetId
-              ]?.sourceUrl ?? null
-            ),
-            opacity: resolvedWorld.nightBackgroundOverlay.opacity
-          }}
-        />
-      )}
       <div
         className={`runner-canvas__loading-overlay ${runnerReady ? "runner-canvas__loading-overlay--hidden" : ""}`}
         data-testid="runner-loading-overlay"
diff --git a/tests/unit/runner-canvas.test.tsx b/tests/unit/runner-canvas.test.tsx
index 4af4c6ba..ef614d58 100644
--- a/tests/unit/runner-canvas.test.tsx
+++ b/tests/unit/runner-canvas.test.tsx
@@ -389,7 +389,7 @@ describe("RunnerCanvas", () => {
     ).toHaveBeenCalledTimes(2);
   });
 
-  it("renders the night background overlay behind the scene when the night profile is active", async () => {
+  it("does not render a DOM night background overlay because the runtime host owns background blending", async () => {
     const document = createEmptySceneDocument();
     document.assets["asset-night-sky"] = {
       id: "asset-night-sky",
@@ -439,7 +439,9 @@ describe("RunnerCanvas", () => {
       expect(runtimeHostInstances).toHaveLength(1);
     });
 
-    expect(screen.getByTestId("runner-night-background-overlay")).toBeVisible();
+    expect(
+      screen.queryByTestId("runner-night-background-overlay")
+    ).toBeNull();
   });
 
   it("keeps the crosshair hidden in third-person mode while still showing interaction prompts", async () => {
diff --git a/tests/unit/world-background-renderer.test.ts b/tests/unit/world-background-renderer.test.ts
new file mode 100644
index 00000000..93a2248d
--- /dev/null
+++ b/tests/unit/world-background-renderer.test.ts
@@ -0,0 +1,73 @@
+import { Texture } from "three";
+import { describe, expect, it } from "vitest";
+
+import { createDefaultWorldSettings } from "../../src/document/world-settings";
+import { resolveWorldEnvironmentState } from "../../src/rendering/world-background-renderer";
+
+describe("resolveWorldEnvironmentState", () => {
+  it("keeps the authored day environment when no night overlay is active", () => {
+    const world = createDefaultWorldSettings();
+    const dayTexture = new Texture();
+    world.background = {
+      mode: "image",
+      assetId: "asset-day-sky",
+      environmentIntensity: 0.65
+    };
+
+    expect(
+      resolveWorldEnvironmentState(world.background, dayTexture, null)
+    ).toEqual({
+      texture: dayTexture,
+      intensity: 0.65
+    });
+  });
+
+  it("hands the environment off through zero intensity during a day-to-night crossfade", () => {
+    const world = createDefaultWorldSettings();
+    const dayTexture = new Texture();
+    const nightTexture = new Texture();
+    world.background = {
+      mode: "image",
+      assetId: "asset-day-sky",
+      environmentIntensity: 0.4
+    };
+
+    expect(
+      resolveWorldEnvironmentState(world.background, dayTexture, {
+        texture: nightTexture,
+        opacity: 0.25,
+        environmentIntensity: 0.8
+      })
+    ).toEqual({
+      texture: dayTexture,
+      intensity: 0.2
+    });
+
+    expect(
+      resolveWorldEnvironmentState(world.background, dayTexture, {
+        texture: nightTexture,
+        opacity: 0.75,
+        environmentIntensity: 0.8
+      })
+    ).toEqual({
+      texture: nightTexture,
+      intensity: 0.4
+    });
+  });
+
+  it("fades the night environment in when the authored day background has no image environment", () => {
+    const world = createDefaultWorldSettings();
+    const nightTexture = new Texture();
+
+    expect(
+      resolveWorldEnvironmentState(world.background, null, {
+        texture: nightTexture,
+        opacity: 0.5,
+        environmentIntensity: 0.7
+      })
+    ).toEqual({
+      texture: nightTexture,
+      intensity: 0.35
+    });
+  });
+});
\ No newline at end of file