Feat: fix some shaders issue, add framerate slider

components/AnimatedBackground.vue

@@ -109,10 +109,9 @@ async function main(canvas: HTMLCanvasElement, fragmentShader2: string) {
             0,     // offset
             6,     // num vertices to process
         );
-        interval.value = setTimeout(() => requestAnimationFrame(render), targetFramerate)
     }
-    clearTimeout(interval.value)
-    requestAnimationFrame(render)
+    clearInterval(interval.value)
+    interval.value = setInterval(() => requestAnimationFrame(render), targetFramerate)
 }
 
 
@@ -120,6 +119,7 @@ async function reloadShader() {
     nextTick(() => {
         if (!canvas.value) { return }
         let fragmentShader2 = fragmentShader.replace("#define FBM_OCTAVES 6", "#define FBM_OCTAVES " + settingsStore.shaderQuality);
+        clearInterval(interval.value)
         main(canvas.value, fragmentShader2);
     })
 
@@ -128,6 +128,10 @@ watch(() => settingsStore.shaderQuality, (newValue, oldValue) => {
     reloadShader()
 })
 
+watch(() => settingsStore.shaderFramerate, (newValue, oldValue) => {
+    reloadShader()
+})
+
 
 
 onMounted(async () => {