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
- @levelsio (@levelsio) on Xx.com
- Bruno Simonbruno-simon.com
- Codrops | Fueling web creativity since 2009tympanus.net
- Building a Magical 3D Button with HTML and CSS • Josh W. Comeaujoshwcomeau.com
- staniks.github.iostaniks.github.io
- The Blog of Maxime Heckelblog.maximeheckel.com
- An Introduction to the Browser Rendering Pipelinewebperf.tips
- Anime.js | JavaScript Animation Engineanimejs.com
- Perspectivewillphan.com
- Experiments in procedural dappled light shadersjzhao.xyz
- Creative Hub | Codropstympanus.net
- Ray Tracing in One Weekendraytracing.github.io