fix pixelated bug and introduce ball shader

frontend/src/ShaderBackground.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef } from "react";
 
 import BLACKHOLE_SHADER_CODE from "./assets/blackhole.glsl?raw";
 import STAR_SHADER_CODE from "./assets/star.glsl?raw";
+import BALL_SHADER_CODE from "./assets/ball.glsl?raw";
 
 function buildProgram(
   ctx: WebGL2RenderingContext,
@@ -117,7 +118,9 @@ type ShaderBackgroundProps = {
   theme: string;
 };
 
-export const ShaderBackground: React.FC<ShaderBackgroundProps> = ({ theme }) => {
+export const ShaderBackground: React.FC<ShaderBackgroundProps> = ({
+  theme,
+}) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
@@ -139,6 +142,9 @@ export const ShaderBackground: React.FC<ShaderBackgroundProps> = ({ theme }) =>
       case "star":
         shader_code = STAR_SHADER_CODE;
         break;
+      case "ball":
+        shader_code = BALL_SHADER_CODE;
+        break;
       default:
         console.error("Unknown shader theme:", theme);
         return;
@@ -179,7 +185,13 @@ export const ShaderBackground: React.FC<ShaderBackgroundProps> = ({ theme }) =>
 
     function setResolution(program: WebGLProgram) {
       const loc = gl!.getUniformLocation(program, "iResolution");
-      if (loc) gl!.uniform3fv(loc, [canvas!.width, canvas!.height, 1]);
+      canvas!.width = window.visualViewport!.width;
+      canvas!.height = window.visualViewport!.height;
+      if (loc) gl!.uniform3fv(loc, [
+        window.visualViewport!.width,
+        window.visualViewport!.height,
+        1,
+      ]);
     }
 
     function setTime(program: WebGLProgram, now: number) {
@@ -191,7 +203,12 @@ export const ShaderBackground: React.FC<ShaderBackgroundProps> = ({ theme }) =>
 
     const ichannel1_texture = loadTexture(gl, "assets/small_noise.png");
 
-    gl!.viewport(0, 0, canvas!.width, canvas!.height);
+    gl!.viewport(
+      0,
+      0,
+      window.visualViewport!.width,
+      window.visualViewport!.height
+    );
 
     gl!.useProgram(finalProgram);
     setResolution(finalProgram!);
@@ -227,7 +244,6 @@ export const ShaderBackground: React.FC<ShaderBackgroundProps> = ({ theme }) =>
         top: 0,
         left: 0,
         zIndex: -1,
-        pointerEvents: "none",
       }}
     />
   );