CIRCLE WITH A DOT

@zeroday happy to investigate if you can give me some more details.

@sgtpepere on my PS controller it is mapped to one of the top buttons. But to be honest it was little more than hooking it up and testing if it worked. Not much thought went into creating a good control mapping.

@sjb I used Firefox as my main browser during the development of this, as it had the least rendering issues. Their CSS 3D support has been really solid.

@devnull The whole idea of this project is to see what is possible with modern web standards and pushing the limits and not to create something that works everywhere ‍️

@devnull this is probably because the browser you are using does not support Anchored Positioning.

@BoydStephenSmithJr The most likely reason is the ESR probably does not yet support Anchored Positioning, which is used for positioning the gun relative to the status bar.

@ZoidbergForPresident It should work when you go to Full screen mode (left square button in the top right), which uses Pointer Lock to capture the mouse if supported by the browser.

@aumetra

@dysfun Same principle. Just a few more divs

Want to know even more?

I'm speaking at #cssday where I will give a talk called "CSS Doom Lasers". Where I will talk about CSS and DOOM and much more. Hint: Lasers.

Tickets are still on sale:
https://cssday.nl

Want to know how I created this?

Check my blog post with an explanation of the math, the techniques I used and the problems I ran into.

CSS is DOOMed!

Every wall, floor, barrel, and imp is a div — DOOM rendered in 3D 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.

Hello my name is Niels Leenheer (nielsleenheer.com)

CSS is DOOMed!

I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

cssDOOM

DOOM rendered entirely in CSS. Every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

(cssdoom.wtf)

Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.