optimize scene lighting and rnederer

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

@@ -8,17 +8,17 @@ import { Tankopedia } from "../../../../../../stores/tankopedia";
 import { TankopediaPersistent } from "../../../../../../stores/tankopediaPersistent";
 import { HelpingSpotLight } from "../../../../../HelpingSpotLight";
 
-const ANGLE = Math.PI * 2 ** -2;
+const ANGLE = degToRad(10);
 const REVEAL_ANIMATION_TIME = 3;
 const TRANSITION_ANIMATION_TIME = 0.5;
 
-const LIGHTS_COUNT = 5;
-const THETA_OFFSET = degToRad(-152);
-const LIGHT_DISTANCE = 13;
+const LIGHTS_COUNT = 4;
+const THETA_OFFSET = degToRad(180 - 45);
+const LIGHT_DISTANCE = 20;
 const LIGHT_HEIGHT_0 = 4;
-const LIGHT_HEIGHT_1 = 2;
-const INTENSITY_0 = 3.5;
-const INTENSITY_1 = 1.5;
+const LIGHT_HEIGHT_1 = 6;
+const INTENSITY_0 = 6;
+const INTENSITY_1 = 3;
 const HEMISPHERE_INTENSITY = 2;
 
 export const transitionEvent = new Quicklime<number>(0);
@@ -115,8 +115,6 @@ function Animator({ stop, t0, animationTime, wrapper }: AnimatorProps) {
     const dt = performance.now() / 1e3 - t0.current;
     const x = clamp(dt / animationTime.current, 0, 2);
 
-    console.log(x);
-
     if (x === 2) {
       stop();
       return;

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx

@@ -1,10 +1,9 @@
-import { invalidate, useFrame } from "@react-three/fiber";
-import { clamp } from "lodash-es";
+import { invalidate } from "@react-three/fiber";
 import { Quicklime, type QuicklimeEvent } from "quicklime";
 import { useEffect, useRef } from "react";
 import { Mesh, MeshStandardMaterial } from "three";
 
-const SIZE = 2 ** 6;
+const SIZE = 14;
 
 export const screenshotReadyEvent = new Quicklime(false);
 
@@ -12,11 +11,6 @@ export function SceneProps() {
   const mesh = useRef<Mesh>(null!);
   const material = useRef<MeshStandardMaterial>(null);
 
-  useFrame(({ camera }) => {
-    if (!material.current) return;
-    material.current.opacity = clamp(0.5 * camera.position.y, 0, 0.5);
-  });
-
   useEffect(() => {
     function handleScreenshotReady(event: QuicklimeEvent<boolean>) {
       mesh.current.visible = !event.data;
@@ -36,11 +30,9 @@ export function SceneProps() {
       receiveShadow
       visible={!screenshotReadyEvent.last!}
       ref={mesh}
-      renderOrder={-1}
     >
       <planeGeometry args={[SIZE, SIZE]} />
       <meshStandardMaterial
-        transparent
         ref={material}
         color="black"
         roughness={1}

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

@@ -156,7 +156,7 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
           localClippingEnabled: true,
           preserveDrawingBuffer: true,
         }}
-        shadows="soft"
+        shadows="basic"
         onPointerDown={handlePointerDown}
         onPointerMissed={() => {
           Tankopedia.mutate((draft) => {

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

@@ -40,5 +40,5 @@ export const TankopediaPersistent = new Varuna<TankopediaPersistent>(
       direction: "ascending",
     },
   },
-  "tankopedia-2"
+  "tankopedia-3",
 );