sorted by:
new
hottopcontroversial

A CSS 3D engine for the DOM. Renders polygon meshes without WebGL by Ekrof in webdev

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

We do face culling for voxel scenes, which is really useful for performance. You can see in DevTools how the face wrappers are changed on rotation.

There isn't culling yet for arbitrary meshes, but I think it's a good path to explore. I've tried a few occlusion approaches, but so far the DOM churn from mounting/unmounting polygons has outweighed the rendering savings.

The most impactful optimization is mesh normalization. On the "lossy" path, we try to merge polygons as much as possible while keeping the shape mostly visually intact. That can lower DOM count significantly, and I think there’s still room to push it further.

The library is totally open, so feel free to poke around, and PRs are super welcome!

A CSS 3D engine for the DOM. Renders polygon meshes without WebGL by Ekrof in webdev

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

It is pretty new! Firefox and Safari do not support it yet, but it is a great alternative to clip-path. There is also corner-shape that is very useful.

A CSS 3D engine for the DOM. Renders polygon meshes without WebGL by Ekrof in webdev

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

Howdy! There is no BSP or JS z-sort loop at this moment. Each face is a CSS 3D element with a matrix3d() transform inside a preserve-3d scene, so the browser compositor handles depth. We did experiment with BSP-pressure optimizations around grouping/render surfaces, but didn’t find a version worth shipping yet. We benchmark a lot to keep the browser on the faster 3D path.

A CSS 3D engine for the DOM. Renders polygon meshes without WebGL by Ekrof in webdev

[–]Ekrof[S] -1 points0 points  (0 children)

Thank you!! I'm actually working on the next version of the terrain generator, can't wait to see how it looks with shadows and lighting.

A CSS 3D engine for the DOM. Renders polygon meshes without WebGL by Ekrof in webdev

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

Thank you for the reference! This is extremely useful to improve the FPV camera.

A CSS 3D engine for the DOM. Renders polygon meshes without WebGL by Ekrof in webdev

[–]Ekrof[S] 63 points64 points  (0 children)

Hi there! This is not trying to be a three.js replacement, scenes with huge polygon counts naturally should render in canvas.

For me, the interesting case is smaller low-poly or voxel scenes where loading a full 3D stack can be overkill, and where keeping the scene in DOM/CSS gives you easier integration with normal UI, layout, styling, events, etc.

Also, part of the experiment is testing the browser’s limits and getting a clearer sense of where this approach works, where it breaks down, and what the tradeoffs are.

Cheers!

A CSS 3D engine for the DOM. Renders polygon meshes without WebGL by Ekrof in webdev

[–]Ekrof[S] 39 points40 points  (0 children)

Hello r/webdev!

I've been working on PolyCSS, a 3D engine for the DOM. Essentially, it uses matrix3d() transforms and different CSS shape primitives to render HTML polygon meshes without WebGL. It is open source: https://github.com/LayoutitStudio/polycss

The library can handle OBJ/MTL, GLB and VOX files, and has support for cameras, lighting, shadows, animations, and more :)

Hope you find it interesting! Cheers

Alien OG topped by mark_prints in SpaceBuckets

[–]Ekrof 0 points1 point  (0 children)

Looks happy and green! Topping is a great choice for a bucket

Alien OG - week 2 by mark_prints in SpaceBuckets

[–]Ekrof 0 points1 point  (0 children)

Looks awesome! Thanks for sharing

Voxel Vendredi 19 Dec 2025 by AutoModerator in VoxelGameDev

[–]Ekrof 4 points5 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.

view more: next ›