Toaster: Pure CSS 3D Editor
petertyliu.github.io
Toaster: Pure CSS 3D Editor
1–10 of 38 posts
Re: Toaster: Pure CSS 3D Editor
#2From the Reddit thread [0] -
Github 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...
Re: Toaster: Pure CSS 3D Editor
#3This is insane. Thanks for sharing this gem.
Re: Toaster: Pure CSS 3D Editor
#4Creator here, thanks for sharing my link! I was going to do a Show HN when it was more polished, but publicity never hurts :)
Re: Toaster: Pure CSS 3D Editor
#5This is like a scalable vector graphics version of 3D editing software!
Re: Toaster: Pure CSS 3D Editor
#6> Are there any practical applications for this app?
> Nope!
> It's really hard to use!
> Yup!
lol appreciate the honesty, this is crazy though. Mad respect
Re: Toaster: Pure CSS 3D Editor
#7Reminds me of this battle toaster by a friend: https://3dtotal.com/tutorials/t/making-of-battle-toaster-dan...
Re: Toaster: Pure CSS 3D Editor
#8Creator here, thanks for sharing my link! I was going to do a Show HN when it was more polished, but publicity never hurts :)
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
Re: Toaster: Pure CSS 3D Editor
#9That'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 and the CSS but it didn't work. :)
Re: Toaster: Pure CSS 3D Editor
#10Creator here, thanks for sharing my link! I was going to do a Show HN when it was more polished, but publicity never hurts :)
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.