Feat : Add shader quality slider

assets/shaders/noise.frag

@@ -28,11 +28,6 @@ void main(){
     
     float f=fbm(st+r);
     
-<<<<<<< Updated upstream
-
-    
-=======
->>>>>>> Stashed changes
     vec3 color=mix(u_color_start,u_color_end,f*.3);
     
     gl_FragColor=vec4(color,1.);

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 }
+    nextTick(() => {
-    let fragmentShader2 = fragmentShader.replace("#define FBM_OCTAVES 6", "#define FBM_OCTAVES " + settingsStore.shaderQuality);
+        if (!canvas.value) { return }
-    clearInterval(interval.value)
+        let fragmentShader2 = fragmentShader.replace("#define FBM_OCTAVES 6", "#define FBM_OCTAVES " + settingsStore.shaderQuality);
-    main(canvas.value, fragmentShader2);
+        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>