CSS Minecraft
benjaminaster.com
CSS Minecraft
1–10 of 154 posts
Re: CSS Minecraft
#2Without a doubt the most impressive thing I've seen with CSS.
This immediately brought "A Single Div"[0] to mind, which stood as the coolest CSS demo I'd seen for... 11 years!
This one takes the cake. I'll be pouring over it. Thanks!
Re: CSS Minecraft
#3> For the best performance, please close other tabs and running programs.
This has always been the case with CSS, hasn't it? When you use it for rendering something relatively complex, you're kinda doomed.
I get the dream, we want everything to be declarative, and leave room for future optimizations, so that we can write once and run everywhere forever.
But in practice, it's not really an improvement over traditional GUIs that let you draw directly. Hence CSS is literally adding draw[1].
This is a huge reason 90s.dev doesn't use HTML/CSS but starts from scratch and lets you draw right into WebGL2 yourself, or with high-level APIs if you want.
[1] https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...
Re: CSS Minecraft
#4If anyone's wondering how it manages the state, a quick peek into the source code shows that it uses radiobuttons and the HTML contains all the blocks you could ever possibly place.
Re: CSS Minecraft
#5Please tell me if I understood it correctly:
It implements voxels via .
Each of the faces of each voxel is configured via s, one for each face having a different CSS class.
There is a voxel for each type of block (dirt, grass, stone, etc) and only one is activated at a time.
The s are arranged in a 9x9 grid 10 blocks tall times the number of different types of blocks (about 6500 total).
All that is enclosed with s with CSS classes that respond to the camera navigation (look up/down, move up/down, forward/back, clockwise/counter)
That is brilliant!
Re: CSS Minecraft
#6If anyone's wondering how it manages the state, a quick peek into the source code shows that it uses radiobuttons and the HTML contains all the blocks you could ever possibly place.
I... you're right. I was wondering why the world was only 9x9x9, there's 46k lines showing each block can have air, stone, grass, dirt, log, wood, leaves, or glass.
I kind of like it.
Re: CSS Minecraft
#7If anyone's wondering how it manages the state, a quick peek into the source code shows that it uses radiobuttons and the HTML contains all the blocks you could ever possibly place.
That is the most hacky solution I may have ever seen in a CSS demo. I love it.
Re: CSS Minecraft
#8Blew my mind. I have hundreds of tabs open, no issue on linux chrome.
Re: CSS Minecraft
#9Blew my mind. I have hundreds of tabs open, no issue on linux chrome.
I think at some point the number of tabs doesn't matter because the tab is unloaded and the state is maybe stored on disk. As long as you don't open them, having them open shouldn't slow the browser down.
Re: CSS Minecraft
#10If anyone's wondering how it manages the state, a quick peek into the source code shows that it uses radiobuttons and the HTML contains all the blocks you could ever possibly place.
If anyone is equally curious how the camera state works, it looks like the camera is controlled by running animations when a button is in its :active state and pausing them otherwise.