WebGL DOM-Synced Planes

What this builds

A rendering system where every target DOM element (image, video, section) has a corresponding WebGL plane mesh positioned to overlay it exactly, pixel for pixel, at all scroll positions and viewport sizes. The DOM content is either replaced by the WebGL plane (image textures rendered via shader) or underlaid by it (DOM on top, shader effects visible as background/border effects). This enables per-element shader effects (hover distortion, scroll-driven displacement, reveal wipes, color grading) that CSS cannot express, while the layout stays CSS-driven.

• Camera and plane geometry sized so that 1 CSS pixel = 1 WebGL unit at the plane's Z depth.
• Sync loop reads getBoundingClientRect() per element per frame, positions each plane.
• Scroll offset incorporated: planes stay aligned during smooth or native scroll.
• Resize handling: planes resize when their DOM elements change dimensions.
• Each plane has its own shader material for independent effects (hover state, scroll progress, reveal).
• Hover detection via pointer events on the DOM element (not raycasting), mapped to shader uniforms.
• Image/video textures loaded and assigned per plane.
• Complete cleanup: planes removed when their DOM source elements unmount.