|
| 1 | +<template> |
| 2 | + <div class="glass-panel"> |
| 3 | + <canvas ref="canvas"></canvas> |
| 4 | + <div class="content"> |
| 5 | + <slot /> |
| 6 | + </div> |
| 7 | + </div> |
| 8 | +</template> |
| 9 | + |
| 10 | +<script setup lang="ts"> |
| 11 | +import { ref, inject, onMounted, nextTick } from "vue"; |
| 12 | +
|
| 13 | +// Inject the background reference provided by your Background component |
| 14 | +interface BackgroundRef { |
| 15 | + getCanvas: () => HTMLCanvasElement | null; |
| 16 | +} |
| 17 | +const backgroundRef = inject<Ref<BackgroundRef | null>>("backgroundRef"); |
| 18 | +
|
| 19 | +onMounted(async () => { |
| 20 | + await nextTick(); |
| 21 | +
|
| 22 | +
|
| 23 | +
|
| 24 | + const canvas = backgroundRef.value?.getCanvas(); |
| 25 | + if (!canvas) { |
| 26 | + console.error("GlassPanel: canvas ref missing"); |
| 27 | + return; |
| 28 | + } |
| 29 | + console.log(canvas) |
| 30 | +
|
| 31 | + const bgCanvas = backgroundRef?.value?.getCanvas(); |
| 32 | + if (!bgCanvas) { |
| 33 | + console.warn("GlassPanel: background canvas not ready"); |
| 34 | + return; |
| 35 | + } |
| 36 | +
|
| 37 | + // Set canvas size to match container |
| 38 | + const setSize = () => { |
| 39 | + canvas.width = canvas.clientWidth; |
| 40 | + canvas.height = canvas.clientHeight; |
| 41 | + }; |
| 42 | + setSize(); |
| 43 | + window.addEventListener("resize", setSize); |
| 44 | +
|
| 45 | + // Initialize WebGL |
| 46 | + gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); |
| 47 | + if (!gl) { |
| 48 | + console.error("GlassPanel: WebGL not supported"); |
| 49 | + return; |
| 50 | + } |
| 51 | +
|
| 52 | + // Vertex shader |
| 53 | + const vsSource = ` |
| 54 | + attribute vec2 position; |
| 55 | + void main() { |
| 56 | + gl_Position = vec4(position, 0.0, 1.0); |
| 57 | + } |
| 58 | + `; |
| 59 | +
|
| 60 | + // Fragment shader: simple lens distortion |
| 61 | + const fsSource = ` |
| 62 | + precision mediump float; |
| 63 | + uniform sampler2D u_texture; |
| 64 | + uniform vec2 u_resolution; |
| 65 | + uniform vec2 u_mouse; |
| 66 | +
|
| 67 | + void main() { |
| 68 | + vec2 uv = gl_FragCoord.xy / u_resolution.xy; |
| 69 | + vec2 center = u_mouse / u_resolution; |
| 70 | + vec2 offset = uv - center; |
| 71 | + float r = length(offset); |
| 72 | + uv += offset * 0.2 * exp(-5.0 * r*r); // lens warp |
| 73 | + gl_FragColor = texture2D(u_texture, uv); |
| 74 | + } |
| 75 | + `; |
| 76 | +
|
| 77 | + const createShader = (type: number, source: string) => { |
| 78 | + const shader = gl!.createShader(type)!; |
| 79 | + gl!.shaderSource(shader, source); |
| 80 | + gl!.compileShader(shader); |
| 81 | + if (!gl!.getShaderParameter(shader, gl!.COMPILE_STATUS)) { |
| 82 | + console.error(gl!.getShaderInfoLog(shader)); |
| 83 | + gl!.deleteShader(shader); |
| 84 | + return null; |
| 85 | + } |
| 86 | + return shader; |
| 87 | + }; |
| 88 | +
|
| 89 | + const vs = createShader(gl.VERTEX_SHADER, vsSource)!; |
| 90 | + const fs = createShader(gl.FRAGMENT_SHADER, fsSource)!; |
| 91 | +
|
| 92 | + const program = gl.createProgram()!; |
| 93 | + gl.attachShader(program, vs); |
| 94 | + gl.attachShader(program, fs); |
| 95 | + gl.linkProgram(program); |
| 96 | + gl.useProgram(program); |
| 97 | +
|
| 98 | + // Quad covering the canvas |
| 99 | + const buffer = gl.createBuffer(); |
| 100 | + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); |
| 101 | + gl.bufferData( |
| 102 | + gl.ARRAY_BUFFER, |
| 103 | + new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), |
| 104 | + gl.STATIC_DRAW |
| 105 | + ); |
| 106 | +
|
| 107 | + const position = gl.getAttribLocation(program, "position"); |
| 108 | + gl.enableVertexAttribArray(position); |
| 109 | + gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0); |
| 110 | +
|
| 111 | + // Uniform locations |
| 112 | + const uniforms = { |
| 113 | + resolution: gl.getUniformLocation(program, "u_resolution")!, |
| 114 | + mouse: gl.getUniformLocation(program, "u_mouse")!, |
| 115 | + texture: gl.getUniformLocation(program, "u_texture")!, |
| 116 | + }; |
| 117 | +
|
| 118 | + // Mouse tracking |
| 119 | + let mouse = [canvas.width / 2, canvas.height / 2]; |
| 120 | + canvas.addEventListener("mousemove", (e) => { |
| 121 | + const rect = canvas.getBoundingClientRect(); |
| 122 | + mouse = [e.clientX - rect.left, canvas.height - (e.clientY - rect.top)]; |
| 123 | + }); |
| 124 | +
|
| 125 | + // Texture setup |
| 126 | + const texture = gl.createTexture()!; |
| 127 | + gl.bindTexture(gl.TEXTURE_2D, texture); |
| 128 | + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); |
| 129 | + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); |
| 130 | + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); |
| 131 | +
|
| 132 | + // Render loop |
| 133 | + const render = () => { |
| 134 | + const bgCanvasCurrent = backgroundRef?.value?.getCanvas(); |
| 135 | + if (!bgCanvasCurrent) return; |
| 136 | +
|
| 137 | + gl.viewport(0, 0, canvas.width, canvas.height); |
| 138 | + gl.clear(gl.COLOR_BUFFER_BIT); |
| 139 | +
|
| 140 | + gl.bindTexture(gl.TEXTURE_2D, texture); |
| 141 | + gl.texImage2D( |
| 142 | + gl.TEXTURE_2D, |
| 143 | + 0, |
| 144 | + gl.RGBA, |
| 145 | + gl.RGBA, |
| 146 | + gl.UNSIGNED_BYTE, |
| 147 | + bgCanvasCurrent |
| 148 | + ); |
| 149 | +
|
| 150 | + gl.uniform2f(uniforms.resolution, canvas.width, canvas.height); |
| 151 | + gl.uniform2f(uniforms.mouse, mouse[0], mouse[1]); |
| 152 | + gl.uniform1i(uniforms.texture, 0); |
| 153 | +
|
| 154 | + gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); |
| 155 | + requestAnimationFrame(render); |
| 156 | + }; |
| 157 | + render(); |
| 158 | +}); |
| 159 | +</script> |
| 160 | + |
| 161 | +<style scoped> |
| 162 | +.glass-panel { |
| 163 | + position: relative; |
| 164 | + display: inline-block; |
| 165 | + border-radius: 1.5rem; |
| 166 | + overflow: hidden; |
| 167 | + backdrop-filter: blur(10px); |
| 168 | + -webkit-backdrop-filter: blur(10px); |
| 169 | +} |
| 170 | +
|
| 171 | +.glass-panel canvas { |
| 172 | + position: absolute; |
| 173 | + inset: 0; |
| 174 | + width: 100%; |
| 175 | + height: 100%; |
| 176 | + pointer-events: none; |
| 177 | +} |
| 178 | +
|
| 179 | +.glass-panel .content { |
| 180 | + position: relative; |
| 181 | + z-index: 1; |
| 182 | + pointer-events: auto; |
| 183 | + color: white; |
| 184 | + padding: 2rem; |
| 185 | +} |
| 186 | +</style> |
0 commit comments