fading out fragment

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>
   );

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);
+}

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;
+}