Hollandalı geliştirici Niels Leenheer, Doom’un görsellerini baştan kurup tarayıcıda yalnızca HTML ve CSS ile yeniden çalıştırdı. Ekranda gördüğünüz her duvar, zemin, varil ve imp aslında 3D uzayda döndürülüp konumlandırılan birer div; oyun döngüsünü JavaScript yönetiyor, çizimi ise tamamen CSS üstleniyor.
Leenheer, HTML5test.com ve WhichBrowser ile tanınıyor. Bu projeye, birkaç ay önce Doom’u bir osiloskopta çalıştırdığı denemeden sonra başlamış; oradaki kodu kullanarak orijinal WAD dosyasından harita verilerini çıkarmış.
Nasıl çalışıyor?
- Veri kaynağı: 1993’teki paylaşımlı Doom sürümünün WAD içeriğinden tepe–taban yükseklikleri, çizgiler ve sektörler alınıyor; sahne binlerce div’den oluşan statik bir yapı olarak kuruluyor.
- Hesap kitap CSS’te: JavaScript ham koordinatları özel CSS değişkenlerine aktarıyor; duvar genişliği ve açı gibi geometri, CSS’in hypot ve atan2 fonksiyonlarıyla hesaplanıyor.
- Kamera hilesi: CSS’te gerçek bir kamera olmadığı için oyuncu yerine dünya ters yönde hareket ediyor; görünüm bu sayede akıcı kalıyor.
- Katmanlar ve ışık: Zeminler clip-path ile çokgenlere kesiliyor; aydınlatma ise sektör düzeyinde brightness filtresiyle veriliyor. Kapılar ve asansörler veri-öznitelikleriyle tetiklenen CSS geçişleriyle hareket ediyor.
- Performans: Büyük haritalarda binlerce 3D dönüştürülmüş öğe bazı tarayıcılarda zorlayıcı olabiliyor; görünüm dışındaki geometriyi gizlemek için kesme (culling) eklenmiş. Safari ve Chrome’da ilginç hatalarla da karşılaşılmış.
Proje oyun mantığını CSS’e taşımaya kadar zorlanmış ama pratik olmadığı için vazgeçilmiş; JS yalnızca konum ve durum bilgilerini güncelliyor. Leenheer, orijinal Doom’un C kodundan yararlanarak JavaScript tarafında yaklaşık bir oyun döngüsü kurduğunu ve tüm odağını CSS tarafının sınırlarını zorlamaya verdiğini anlatıyor. Kod GitHub’da açık olarak paylaşılıyor.
cssDOOM, tarayıcıda anında oynanabiliyor; Episode 1 (Knee-Deep in the Dead) ve beş zorluk seviyesi seçilebiliyor. Klavye kontrolleri ve dokunmatik arayüz de hazır.
Kısacası bu, WebGL ya da WebGPU’nun yerine geçmek için değil; modern CSS’in nereye kadar gidebileceğini göstermek için yapılmış yaratıcı bir deney. Ve evet, “CSS Doom çalıştırabilir mi?” sorusunun cevabı artık net: Evet, çalıştırıyor.
Kaynak: www.techspot.com