feat: overhead lighting

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -12,6 +12,7 @@ import {
   EyeOpenIcon,
   ShadowInnerIcon,
   ShadowNoneIcon,
+  SunIcon,
 } from "@radix-ui/react-icons";
 import {
   Button,
@@ -73,6 +74,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
   const { strings, unwrap } = useLocale();
   const revealed = Tankopedia.use((state) => state.revealed);
   const disturbed = Tankopedia.use((state) => state.disturbed);
+  const highGraphics = TankopediaPersistent.use((state) => state.highGraphics);
 
   return (
     <>
@@ -349,6 +351,20 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                 </DropdownMenu.Content>
               </DropdownMenu.Root>
 
+              <IconButton
+                size="2"
+                highContrast
+                onClick={() => {
+                  TankopediaPersistent.mutate((draft) => {
+                    draft.highGraphics = !draft.highGraphics;
+                  });
+                }}
+                color={highGraphics ? undefined : "gray"}
+                variant={highGraphics ? "solid" : "surface"}
+              >
+                <SunIcon />
+              </IconButton>
+
               <ScreenshotButton
                 color="gray"
                 size="2"

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx

@@ -1,15 +1,24 @@
 import { useFrame, useThree } from "@react-three/fiber";
+import { times } from "lodash-es";
 import { useEffect, useRef } from "react";
-import { HemisphereLight, SpotLight, type Group } from "three";
+import { SpotLight, type Group } from "three";
-import { clamp } from "three/src/math/MathUtils.js";
+import { clamp, degToRad, lerp } from "three/src/math/MathUtils.js";
 import { Tankopedia } from "../../../../../../stores/tankopedia";
+import { TankopediaPersistent } from "../../../../../../stores/tankopediaPersistent";
 import { HelpingSpotLight } from "../../../../../HelpingSpotLight";
 
 const ANGLE = Math.PI / 3;
-const HEMISPHERE_INTENSITY = 4;
+const REVEAL_ANIMATION_TIME = 3;
-const REVEAL_ANIMATION_TIME = 5;
 const TRANSITION_ANIMATION_TIME = 0.5;
 
+const LIGHTS_COUNT = 4;
+const THETA_OFFSET = degToRad(-150);
+const LIGHT_DISTANCE = 13;
+const LIGHT_HEIGHT_0 = 4;
+const LIGHT_HEIGHT_1 = 8;
+const INTENSITY_0 = 70;
+const INTENSITY_1 = 40;
+
 export function Lighting() {
   const wrapper = useRef<Group>(null!);
   const t0 = useRef(0);
@@ -17,6 +26,7 @@ export function Lighting() {
   const display = Tankopedia.use((state) => state.display);
   const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
   const animationTime = useRef(REVEAL_ANIMATION_TIME);
+  const highGraphics = TankopediaPersistent.use((state) => state.highGraphics);
 
   useEffect(() => {
     Tankopedia.mutate((draft) => {
@@ -35,9 +45,7 @@ export function Lighting() {
     const t = 0.5 * Math.sin(Math.PI * (x + 0.5)) + 0.5;
 
     for (const child of wrapper.current.children) {
-      if (child instanceof HemisphereLight) {
+      if (child instanceof SpotLight) {
-        child.intensity = HEMISPHERE_INTENSITY * t;
-      } else if (child instanceof SpotLight) {
         child.angle = ANGLE * t;
       }
     }
@@ -60,34 +68,29 @@ export function Lighting() {
 
   return (
     <group ref={wrapper}>
-      <hemisphereLight
+      {times(LIGHTS_COUNT, (index) => {
-        position={[0, 1, 0]}
+        const x = index / (LIGHTS_COUNT - 1);
-        color="#dadaff"
+        const theta = 2 * Math.PI * (index / LIGHTS_COUNT) + THETA_OFFSET;
-        groundColor="#856331"
+        const position = [
-        intensity={0}
+          LIGHT_DISTANCE * Math.sin(theta),
-      />
+          lerp(LIGHT_HEIGHT_0, LIGHT_HEIGHT_1, x),
+          LIGHT_DISTANCE * Math.cos(theta),
+        ] as const;
+        const intensity = lerp(INTENSITY_0, INTENSITY_1, x);
 
-      <HelpingSpotLight
+        return (
-        debug
+          <HelpingSpotLight
-        position={[-6, 6, -10]}
+            userData={{ index }}
-        intensity={4}
+            key={index}
-        penumbra={1}
+            position={position}
-        castShadow
+            intensity={intensity}
-        color="#ffffff"
+            penumbra={1}
-        decay={0}
+            castShadow={highGraphics}
-        angle={0}
+            decay={1}
-      />
+            color="#ffffff"
-
+          />
-      <HelpingSpotLight
+        );
-        debug
+      })}
-        position={[6, 6, -10]}
-        intensity={1}
-        penumbra={1}
-        castShadow
-        color="#ffffff"
-        decay={0}
-        angle={0}
-      />
     </group>
   );
 }

packages/website/src/stores/tankopediaPersistent/index.ts

@@ -15,6 +15,7 @@ export interface TankopediaPersistent {
   showPrimaryArmor: boolean;
   recentlyViewed: number[];
   hideTankModelUnderArmor: boolean;
+  highGraphics: boolean;
 
   sort: {
     by: TankopediaSortBy;
@@ -33,6 +34,7 @@ export const TankopediaPersistent = new Varuna<TankopediaPersistent>(
     showExternalModules: true,
     showPrimaryArmor: true,
     recentlyViewed: [],
+    highGraphics: true,
     sort: {
       by: "meta.none",
       direction: "ascending",