Every part of the model is an HTML element with CSS 3D transform functions; there're no WebGL or canvas shenanigans!
The editing tools are only available on desktop, and performance will be passable at best (nearly unusable on Safari), but that's what happens when you push browser engines to their limits lol. If you find any bugs that aren't already listed in the repo issues, feel free to create new issues.
Btw, could someone more knowledgeable than me explain why the app works ~okay on Chrome but works at like 2 fps on Safari? What, if anything, can I do to fix this? I'm guessing it has something to do with how Webkit's rendering engine works, but such things are beyond me
I had a quick peek at the profiler in Safari when you drag the model around, and the CPU on my machine is spiking at more than 100%, with 58% of the load being style recalculation. I suspect something in Chrome is hardware accelerated that isn't in Safari.
That's awesome. And it's all React, which goes a long way to show that React apps can be fast even when there's a ton of stuff going on. Really impressive work.
A feature to export would be great. I tried copying <main> and the CSS but it didn't work. :)
Well, it does not take a lots a seconds to figure out that an interactive 3D modeling app might need a little bit more of what is exposed in the DOM api to be built.
The author here only meant pure CSS 3D rendering, which, while being around for quite some time now, still amazes me a little.
Very cool. The performance is what it is because the everything is being treated as nodes in an html document. There is a lot of overhead in making that work.
Does anyone have a link to examples of the inverse? Like, "2d, html-style text documents, but implemented entirely in canvas".
Extremely cool. I hand rolled some 3d objects using only CSS a few years ago [0]. One challenge I faced with the rotation was that text on the stop and bus signs would appear backwards from behind. To solve this I added an animation that flips the div 180 degrees. I tried to do the flip while the signs were occluded, but I didn't add anything to occlude the bus stop sign so you can see it flip as it rotates
Wow... I don't think I've ever seen my M1 MacBook Pro lock up this badly. It took me multiple minutes to close the browser window after loading the snowman model.
36 comments
[ 815 ms ] story [ 1370 ms ] threadGithub repo: https://github.com/PeterTYLiu/toaster
Every part of the model is an HTML element with CSS 3D transform functions; there're no WebGL or canvas shenanigans!
The editing tools are only available on desktop, and performance will be passable at best (nearly unusable on Safari), but that's what happens when you push browser engines to their limits lol. If you find any bugs that aren't already listed in the repo issues, feel free to create new issues.
[0]: https://old.reddit.com/r/webdev/comments/13nc54m/i_made_a_3d...
lol appreciate the honesty, this is crazy though. Mad respect
A feature to export would be great. I tried copying <main> and the CSS but it didn't work. :)
The author here only meant pure CSS 3D rendering, which, while being around for quite some time now, still amazes me a little.
Sounds like a great experience.
But maybe it wasn't intended for mobile optimization.
Nice proof of concept regardless!
Does anyone have a link to examples of the inverse? Like, "2d, html-style text documents, but implemented entirely in canvas".
https://zapier.com/blog/google-docs-canvas-based-rendering/
https://workspaceupdates.googleblog.com/2021/05/Google-Docs-...
[0]: https://jteration.github.io/city-block/
Nevertheless: incredibly cool project!
Should be relatively easy to implement if you use hsl colors and set the lightness as a function of the nodes rotation.