Post

DOOM.css is getting somewhere. Gameplay is pretty much done completely in JavaScript, but the whole rendering is 100% CSS. This map is 768 div's with 3D transforms. Added a nice spectator view as well which is literally just adding a couple of CSS custom properties override for the rendering.

Rendering in CSS works remarkably well. Even with 1000+ divs in both Safari and Firefox, but larger maps tend to cause the browser to run at 100% CPU with some stutters in the rendering. As you can see Chrome has issues.

The problem with Chrome is that the number of surfaces somehow overwhelm the compositor, or something like that and it starts dropping textures. Firefox and Safari don't have that problem, but on larger maps they also slow down. Strange that Chrome hits that limit soo much quicker.

I did implement culling, which hides surfaces that are not visible, which completely solves the slowdown issue in Firefox and Safari on large maps. The player is turning around and it automatically hides the divs that are not visible to the player, freeing up resources for the browser.