Toaster: Pure CSS 3D Editor • Hacker News Board

Trayja-Peter wrote: post #8

Trayja-Peter wrote: post #4

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'm doing fine on Safari. Sitting around 30 fps for me during moves etc. (Safari 16.1 on MacOS Ventura; M1 Pro)

Re: Toaster: Pure CSS 3D Editor

#24

Post by pastacacioepepe » Mon, May 22, 2023, 11:58 AM UTC

raspyberr wrote: post #13

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

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.

Re: Toaster: Pure CSS 3D Editor

#25

Post by _shantaram » Mon, May 22, 2023, 12:47 PM UTC

jdthedisciple wrote: post #15

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

Re: Toaster: Pure CSS 3D Editor

#26

Post by davidmurdoch » Mon, May 22, 2023, 1:35 PM UTC

c00lio wrote: post #17

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

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

Re: Toaster: Pure CSS 3D Editor

#27

Post by forgotAgain » Mon, May 22, 2023, 1:57 PM UTC

faeyanpiraat wrote: post #12

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"

I see it more as scratching an itch.

Re: Toaster: Pure CSS 3D Editor

#28

Post by asimpletune » Mon, May 22, 2023, 2:00 PM UTC

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

Re: Toaster: Pure CSS 3D Editor

#29

Post by vintagedave » Mon, May 22, 2023, 2:16 PM UTC

asimpletune wrote: post #28

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

Re: Toaster: Pure CSS 3D Editor

#30

Post by thomascgalvin » Mon, May 22, 2023, 2:20 PM UTC

asimpletune wrote: post #28

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

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