🧊 Technical Showcase: A full WebGPU 3D engine that maps shader geometry to your DOM elements. Martin's gpu-curtains gives you lights, shadows, compute shaders, glTF, and instancing, but the real trick is how it turns your divs into scrollable, resizable shader planes without any coordinate math. The successor to... curtains.js, rebuilt from scratch. 🔗 #WebGPU #CreativeCoding #Shaders #WebDev #3Dshow more

The DOM-shader bridge is what sets this apart. Most WebGPU engines force full-canvas takeover — you lose scroll, resize, responsive layout for free. Keeping CSS for positioning while the GPU handles rendering means zero coordinate math and the browser's layout engine does the heavy lifting. Seriously elegant architecture.

@martinlaxenaire mapping shader planes to divs without coordinate math is clever

@martinlaxenaire 100% ... and it's been mastered from his prior WebGL library... but now better and more capable

@martinlaxenaire makes sense, iteration on a solid foundation

@martinlaxenaire This is next-level DOM manipulation sorcery.

@martinlaxenaire … all behind simple and elegant APIs too :)

@martinlaxenaire Smooth DOM sync. How are you handling the resize events for the shader planes without losing frame sync? Really clean integration.

@martinlaxenaire why is there a video behind link and not the actual interactive website?

@martinlaxenaire It links to a showcase that highlights the project, the creator, and some background. All of the relevant links are in the showcase.

@martinlaxenaire 🫤