WIP

assets/shaders/noise.frag

@@ -28,8 +28,11 @@ 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

@@ -3,25 +3,30 @@ import noise from "~/assets/shaders/noise.frag?raw"
 
 const canvas = ref<HTMLCanvasElement | null>(null)
 
+const settingsStore = useSettingsStore()
+
 declare const webglUtils: {
-    createProgramFromSources: (gl: WebGLRenderingContext, array: [string, string]) => any,
+    createProgramFromSources: (gl: WebGLRenderingContext, array: [string, string]) => WebGLProgram,
     resizeCanvasToDisplaySize: (e: HTMLCanvasElement | OffscreenCanvas) => any
 }
+declare const resolveLygiaAsync: (source: string) => Promise<string>
 
 export interface Props {
     colorStart?: [number, number, number]
     colorEnd?: [number, number, number]
 }
-
-declare const resolveLygiaAsync: (source: string) => Promise<string>
-
 const props = withDefaults(defineProps<Props>(), {
     colorStart: () => [0, .3, 0],
     colorEnd: () => [0, 1, 0]
 })
 
-const targetFramerate = 1000 / 60
-async function main(canvas: HTMLCanvasElement) {
+const targetFramerate = 1000 / settingsStore.shaderFramerate
+
+const interval = ref<ReturnType<typeof setInterval>>()
+
+let fragmentShader = await resolveLygiaAsync(noise);
+
+async function main(canvas: HTMLCanvasElement, fragmentShader2: string) {
     // Get A WebGL context
     /** @type {HTMLCanvasElement} */
     const gl = canvas.getContext("webgl");
@@ -31,10 +36,8 @@ async function main(canvas: HTMLCanvasElement) {
 
     const vs = `attribute vec4 a_position;void main() {gl_Position = a_position;}`;
 
-    const fs = await resolveLygiaAsync(noise);
-
     // setup GLSL program
-    const program = webglUtils.createProgramFromSources(gl, [vs, fs]);
+    const program = webglUtils.createProgramFromSources(gl, [vs, fragmentShader2]);
 
     // look up where the vertex data needs to go.
     const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
@@ -43,6 +46,7 @@ async function main(canvas: HTMLCanvasElement) {
     const offset = gl.getUniformLocation(program, "u_offset");
     const resolutionLocation = gl.getUniformLocation(program, "u_resolution");
     const colorStart = gl.getUniformLocation(program, "u_color_start");
+    const quality = gl.getUniformLocation(program, "u_quality");
     const colorEnd = gl.getUniformLocation(program, "u_color_end");
     const timeLocation = gl.getUniformLocation(program, "u_time");
 
@@ -95,6 +99,7 @@ async function main(canvas: HTMLCanvasElement) {
 
         gl2.uniform2f(offset, bounds.left, -bounds.bottom);
         // console.log(canvas.getBoundingClientRect().left * window.devicePixelRatio)
+        gl2.uniform1i(quality, settingsStore.shaderQuality)
         gl2.uniform2f(resolutionLocation, aspectRatio, aspectRatio);
         gl2.uniform3f(colorStart, props.colorStart[0], props.colorStart[1], props.colorStart[2]);
         gl2.uniform3f(colorEnd, props.colorEnd[0], props.colorEnd[1], props.colorEnd[2]);
@@ -104,17 +109,32 @@ async function main(canvas: HTMLCanvasElement) {
             0,     // offset
             6,     // num vertices to process
         );
-        setTimeout(() => {
-            requestAnimationFrame(render);
-        }, targetFramerate);
     }
-    requestAnimationFrame(render);
+
+    clearInterval(interval.value)
+    interval.value = setInterval(() => requestAnimationFrame(render), targetFramerate)
 }
 
 
-onMounted(() => {
+async function reloadShader() {
     if (!canvas.value) { return }
-    main(canvas.value);
+    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()
+})
+
+
+
+onMounted(async () => {
+    reloadShader()
+})
+
+onUnmounted(() => {
+    clearInterval(interval.value)
 })
 
 </script>