add second shader bg

frontend/src/ShaderBackground.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 
-import SHADER_CODE from "./assets/shader.glsl?raw";
+import BLACKHOLE_SHADER_CODE from "./assets/blackhole.glsl?raw";
+import STAR_SHADER_CODE from "./assets/star.glsl?raw";
 
 function buildProgram(
   ctx: WebGL2RenderingContext,
@@ -112,8 +113,11 @@ function isPowerOf2(value: number) {
   return (value & (value - 1)) === 0;
 }
 
+type ShaderBackgroundProps = {
+  theme: string;
+};
 
-export const ShaderBackground = () => {
+export const ShaderBackground: React.FC<ShaderBackgroundProps> = ({ theme }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
@@ -127,12 +131,25 @@ export const ShaderBackground = () => {
     gl.clearColor(0, 0, 0, 1);
     gl.clear(gl.COLOR_BUFFER_BIT);
 
-    const shader = buildShader(gl, gl.FRAGMENT_SHADER, SHADER_CODE);
+    let shader_code;
+    switch (theme) {
+      case "blackhole":
+        shader_code = BLACKHOLE_SHADER_CODE;
+        break;
+      case "star":
+        shader_code = STAR_SHADER_CODE;
+        break;
+      default:
+        console.error("Unknown shader theme:", theme);
+        return;
+    }
+
+    const shader = buildShader(gl, gl.FRAGMENT_SHADER, shader_code);
     const vertexShader = buildShader(
       gl,
       gl.VERTEX_SHADER,
       `#version 300 es
-    precision lowp float;
+    precision highp float;
     
     in vec2 a_position;
     
@@ -172,7 +189,7 @@ export const ShaderBackground = () => {
 
     const final_iChannel1 = gl.getUniformLocation(finalProgram, "iChannel1");
 
-    const ichannel1_texture = loadTexture(gl, "assets/ichannel1.png");
+    const ichannel1_texture = loadTexture(gl, "assets/small_noise.png");
 
     gl!.viewport(0, 0, canvas!.width, canvas!.height);
 
@@ -186,7 +203,7 @@ export const ShaderBackground = () => {
 
     function update(now: number) {
       // time in seconds
-      const time = (now) / 1000;
+      const time = now / 1000;
       gl!.clear(gl!.COLOR_BUFFER_BIT);
 
       setTime(finalProgram!, time);
@@ -197,7 +214,7 @@ export const ShaderBackground = () => {
     }
 
     requestAnimationFrame(update);
-  });
+  }, [theme]);
 
   return (
     <canvas