IdeaWell

Project ideas from Hacker News discussions.

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

Original Article

Hacker News Discussion

📝 Discussion Summary (Click to expand)

Top Themes

  1. Performance and practicality concerns – many users argue CSS 3‑D is unsuited for serious rendering.

    "Same thought. Even that simple Apple on the front pages runs < 60 fps on my M1 Mac. Rendering 3D objects with CSS is like rendering Doom in Excel Cells. Yes, you can do it. No you should not do it except as a joke/curiosity." – socalgal2

  2. Niche use‑case appeal – the approach shines for very low‑poly or voxel‑style scenes where DOM/CSS integration simplifies layout and styling.

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

  3. Novelty and entertainment value – the experiment is mostly seen as a fun curiosity rather than a production‑ready solution. > "ha, so you could run this on the server and send down a page with no JavaScript at all? ... that's fun." – woodrowbarlow

🚀 Project Ideas

Generating project ideas…

CSS3D VoxelPlayground

Summary

  • A tiny, zero‑dependency JavaScript library that renders low‑poly voxel worlds directly in HTML/CSS with automatic LOD culling.
  • Solves the need for lightweight 3‑D game prototypes that work on any browser without WebGL.

Details| Key | Value |

|-----|-------| | Target Audience | Hobby game makers, educators, makers | | Core Feature | Auto‑culling and CSS‑based mesh generation for voxel scenes | | Tech Stack | Vanilla JS, CSS 3‑D transforms, optional Web Workers | | Difficulty | Low | | Monetization | Hobby |

Notes

  • Matches woodrowbarlow’s curiosity about server‑rendered static CSS scenes and rofko’s desire to avoid full 3‑D stacks for small scenes.
  • Gives HN readers a tangible way to experiment with “Doom in CSS” without heavy libraries.

Server‑Side CSS3D Model Renderer

Summary

  • A hosted service that converts uploaded 3‑D models (GLTF/OBJ) into a static HTML page that displays the model using pure CSS 3‑D transforms.
  • Provides a no‑JavaScript fallback and server‑rendered preview for SEO and low‑bandwidth use cases.

Details

Key Value
Target Audience Web designers, marketers, educators, developers who need quick 3‑D embeds
Core Feature Automatic camera animation and fallback raster snapshot
Tech Stack Node.js with @gltf-transform, Puppeteer for rendering, EJS templates
Difficulty Medium
Monetization Revenue-ready: Subscription $5/mo per 100 renders

Notes

  • Directly answers woodrowbarlow’s idea of “run this on the server and send down a page with no javascript”.
  • Appeals to sgm1018’s excitement and offers a practical utility for showcasing models without heavy JS.

CSS3D Game Builder Studio#Summary

  • A visual drag‑and‑drop editor that lets users assemble simple RTS or city‑builder games using CSS‑based entities and tiles.
  • Leverages CSS layout and events to keep code minimal and UI tightly integrated with the game world.

Details

Key Value
Target Audience Indie developers, hobbyists, educators building browser‑based strategy games
Core Feature Tile‑map editor, CSS animation library, live preview with WebSocket multiplayer sync
Tech Stack React frontend, Firebase Firestore for sync, CSS 3‑D transforms
Difficulty Medium
Monetization Revenue-ready: Freemium with export to standalone HTML5 bundle

Notes

  • Addresses tomaytotomato’s curiosity about “making an RTS or simple city builder game in the browser” and thih9’s suggestion to try it out.
  • Provides the creative‑focused yet practical tooling HN commenters crave, turning CSS3D experiments into real game projects.

Read Later