HN Debrief

Show HN: A CSS 3D Engine (no WebGL)

PolyCSS is an open source experiment that turns 3D models into DOM elements and uses CSS 3D transforms to render them, skipping WebGL entirely. The author framed it as a fit for small low-poly or voxel scenes where a full 3D stack feels heavy, and where keeping everything in HTML and CSS makes normal layout, styling, and event handling much easier. It is also meant to probe browser limits, not to compete with three.js on dense scenes.

For product teams, this is a reminder that "worse on raw performance" can still win in narrow cases if it buys simpler integration, easier interaction, or deployment in constrained environments.

Discussion mood

Mostly impressed but skeptical. People liked the ingenuity and nostalgia factor, but the dominant reaction was that DOM-per-triangle rendering is too slow for serious 3D and only makes sense for small scenes or unusual integration needs.

Key insights

  1. 01 Per-face DOM events are the strongest practical advantage here.
    In WebGL, clicking a specific triangle usually means raycasting and extra scene logic. In PolyCSS, each face is already a DOM element, so interaction falls out of the platform with ordinary event handlers.

    If your 3D scene behaves more like interactive UI than a game world, DOM-native picking can outweigh renderer inefficiency.
      Attribution:
    • 1taimoorkhan0 #1
  2. 02 HTML and CSS output creates a no-JavaScript delivery path that WebGL cannot match.
    Several comments pointed out you can pre-render the scene on the server, fake camera movement by transforming the world instead, and even run CSS-only animation. That makes the engine relevant in restricted environments, not just as a demo.

    The unusual win here is deployability. CSS 3D can survive in places where a JavaScript 3D runtime cannot.
      Attribution:
    • woodrowbarlow #1
    • semolino #1
    • apresmoi #1 #2
  3. 03 This is better thought of as a toybox for stylized experiments than as a foundation for mainstream game genres.
    Comments converged on "maybe" for simple city-builder-style tinkering and "no" for an RTS, because once you need scale, animation, and sustained frame rate, purpose-built engines pull away fast.

    Use this to prototype weird, low-poly interfaces or art projects. Do not bet a performance-sensitive game on it.
      Attribution:
    • tomaytotomato #1
    • thih9 #1
    • blueboo #1
    • apresmoi #1

Against the grain

  1. 01 Raw speed is not the only axis that matters.
    The author argued that for small voxel or low-poly scenes, avoiding a full 3D stack can simplify the whole product. You keep the scene in the DOM, get easier styling and events, and can even render static output without loading the library at runtime.

    A slower renderer can still be the right tool when integration cost and platform fit matter more than frame rate.
      Attribution:
    • rofko #1
  2. 02 CSS animation is not automatically the bottleneck people assume.
    One comment pushed back on the idea that removing JavaScript necessarily hurts runtime behavior, noting that CSS transform animations often outperform JavaScript-driven animation in non-WebGL setups. The real comparison is not "CSS vs JS" but "DOM rendering vs GPU rendering."

    Do not confuse animation control with rendering backend. The expensive part here is the DOM geometry, not the mere absence of JavaScript.
      Attribution:
    • capitainenemo #1

Reference links

Project and demos

WebGL comparisons

Related CSS 3D experiments

  • CSS Minecraft
    Example of a no-JavaScript CSS 3D project using form elements for camera rotation.
  • Previous HN post about CSS Minecraft
    Linked as prior discussion of the CSS Minecraft project.
  • cssDOOM
    Referenced as an earlier demonstration of Doom rendered with CSS.
  • Terra
    Shared as a related browser game or experiment from the same makers when discussing game use cases.