From 32e4bf3fd252648bc8acbed2340f60a860880f83 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 11 Aug 2026 10:16:14 -0500
Subject: [PATCH] fading out fragment

---
 .../components/SceneProps/index.tsx            | 18 ++++++++++++------
 .../SceneProps/shaders/fragment.glsl           | 16 ++++++++++++++++
 .../components/SceneProps/shaders/vertex.glsl  |  8 ++++++++
 3 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/fragment.glsl
 create mode 100644 packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/vertex.glsl

diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx
index f306c6eb1..87736566b 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx
@@ -1,7 +1,9 @@
 import { invalidate } from "@react-three/fiber";
 import { Quicklime, type QuicklimeEvent } from "quicklime";
 import { useEffect, useRef } from "react";
-import { Mesh, MeshStandardMaterial } from "three";
+import { Mesh, MeshStandardMaterial, Vector3 } from "three";
+import fragmentShader from "./shaders/fragment.glsl?raw";
+import vertexShader from "./shaders/vertex.glsl?raw";
 
 const SIZE = 2 ** 5;
 
@@ -33,11 +35,15 @@ export function SceneProps() {
       ref={mesh}
     >
       <planeGeometry args={[SIZE, SIZE]} />
-      <meshStandardMaterial
-        ref={material}
-        color="black"
-        roughness={1}
-        metalness={0}
+      <shaderMaterial
+        fragmentShader={fragmentShader}
+        vertexShader={vertexShader}
+        transparent
+        lights
+        uniforms={{
+          size: { value: SIZE / 2 },
+          color: { value: new Vector3(1, 1, 1).multiplyScalar(2 ** -3) },
+        }}
       />
     </mesh>
   );
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/fragment.glsl b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/fragment.glsl
new file mode 100644
index 000000000..7f83b2e0d
--- /dev/null
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/fragment.glsl
@@ -0,0 +1,16 @@
+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);
+}
\ No newline at end of file
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/vertex.glsl b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/vertex.glsl
new file mode 100644
index 000000000..eb9f48934
--- /dev/null
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/vertex.glsl
@@ -0,0 +1,8 @@
+varying vec3 vWorldPosition;
+
+void main() {
+  vec4 worldPos = modelMatrix * vec4(position, 1.0);
+  vWorldPosition = worldPos.xyz;
+
+  gl_Position = projectionMatrix * viewMatrix * worldPos;
+}
\ No newline at end of file