Toaster: Pure CSS 3D Editor | Hacker News Reader

Toaster: Pure CSS 3D Editor

petertyliu.github.io

194 pointsthunderbong36 comments

From 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...

> 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

Creator 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.

I'm doing fine on Safari. Sitting around 30 fps for me during moves etc. (Safari 16.1 on MacOS Ventura; M1 Pro)

This is the perfect example of "Your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should"

Of course we should.

I see it more as scratching an itch.

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

[0]: https://jteration.github.io/city-block/

Stop signs are blank on the back. Could you hide the text instead?

Ah, that’s a good point. More accurate and easier

This is insane. Thanks for sharing this gem.

How is that pure CSS? Doesn't show anything with Javascript disabled.

The 3d rendering is purely CSS based and not webgl in a canvas.

Very impressive (even if not the whole editor is CSS as I'd thought).

I had the same thought. Title should be "3D Editor to Create Models Made of Pure CSS".

I guess you could theoretically also write a 3D editor in SVG and JavaScript, just by manipulating 2D triangles.

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. :)

Reminds me of this battle toaster by a friend: https://3dtotal.com/tutorials/t/making-of-battle-toaster-dan...

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".

Yes - Google Docs implements the document page rendering via canvas. It replaces the previous implementation which used HTML for layout.

https://zapier.com/blog/google-docs-canvas-based-rendering/

https://workspaceupdates.googleblog.com/2021/05/Google-Docs-...

For your inverse example, isn't that how Flutter renders?

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.

Nevertheless: incredibly cool project!

This is like a scalable vector graphics version of 3D editing software!

Shading instead of outlines might look nice.

Should be relatively easy to implement if you use hsl colors and set the lightness as a function of the nodes rotation.

The models aren't looking right on mobile (Android, Chrome).

But maybe it wasn't intended for mobile optimization.

Nice proof of concept regardless!

they look fine for me on chrome and firefox mobile, but they don't rotate properly on firefox, the rendering just glitches out till i stop rotating it

Name is very accurate, as it instantly ramps up CPU usage.

Thanks for your sharing, idea is amazing.

But it doesn't actually work without JS...

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.

Imagine modeling 3D and you have to reload the page every time you change the X transform by 1 pixel.

Sounds like a great experience.

now make it SVG instead of CSS :)

Reply on news.ycombinator.com