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.

Niels Leenheer

@html5test.com

20 Mar

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.

Niels Leenheer

@html5test.com

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.

20/3/26, 3:35 pm0 reposts1 like

Niels Leenheer

@html5test.com

20 Mar

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.

Niels Leenheer

@html5test.com

20 Mar

I'll post a link to the demo and the source code somewhere next week, together with a nice writeup of some of the things I encountered and learned while creating this.