Add shaders everywhere!

components/AnimatedBackground.vue

@@ -8,8 +8,19 @@ declare const webglUtils: {
     resizeCanvasToDisplaySize: (e: HTMLCanvasElement | OffscreenCanvas) => any
 }
 
+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) {
     // Get A WebGL context
     /** @type {HTMLCanvasElement} */
@@ -29,8 +40,10 @@ async function main(canvas: HTMLCanvasElement) {
     const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
 
     // look up uniform locations
+    const offset = gl.getUniformLocation(program, "u_offset");
     const resolutionLocation = gl.getUniformLocation(program, "u_resolution");
-    const mouseLocation = gl.getUniformLocation(program, "u_mouse");
+    const colorStart = gl.getUniformLocation(program, "u_color_start");
+    const colorEnd = gl.getUniformLocation(program, "u_color_end");
     const timeLocation = gl.getUniformLocation(program, "u_time");
 
     // Create a buffer to put three 2d clip space points in
@@ -49,48 +62,51 @@ async function main(canvas: HTMLCanvasElement) {
         1, 1,
     ]), gl.STATIC_DRAW);
 
-    let mouseX = 0;
-    let mouseY = 0;
-
 
+    const gl2 = gl
     function render(time: number) {
-        if (!gl) { return }
         time *= 0.001;  // convert to seconds
-        webglUtils.resizeCanvasToDisplaySize(gl.canvas);
+        webglUtils.resizeCanvasToDisplaySize(gl2.canvas);
 
         // Tell WebGL how to convert from clip space to pixels
-        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+        gl2.viewport(0, 0, gl2.canvas.width, gl2.canvas.height);
 
         // Tell it to use our program (pair of shaders)
-        gl.useProgram(program);
+        gl2.useProgram(program);
 
         // Turn on the attribute
-        gl.enableVertexAttribArray(positionAttributeLocation);
+        gl2.enableVertexAttribArray(positionAttributeLocation);
 
         // Bind the position buffer.
-        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+        gl2.bindBuffer(gl2.ARRAY_BUFFER, positionBuffer);
 
         // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
-        gl.vertexAttribPointer(
+        gl2.vertexAttribPointer(
             positionAttributeLocation,
             2,          // 2 components per iteration
-            gl.FLOAT,   // the data is 32bit floats
+            gl2.FLOAT,   // the data is 32bit floats
             false,      // don't normalize the data
             0,          // 0 = move forward size * sizeof(type) each iteration to get the next position
             0,          // start at the beginning of the buffer
         );
 
-        gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);
-        gl.uniform2f(mouseLocation, mouseX, mouseY);
-        gl.uniform1f(timeLocation, time);
+        const bounds = canvas.getBoundingClientRect()
+        const aspectRatio = Math.max(window.screen.width, window.screen.height) * devicePixelRatio
 
-        gl.drawArrays(
-            gl.TRIANGLES,
+        gl2.uniform2f(offset, bounds.left, -bounds.bottom);
+        // console.log(canvas.getBoundingClientRect().left * window.devicePixelRatio)
+        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]);
+        gl2.uniform1f(timeLocation, time);
+        gl2.drawArrays(
+            gl2.TRIANGLES,
             0,     // offset
             6,     // num vertices to process
         );
-
-        requestAnimationFrame(render);
+        setTimeout(() => {
+            requestAnimationFrame(render);
+        }, targetFramerate);
     }
     requestAnimationFrame(render);
 }
@@ -98,7 +114,6 @@ async function main(canvas: HTMLCanvasElement) {
 
 onMounted(() => {
     if (!canvas.value) { return }
-    console.log("e")
     main(canvas.value);
 })
 
@@ -110,7 +125,6 @@ onMounted(() => {
 
 <style scoped>
 #background {
-    z-index: -1;
     left: 0;
     position: absolute;
     height: 100%;