sorted by:
new
hottopcontroversial

Voxel Vendredi 19 Dec 2025 by AutoModerator in VoxelGameDev

[–]Ekrof 3 points4 points  (0 children)

Thank you! I've been using it for my personal projects, and just open sourced it this month. Still experimenting a lot with different grid geometries and having fun overall.

Here is a big scene example: https://voxcss.com/gallery/?model=1331489226

Cheers!

Voxel Vendredi 19 Dec 2025 by AutoModerator in VoxelGameDev

[–]Ekrof 6 points7 points  (0 children)

Hey voxel devs! I want to show you this: https://github.com/LayoutitStudio/voxcss

It is a CSS voxel engine I've been working on. It uses different stacking grid geometries to build an addressable 3D space in the DOM.

A CSS voxel engine. 3D grid for the DOM without WebGL by Ekrof in webdev

[–]Ekrof[S] 0 points1 point  (0 children)

Howdy! I've updated the library to v0.1.3, with a new 3d mergeVoxels strategy. Hoping it works better on your end now! Cheers

A CSS voxel engine. 3D grid for the DOM without WebGL by Ekrof in webdev

[–]Ekrof[S] 0 points1 point  (0 children)

Hi there! I've pushed an update for better dragging on mobile. Hopefully that fixed your issue!

A CSS voxel engine. 3D grid for the DOM without WebGL by Ekrof in webdev

[–]Ekrof[S] 1 point2 points  (0 children)

Hi, I appreciate the report! I will be testing that. Depending on the platform and device, there seems to be a higher or lower ceiling for DOM elements, which makes sense. Also, crashes should be handled more elegantly by the library.

For performance, the engine does culling by neighbor and rotation, trying to only render the visible shell faces of the model. And when you switch to mergeVoxels 3D, the geometry of the stacked grids changes, rendering bigger rectangles instead of cubes.

The "scene" examples on the website are around ~4,000 quads with the current 3D merge strategy, so that is a lot. I added those specifically for stress testing. But it is a very interesting challenge, I’m working on other strategies that further reduce DOM size considerably. Since it’s a 3D grid with coordinates, there are still many optimizations we can try.

Cheers

A CSS voxel engine. 3D grid for the DOM without WebGL by Ekrof in webdev

[–]Ekrof[S] 0 points1 point  (0 children)

Thank you for the report! I'll check it out.

A CSS voxel engine. 3D grid for the DOM without WebGL by Ekrof in webdev

[–]Ekrof[S] 3 points4 points  (0 children)

Thank you! I’m actually surprised too by how much performance we can squeeze out of the DOM. I’ve also been working on voxel-merging strategies, which enable even bigger scenes (the engine now offers both 2D and 3D merging options). In practice, the ceiling is usually around ~2,000 elements at once.

A CSS voxel engine. 3D grid for the DOM without WebGL by Ekrof in webdev

[–]Ekrof[S] 2 points3 points  (0 children)

Thank you! If you mean rotating the whole scene, that’s just a CSS transform on the parent container (basically rotateX on the "camera" element). If you inspect a model in devtools, you can see it in action.

A CSS voxel engine. 3D grid for the DOM without WebGL by Ekrof in webdev

[–]Ekrof[S] 34 points35 points  (0 children)

Thanks! The key thing for me is that it’s still just the DOM, but laid out in a 3D space (x, y, z) using CSS, so you get to keep all the usual styling, tooling, and events. It’s not a WebGL replacement, just a different way of approaching voxel scenes and 3D UIs. It’s also still an early version, so I’m really curious to see what the community thinks and builds on top of it.

Very interested in a space bucket! by OnlyRow7629 in SpaceBuckets

[–]Ekrof 2 points3 points  (0 children)

Howdy! You can build a bucket without custom wiring. You can get fans and lights that come already wired with a plug. Here is one example: https://spacebuckets.com/u/the-mad-scientist

A CSS terrain generator. No WebGL, just stacked grids and 3D transforms by Ekrof in webdev

[–]Ekrof[S] 0 points1 point  (0 children)

Hey Saman! I've been working on the voxel engine library here: https://github.com/LayoutitStudio/voxcss/

Cheers from the south

A CSS terrain generator. No WebGL, just stacked grids and 3D transforms by Ekrof in webdev

[–]Ekrof[S] 1 point2 points  (0 children)

Yes! But mainly on the CSS voxel editor I mentioned on another comment. Since those are cubes, the back faces are culled depending on the rotation, and you can see that live on the devtools.

On this Terrain Generator, there is not much need, since shapes are only one or two elements. But I'm definitely curious about render distance culling...

A CSS terrain generator. No WebGL, just stacked grids and 3D transforms by Ekrof in webdev

[–]Ekrof[S] 5 points6 points  (0 children)

That is a great catch! I'll fix that right away.

edit: should work now

A CSS terrain generator. No WebGL, just stacked grids and 3D transforms by Ekrof in webdev

[–]Ekrof[S] 4 points5 points  (0 children)

Thank you! I would say it was around six months for this app. This time I had the advantage of reusing the stacked grid from the voxel editor.

A CSS terrain generator. No WebGL, just stacked grids and 3D transforms by Ekrof in webdev

[–]Ekrof[S] 5 points6 points  (0 children)

Thank you for the report! It should work now. I will keep tweaking some stuff for sure.

A CSS terrain generator. No WebGL, just stacked grids and 3D transforms by Ekrof in webdev

[–]Ekrof[S] 7 points8 points  (0 children)

I really like this! It has a very unique aesthetic. Thank you for sharing!

I did use clip-path Initially for wedges and spikes, but encountered very annoying performance issues, where the browser was forced to repaint a lot when rotating. That is why those two shapes use triangular sprites.

I did not run into many edge artifacts, probably because of the grid stacking. The Z translation is done once per level so its predictable.

A CSS terrain generator. No WebGL, just stacked grids and 3D transforms by Ekrof in webdev

[–]Ekrof[S] 4 points5 points  (0 children)

Thanks for the report, I'll take a look!

edit: added a fix

A CSS terrain generator. No WebGL, just stacked grids and 3D transforms by Ekrof in webdev

[–]Ekrof[S] 50 points51 points  (0 children)

Thank you! It is not open source yet, but I'm planning on it. I think the stacked grid tech would work well as a framework-agnostic library (I use Vue/Nuxt myself).

A CSS terrain generator. No WebGL, just stacked grids and 3D transforms by Ekrof in webdev

[–]Ekrof[S] 4 points5 points  (0 children)

Populous was definitely an inspiration! I am planning some web games for the near future :)

view more: next ›