CSS is DOOMed - Rendering DOOM in 3D with CSS | Hello my name is Niels Leenheer
Every wall, floor, barrel, and imp is a div — DOOM rendered entirely in CSS. Using 3D transforms, CSS math functions, @property, clip-path, anchor positioning, and SVG filters to build a fully playable 3D first-person shooter in the browser without Canvas or WebGL.
No, CSS is awesome. CSS is better than ever and it is only getting better. And that is why I built DOOM in CSS. Every wall, floor, barrel, and imp is a <div> , positioned in 3D space using CSS transforms. The game logic runs in JavaScript, but the rendering is entirely CSS. You can play it right now . Why? Because I wanted to find the limits of what a browser can do. See how powerful modern CSS is. And because it’s DOOM. In CSS. Do you really need more of a reason? So, modern CSS is awesome. The fact that you can even build something like this is proof how much CSS has progressed in the
saved by
related reading
- An Introduction to the Browser Rendering Pipelinewebperf.tips
- Crafting the Next.js Websiterauno.me
- Experimenting A New Syntax To Write SVGyuanchuan.dev
- The Web Animation Performance Tier List | Motion Magazinemotion.dev
- Building a Magical 3D Button with HTML and CSS • Josh W. Comeaujoshwcomeau.com
- staniks.github.iostaniks.github.io
- Text Rendering Hates You - Faultlorefaultlore.com
- glimm — shader-driven page transitionsglimm.dev
- Perspectivewillphan.com
- LaTeX.css — Make your website look like a LaTeX documentlatex.vercel.app
- The Web Animation Performance Tier List | Motion Magazinemotion.dev
- Constructing the Object Model | Articles | web.devdevelopers.google.com