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
Explore this link on the map →saved by
related reading
- Building a Magical 3D Button with HTML and CSS • Josh W. Comeaujoshwcomeau.com
- The Blog of Maxime Heckelblog.maximeheckel.com
- staniks.github.iostaniks.github.io
- Ray Tracing in One Weekendraytracing.github.io
- An Introduction to the Browser Rendering Pipelinewebperf.tips
- Perspectivewillphan.com
- Transform objects — Three.js Journeythreejs-journey.com
- Rachel Weirachelqrwei.ca
- On Rendering the Sky, Sunsets, and Planets - The Blog of Maxime Heckelblog.maximeheckel.com
- Experimenting A New Syntax To Write SVGyuanchuan.dev
- Populating the page: how browsers work - Performance | MDNdeveloper.mozilla.org
- Creating Daylight | The Shadows | Blogbasement.studio