ground with shadows

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

@@ -1,10 +1,8 @@
 import { mauveDark } from "@radix-ui/colors";
 import { invalidate } from "@react-three/fiber";
 import { Quicklime, type QuicklimeEvent } from "quicklime";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
-import { Color, Mesh } from "three";
+import { Mesh, type WebGLProgramParametersWithUniforms } from "three";
-import fragmentShader from "./shaders/fragment.glsl?raw";
-import vertexShader from "./shaders/vertex.glsl?raw";
 
 const SIZE = 2 ** 4;
 
@@ -26,22 +24,62 @@ export function SceneProps() {
     };
   }, []);
 
+  const handleBeforeCompile = useCallback(
+    (shader: WebGLProgramParametersWithUniforms) => {
+      shader.uniforms.size = { value: SIZE / 2 };
+
+      shader.vertexShader = `
+        varying vec3 vWorldPosition;
+
+        ${shader.vertexShader}
+      `.replace(
+        "#include <worldpos_vertex>",
+
+        `
+          #include <worldpos_vertex>
+          vWorldPosition = (modelMatrix * vec4(transformed, 1.0)).xyz;
+        `,
+      );
+
+      shader.fragmentShader = `
+        varying vec3 vWorldPosition;
+        uniform float size;
+
+        ${shader.fragmentShader}
+      `.replace(
+        "#include <color_fragment>",
+
+        `
+          #include <color_fragment>
+
+          vec3 scaled = vWorldPosition / size;
+          float radius = length(scaled.xz);
+
+          if (radius >= 1.0) {
+            discard;
+          }
+
+          diffuseColor.a *= (1.0 - radius);
+        `,
+      );
+    },
+    [],
+  );
+
   return (
     <mesh
       position={[0, -(2 ** -8), 0]}
       rotation={[-Math.PI / 2, 0, 0]}
       visible={!screenshotReadyEvent.last!}
       ref={mesh}
+      receiveShadow
     >
       <planeGeometry args={[SIZE, SIZE]} />
-      <shaderMaterial
+      <meshStandardMaterial
-        fragmentShader={fragmentShader}
+        color={mauveDark.mauve6}
-        vertexShader={vertexShader}
+        roughness={1}
         transparent
-        uniforms={{
+        onBeforeCompile={handleBeforeCompile}
-          size: { value: SIZE / 2 },
-          color: { value: new Color(mauveDark.mauve8) },
-        }}
       />
     </mesh>
   );

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/fragment.glsl

@@ -1,16 +0,0 @@
-varying vec3 vWorldPosition;
-uniform float size;
-uniform vec3 color;
-
-void main() {
-  vec3 scaled = vWorldPosition / size;
-  float radius = length(scaled.xz);
-
-  if(radius >= 1.0) {
-    discard;
-  }
-
-  float a = 1.0 - radius;
-
-  gl_FragColor = vec4(color, a);
-}

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/vertex.glsl

@@ -1,8 +0,0 @@
-varying vec3 vWorldPosition;
-
-void main() {
-  vec4 worldPos = modelMatrix * vec4(position, 1.0);
-  vWorldPosition = worldPos.xyz;
-
-  gl_Position = projectionMatrix * viewMatrix * worldPos;
-}