DOOM no CSS? Programador faz navegador renderizar atirador sem um motor gráfico
Arkadiy Andrienko
Um programador da Holanda lançou uma versão do clássico shooter DOOM que roda sem um motor gráfico. Todos os gráficos do jogo são renderizados via CSS, e o javascript apenas lida com a lógica, movimento do jogador e comportamento dos monstros.
O projeto é chamado cssDoom, e para criá-lo o autor pegou os arquivos WAD originais da versão de 1993 e transformou cada elemento da cena em blocos HTML, com sua posição no espaço definida através de transformações CSS. O principal problema técnico: o CSS não tem câmera, então o autor contornou isso com um truque clássico — o jogador não se move, o mundo inteiro ao seu redor se move. O javascript passa quatro parâmetros para o CSS: as coordenadas X, Y, Z do jogador e o ângulo de visão, e o motor CSS desloca e rotaciona toda a cena na direção oposta. Rodar DOOM em vários dispositivos já é uma notícia antiga, mas reestruturá-lo assim é mais interessante.
O principal problema é que os navegadores não são otimizados para milhares de elementos transformados em 3D. Mapas grandes fazem o Safari no iOS travar, então um sistema de culling foi adicionado: elementos fora do campo de visão ou muito distantes são ocultados. Houve um problema com o céu no jogo. Como o DOOM original engana e desenha a textura do céu em paredes 2D sobre a geometria real. Em 3D honesto, esse truque não funciona, e através das janelas você pode ver coisas que não deveriam estar lá.
No cssDoom, todos os nove níveis do primeiro episódio e cinco níveis de dificuldade estão disponíveis. Além da visão padrão em primeira pessoa, há um modo onde a câmera vai até o teto, assim como um modo de terceira pessoa — e a posição da câmera lá é calculada inteiramente em CSS.
O código fonte está no GitHub e qualquer um pode jogar a versão do navegador.
O que você acha — experimentos como este têm alguma utilidade prática além de “o CSS pode rodar DOOM?” Ou é apenas uma manobra técnica que não afeta o desenvolvimento real? Compartilhe seus pensamentos nos comentários.