@martin-laxenaire.fr I'd like to show GPU Curtains and attribute you at Google IO this year; wanted to reach out and inquire if that's ok or not, get your approval if possible before I add your rad work to a slide
Comments
Log in with your Bluesky account to leave a comment
This has some similarities to a project of mine which used ThreeJS to render models in the DOM (using a sync'd canvas). I used a custom element to add a model and resolved the elements CSS transforms to position the model in 3D space. Very interested to dig into the code and see how you did DOM sync
Oh, my bad! 😅
But this is super cool too! 💥
gpu-curtains DOMObject3D/DOMMesh are not taking CSS transforms into account tho, but it's a pretty nice idea.
Using transforms worked well. All I had to do was decompose the transform on the host element and apply it to the model. It also meant CSS animations and style updates worked automatically. Biggest challenge I had was detecting changes in computedStyle in a performant way.
Comments
Let me know if you need anything.
As for gpu-curtains, most of the DOM synced happens here (see 'updateModelMatrix', 'documentToWorldSpace' and 'computeWorldSizes'): https://github.com/martinlaxenaire/gpu-curtains/blob/main/src/curtains/objects3D/DOMObject3D.ts#L380
It's basically DOM to world space computations.
But this is super cool too! 💥
gpu-curtains DOMObject3D/DOMMesh are not taking CSS transforms into account tho, but it's a pretty nice idea.
what are your personal favorite demos? or do you have a favorite special sauce you'd like called out?
The homepage https://martinlaxenaire.github.io/gpu-curtains/ or https://martinlaxenaire.github.io/gpu-curtains/examples/mixing-dom-synced-planes-transmissive-bubbles/ or https://martinlaxenaire.github.io/gpu-curtains/examples/custom-scroll-and-transformations/ maybe?
Whatever you'll chose I'm eager to see how it'll turn out. 🙏
it nerd sniped me into a very minimal (aka also not 100% as rad as yours) recreation with CSS https://codepen.io/argyleink/pen/LEYOgxy
(Jokes asides it's impressive to see how fast CSS is evolving nowadays).