Feat : Add shader quality slider

components/AnimatedBackground.vue

@@ -110,20 +110,21 @@ async function main(canvas: HTMLCanvasElement, fragmentShader2: string) {
             6,     // num vertices to process
         );
     }
-
     clearInterval(interval.value)
     interval.value = setInterval(() => requestAnimationFrame(render), targetFramerate)
 }
 
 
 async function reloadShader() {
-    if (!canvas.value) { return }
-    let fragmentShader2 = fragmentShader.replace("#define FBM_OCTAVES 6", "#define FBM_OCTAVES " + settingsStore.shaderQuality);
-    clearInterval(interval.value)
-    main(canvas.value, fragmentShader2);
+    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);
+    })
+
 }
 watch(() => settingsStore.shaderQuality, (newValue, oldValue) => {
-    if (newValue === oldValue) { return }
     reloadShader()
 })
 
@@ -140,7 +141,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <canvas ref="canvas" id="background">test</canvas>
+    <canvas v-if="settingsStore.shaderQuality != 0" ref="canvas" id="background">test</canvas>
 </template>
 
 <style scoped>