やじうまPC Watch

CSSだけで描画、仕様の限界に挑む「DOOM」ブラウザ版

Webブラウザ上で動作しているcssDOOM

 ソフトウェア開発者のNiels Leenheer氏は、ゲーム「DOOM」の描画をすべてCSSで行なうプロジェクト「cssDOOM」を公開した。「cssdoom.wtf」で実際にプレイ可能だ。

 同氏は以前、DOOMをさまざまなプラットフォームへ移植する「DOOMチャレンジ」の一環として、1980年代のオシロスコープに移植した実績を持つ。今回の移植でもその知見が生かされているという。

 cssDOOMは、ゲームロジックをJavaScriptで、描画をCSSで処理する。壁や床、敵キャラクターなどはすべてdivコンテナで記述され、CSSのtransformを利用して3D空間に配置されている。

 開発の目的は、WebブラウザとモダンCSSの限界を試すためだという。3D描画において、CSSにはカメラの概念が存在しないため、プレイヤーの動きに合わせて世界全体を逆方向に動かす手法が用いられている。

 数千もの要素をブラウザで処理するため、SafariやChromeでクラッシュやテクスチャ消失といった不具合が発生する課題が残っており、詳細なバグについては後日まとめる予定だとしている。