supermemory/packages/lib/glass-effect-manager.ts

// Singleton WebGL context manager for glass effects
class GlassEffectManager {
	private static instance: GlassEffectManager | null = null
	private canvas: HTMLCanvasElement | null = null
	private gl: WebGLRenderingContext | null = null
	private program: WebGLProgram | null = null
	private uniforms: Record<string, WebGLUniformLocation | null> = {}
	private effects: Map<string, EffectInstance> = new Map()
	private animationFrame: number | null = null
	private startTime: number = performance.now()
	private mousePositions: Map<string, { x: number; y: number }> = new Map()

	static getInstance(): GlassEffectManager {
		if (!GlassEffectManager.instance) {
			GlassEffectManager.instance = new GlassEffectManager()
		}
		return GlassEffectManager.instance
	}

	private constructor() {
		this.initializeContext()
	}

	private initializeContext() {
		// Create offscreen canvas
		this.canvas = document.createElement("canvas")
		this.canvas.width = 1024 // Default size, will be adjusted
		this.canvas.height = 1024

		this.gl = this.canvas.getContext("webgl", {
			alpha: true,
			premultipliedAlpha: false,
			preserveDrawingBuffer: true,
		})

		if (!this.gl) {
			console.error("WebGL not supported")
			return
		}

		this.setupShaders()
		this.startRenderLoop()
	}

	private setupShaders() {
		if (!this.gl) return

		const vsSource = `
			attribute vec2 position;
			void main() {
				gl_Position = vec4(position, 0.0, 1.0);
			}
		`

		const fsSource = `
			precision mediump float;

			uniform vec2 iResolution;
			uniform float iTime;
			uniform vec2 iMouse;
			uniform float iExpanded;

			float noise(vec2 p) {
				return sin(p.x * 10.0) * sin(p.y * 10.0);
			}

			void main() {
				vec2 uv = gl_FragCoord.xy / iResolution.xy;
				vec2 mouse = iMouse / iResolution.xy;

				float dist = length(uv - mouse);

				vec2 distortion = vec2(
					sin(iTime * 2.0 + uv.y * 10.0) * 0.0025,
					cos(iTime * 1.5 + uv.x * 10.0) * 0.0025
				);

				vec2 refractedUV = uv + distortion * (1.0 - dist);

				vec3 glassColor = mix(
					vec3(0.1, 0.1, 0.12),
					vec3(0.16, 0.16, 0.19),
					1.0 - length(uv - vec2(0.5))
				);

				float glow = exp(-dist * 5.0) * 0.35;
				glassColor += vec3(glow);

				float edge = 1.0 - smoothstep(0.0, 0.02, min(
					min(uv.x, 1.0 - uv.x),
					min(uv.y, 1.0 - uv.y)
				));
				glassColor += edge * 0.3;

				float edgeGlow = 1.0 - smoothstep(0.0, 0.05, min(
					min(uv.x, 1.0 - uv.x),
					min(uv.y, 1.0 - uv.y)
				));
				glassColor += vec3(edgeGlow * 0.1, edgeGlow * 0.1, edgeGlow * 0.2);

				float n = noise(refractedUV * 50.0 + vec2(iTime)) * 0.025;
				glassColor += vec3(n);

				float alpha = 0.25 + edge * 0.2 + glow * 0.2;
				alpha *= mix(0.8, 1.0, iExpanded);

				gl_FragColor = vec4(glassColor, alpha);
			}
		`

		const createShader = (type: number, source: string) => {
			const shader = this.gl!.createShader(type)
			if (!shader) return null

			this.gl!.shaderSource(shader, source)
			this.gl!.compileShader(shader)

			if (!this.gl!.getShaderParameter(shader, this.gl!.COMPILE_STATUS)) {
				console.error("Shader error:", this.gl!.getShaderInfoLog(shader))
				this.gl!.deleteShader(shader)
				return null
			}
			return shader
		}

		const vs = createShader(this.gl.VERTEX_SHADER, vsSource)
		const fs = createShader(this.gl.FRAGMENT_SHADER, fsSource)
		if (!vs || !fs) return

		this.program = this.gl.createProgram()
		if (!this.program) return

		this.gl.attachShader(this.program, vs)
		this.gl.attachShader(this.program, fs)
		this.gl.linkProgram(this.program)
		// biome-ignore  lint/correctness/useHookAtTopLevel: Well, not a hook
		this.gl.useProgram(this.program)

		// Buffer setup
		const buffer = this.gl.createBuffer()
		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer)
		this.gl.bufferData(
			this.gl.ARRAY_BUFFER,
			new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
			this.gl.STATIC_DRAW,
		)

		const position = this.gl.getAttribLocation(this.program, "position")
		this.gl.enableVertexAttribArray(position)
		this.gl.vertexAttribPointer(position, 2, this.gl.FLOAT, false, 0, 0)

		// Store uniform locations
		this.uniforms = {
			resolution: this.gl.getUniformLocation(this.program, "iResolution"),
			time: this.gl.getUniformLocation(this.program, "iTime"),
			mouse: this.gl.getUniformLocation(this.program, "iMouse"),
			expanded: this.gl.getUniformLocation(this.program, "iExpanded"),
		}

		// Enable blending
		this.gl.enable(this.gl.BLEND)
		this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA)
	}

	registerEffect(
		id: string,
		targetCanvas: HTMLCanvasElement,
		isExpanded: boolean,
	): () => void {
		// Ensure minimum dimensions
		const width = Math.max(1, targetCanvas.width)
		const height = Math.max(1, targetCanvas.height)

		const effect: EffectInstance = {
			id,
			targetCanvas,
			isExpanded,
			width,
			height,
		}

		this.effects.set(id, effect)
		this.mousePositions.set(id, { x: 0, y: 0 })

		// Return cleanup function
		return () => {
			this.effects.delete(id)
			this.mousePositions.delete(id)
			if (this.effects.size === 0 && this.animationFrame) {
				cancelAnimationFrame(this.animationFrame)
				this.animationFrame = null
			}
		}
	}

	updateMousePosition(id: string, x: number, y: number) {
		this.mousePositions.set(id, { x, y })
	}

	updateExpanded(id: string, isExpanded: boolean) {
		const effect = this.effects.get(id)
		if (effect) {
			effect.isExpanded = isExpanded
		}
	}

	updateSize(id: string, width: number, height: number) {
		const effect = this.effects.get(id)
		if (effect) {
			// Ensure minimum dimensions
			effect.width = Math.max(1, width)
			effect.height = Math.max(1, height)
		}
	}

	private startRenderLoop() {
		const render = () => {
			if (!this.gl || !this.program || this.effects.size === 0) {
				this.animationFrame = requestAnimationFrame(render)
				return
			}

			const currentTime = (performance.now() - this.startTime) / 1000

			// Render each effect
			for (const [id, effect] of Array.from(this.effects)) {
				const mousePos = this.mousePositions.get(id) || { x: 0, y: 0 }

				// Skip rendering if dimensions are invalid
				if (effect.width <= 0 || effect.height <= 0) {
					continue
				}

				// Set canvas size if needed
				if (
					this.canvas!.width !== effect.width ||
					this.canvas!.height !== effect.height
				) {
					this.canvas!.width = effect.width
					this.canvas!.height = effect.height
					this.gl.viewport(0, 0, effect.width, effect.height)
				}

				// Clear and render
				this.gl.clearColor(0, 0, 0, 0)
				this.gl.clear(this.gl.COLOR_BUFFER_BIT)

				// Set uniforms
				if (this.uniforms.resolution) {
					this.gl.uniform2f(
						this.uniforms.resolution,
						effect.width,
						effect.height,
					)
				}
				if (this.uniforms.time) {
					this.gl.uniform1f(this.uniforms.time, currentTime)
				}
				if (this.uniforms.mouse) {
					this.gl.uniform2f(this.uniforms.mouse, mousePos.x, mousePos.y)
				}
				if (this.uniforms.expanded) {
					this.gl.uniform1f(
						this.uniforms.expanded,
						effect.isExpanded ? 1.0 : 0.0,
					)
				}

				// Draw
				this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4)

				// Copy to target canvas
				const targetCtx = effect.targetCanvas.getContext("2d")
				if (targetCtx) {
					targetCtx.clearRect(0, 0, effect.width, effect.height)
					targetCtx.drawImage(this.canvas!, 0, 0)
				}
			}

			this.animationFrame = requestAnimationFrame(render)
		}

		render()
	}

	// Clean up method (optional, for when the app unmounts)
	destroy() {
		if (this.animationFrame) {
			cancelAnimationFrame(this.animationFrame)
		}
		if (this.gl && this.program) {
			this.gl.deleteProgram(this.program)
		}
		this.effects.clear()
		this.mousePositions.clear()
		GlassEffectManager.instance = null
	}
}

interface EffectInstance {
	id: string
	targetCanvas: HTMLCanvasElement
	isExpanded: boolean
	width: number
	height: number
}

export default GlassEffectManager