gik|iewicz

title: „CSSQuake: klasyczny Quake działa w przeglądarce dzięki CSS”
description: „CSSQuake to port Quake z 1996 roku działający w przeglądarce. Silnik PolyCSS renderuje grafikę 3D wyłącznie za pomocą HTML i CSS. Sprawdź, jak to działa.”
coverImage: „https://gikiewicz.eu/wp-content/uploads/2026/06/cssquake-cover.jpg”
date: „2026-06-20”
author: „Grzegorz Kikiewicz”
category: „Programowanie”
tags:
– CSS
– Programowanie
– HTML
– Gry
slug: „cssquake”

Silnik PolyCSS renderuje klasycznego Quake z 1996 roku bez użycia WebGL, Canvas ani zewnętrznych bibliotek graficznych. Projekt CSSQuake zdobył 131 punktów na platformie Hacker News, co potwierdza duże zainteresowanie społeczności technologicznej eksperymentami opartymi wyłącznie na kaskadowych arkuszach stylów.

TL;DR: CSSQuake to implementacja kultowej strzelanki 3D z 1996 roku, działająca w oparciu o silnik PolyCSS. Gra uruchamia się bezpośrednio w przeglądarce internetowej bez konieczności instalacji wtyczek. Cała logika wyświetlania trójwymiarowej przestrzeni opiera się na natywnym renderowaniu kodu HTML i CSS, udowadniając, że arkusze stylów mogą służyć do obliczeń graficznych.

Jak CSSQuake renderuje przestrzeń 3D w przeglądarce?

Projekt CSSQuake renderuje trójwymiarową przestrzeń wyłącznie za pomocą natywnych właściwości CSS, eliminując potrzebę korzystania z WebGL. Zamiast tradycyjnych buforów klatki, silnik generuje strukturę DOM, w której każdy element mapy jest pozycjonowany za pomocą transformacji 3D. Repozytorium GitHub LayoutitStudio wskazuje, że to port oryginalnej gry z 1996 roku napędzany przez autorski silnik PolyCSS. Wynik to w pełni interaktywna strona internetowa.

Oto zestawienie najważniejszych atrybutów implementacji:

{„title”:”PolyCSS: Silnik renderujący HTML i CSS bez zewnętrznych zależności”,”content_md”:”Nagłówek hook z konkretną liczbą lub faktem technicznym otwiera temat.\n\n> TL;DR: Projekt PolyCSS to silnik renderujący napisany w JavaScript, który bezpośrednio rzutuje wierzchołki na płaszczyznę. Co więcej, format wyjściowy to standardowy, inspekcyjny kod HTML oraz CSS. Dzięki temu programiści mogą natychmiast analizować strukturę wygenerowanego dokumentu w narzędziach deweloperskich przeglądarki. Z kolei brak konieczności instalacji dodatkowych bibliotek po stronie klienta znacznie upraszcza wdrożenie.\n\n### Jak działa silnik renderujący PolyCSS?\n\nSilnik renderujący PolyCSS odpowiada bezpośrednio za rzutowanie wierzchołków na płaszczyznę, co stanowi rdzeń całego mechanizmu. Ponadto projekt został udostępniony w modelu open-source na platformie GitHub, co pozwala na swobodne analizowanie kodu. Zatem programiści mogą samodzielnie weryfikować implementację poszczególnych funkcji. To upraszcza proces adaptacji.\n\nW rezultacie architektura oparta na rzutowaniu wierzchołków generuje standardowy format graficzny. Dokument wyjściowy jest w pełni inspekcyjny. Programiści otrzymują dostęp do natywnego HTML i CSS. Co więcej, struktura jest dostępna natychmiast w narzędziach deweloperskich.\n\n### Czy projekt wymaga zewnętrznych bibliotek?\n\nZależności zewnętrzne ograniczają się do minimum, ponieważ silnik eliminuje konieczność instalacji dodatkowych pakietów po stronie klienta. Przede wszystkim takie podejście redukuje narzut operacyjny oraz przyspiesza czas ładowania aplikacji. Z tego powodu wdrożenie narzędzia jest bardzo proste. To znacznie ułatwia pracę.\n\nOtóż brak dodatkowych zależności sprawia, że kod działa autonomicznie w środowisku przeglądarki. Ponadto wygenerowany format graficzny to czysty, inspekcyjny HTML i CSS. Dlatego narzędzie jest dostępne do analizy natychmiast po wyrenderowaniu w narzędziach deweloperskich. Takie rozwiązanie poprawia użyteczność.\n\n### W jakim formacie generowane są dane wyjściowe?\n\nFormat graficzny zapewniewany przez silnik PolyCSS to w pełni inspekcyjny HTML oraz CSS, co umożliwia bezproblemowe debugowanie. Na przykład zewnętrzne zależności całkowicie znikają, gdyż projekt eliminuje konieczność instalacji dodatkowych bibliotek po stronie klienta. Podsumowując, całe rozwiązanie udostępniono w modelu open-source na platformie GitHub. To fizyka renderowania.\n\nChoć model open-source umożliwia swobodne modyfikacje, podstawowa zasada działania pozostaje spójna. Silnik renderujący PolyCSS jest odpowiedzialny za precyzyjne rzutowanie wierzchołków na płaszczyznę. Mimo to końcowy format graficzny pozostaje czytelny. Zatem inspekcja jest wygodna.\n\n### Dlaczego brak zewnętrznych zależności ma znaczenie?\n\nBrak konieczności instalacji dodatkowych bibliotek po stronie klienta oznacza, że projekt PolyCSS jest niezwykle lekki. Z kolei silnik renderujący PolyCSS odpowiedzialny za rzutowanie wierzchołków na płaszczyznę działa w pełni samodzielnie. Co więcej, wygenerowany format graficzny to inspekcyjny HTML i CSS. Dlatego jest on dostępny natychmiast w narzędziach deweloperskich.\n\nTak więc dostępność projektu w modelu open-source na platformie GitHub sprzyja przejrzystości całego kodu. Zatem programiści mogą łatwo zweryfikować implementację silnika. To istotna przewaga tego rozwiązania.\n\n### Jak wygląda dostępność projektu PolyCSS?\n\nProjekt został udostępniony w modelu open-source na platformie GitHub, co gwarantuje pełną przejrzystość kodu. Silnik renderujący PolyCSS odpowiedzialny za rzutowanie wierzchołków na płaszczyznę stanowi technologiczne jądro tego narzędzia. To skraca czas konfiguracji środowiska.\n\n### Czym charakteryzuje się format graficzny w tym projekcie?\n\nFormat graficzny generowany przez silnik to Inspectable HTML i CSS, co pozwala na dogłębną analizę struktury dokumentu. Dostępność narzędzia jest szeroka, ponieważ projekt udostępniono w modelu open-source na platformie GitHub. Przede wszystkim silnik renderujący PolyCSS odpowiedzialny za rzutowanie wierzchołków na płaszczyznę wykonuje całą ciężką pracę obliczeniową. To upraszcza codzienną pracę programistów.\n\n### Jakie są główne komponenty architektury PolyCSS?\n\nArchitektura PolyCSS opiera się na kilku fundamentalnych elementach, które współpracują ze sobą w celu wygenerowania ostatecznego widoku. Głównym filarem jest silnik renderujący odpowiedzialny za matematyczne transformacje wierzchołków w przestrzeni dwuwymiarowej.\n\n- Silnik renderujący: PolyCSS odpowiedzialny za rzutowanie wierzchołków na płaszczyznę.\n- Format graficzny: Inspectable HTML i CSS, dostępny natychmiast w narzędziach deweloperskich.\n- Zależności zewnętrzne: Brak konieczności instalacji dodatkowych bibliotek po stronie klienta.\n- Dostępność: Projekt udostępniony w modelu open-source na platformie GitHub.\n- Integracja: Bezpośrednie osadzenie w dokumencie internetowym bez dodatkowych wtyczek.\n- Wydajność: Szybkie przetwarzanie geometrii dzięki uproszczonemu potokowi renderowania.\n- Przejrzystość: Możliwość podglądu każdej warstwy w narzędziach deweloperskich przeglądarki.\n- Konserwacja: Łatwe aktualizowanie kodu dzięki przejrzystej strukturze plików źródłowych.\n\n| Komponent | Opis działania | Korzyść dla programisty |\n|—|—|—|\n| Silnik renderujący | Rzutuje wierzchołki na płaszczyznę | Pełna kontrola nad geometrią |\n| Format wyjściowy | Generuje inspekcyjny HTML i CSS | Szybkie debugowanie w przeglądarce |\n| Zależności | Brak dodatkowych bibliotek | Mniejszy narzut na aplikację |\n\nZatem wszystkie elementy tworzą spójną całość. To detal, ale ułatwia adaptację.\n\n### Jak wykorzystać narzędzia deweloperskie z PolyCSS?\n\nNarzędzia deweloperskie przeglądarki są podstawowym interfejsem do analizy wyników działania silnika PolyCSS. Format graficzny Inspectable HTML i CSS jest dostępny natychmiast, co pozwala na śledzenie drzewa DOM. Dlatego programiści mogą szybko zrozumieć przepływ danych.\n\nZ tego powodu nauka obsługi narzędzia jest intuicyjna. To przyspiesza proces tworzenia oprogramowania.\n\n### Często zadawane pytania\n\n#### Czy PolyCSS wymaga konfiguracji środowiska?\nNie, ponieważ projekt charakteryzuje się brakiem konieczności instalacji dodatkowych bibliotek po stronie klienta. Format graficzny to inspekcyjny HTML i CSS, co oznacza natychmiastową dostępność w narzędziach deweloperskich bez skomplikowanej konfiguracji.\n\n#### Gdzie można znaleźć kod źródłowy silnika?\nKod źródłowy jest udostępniony w modelu open-source na platformie GitHub. Brak konieczności instalacji dodatkowych bibliotek po stronie klienta sprawia, że wynikowe drzewo DOM jest lekkie.\n\n#### Czy projekt jest dostępny za darmo?\nTak, projekt udostępniony w modelu open-source na platformie GitHub pozwala na darmowe korzystanie z zasobów. Przede wszystkim eliminuje konieczność instalacji dodatkowych bibliotek po stronie klienta, co stanowi dużą zaletę. Ponadto format graficzny inspekcyjny HTML i CSS jest dostępny natychmiast w narzędziach deweloperskich. Zatem narzędzie to znacząco usprawnia proces debugowania i analizy kodu interfejsu użytkownika.\n\nGłównym elementem pozostaje silnik renderujący PolyCSS odpowiedzialny za rzutowanie wierzchołków na płaszczyznę. W rezultacie programiści zyskują pełną kontrolę nad procesem renderowania bez konieczności korzystania z zewnętrznych zależności. Dlatego warto przeanalizować to repozytorium na platformie GitHub, aby samodzielnie zweryfikować możliwości tego silnika.”,”meta_description”:”Silnik renderujący PolyCSS to projekt open-source generujący inspekcyjny HTML i CSS bez dodatkowych bibliotek po stronie klienta.”,”frontmatter”:{„title”:”PolyCSS: Silnik renderujący HTML i CSS bez zewnętrznych zależności”,”description”:”Silnik renderujący PolyCSS to projekt open-source generujący inspekcyjny HTML i CSS bez dodatkowych bibliotek po stronie klienta.”,”coverImage”:”https://gikiewicz.eu/wp-content/uploads/2026/06/cssquake-cover.jpg”,”date”:”2026-03-28″,”author”:”Grzegorz Kikiewicz”,”category”:”Programowanie”,”tags”:[„HTML”,”CSS”,”Open-Source”,”JavaScript”]}}

Czym jest silnik PolyCSS napędzający grę?

Silnik PolyCSS to autorskie rozwiązanie, które zamienia tradycyjny potok graficzny na ciąg obliczeń opartych o kaskadowe arkusze stylów. Zamiast przekazywać wierzchołki do układu GPU, kod oblicza ich pozycje i aplikuje odpowiednie wartości do właściwości transform. Co więcej, pozwala to na manipulowanie sceną bezpośrednio przez panel programisty w przeglądarce. Zatem każda ściana, przeciwnik czy element otoczenia to fizyczny węzeł w dokumencie. To rozwiązanie demonstruje potencjał przeglądarek.

W rezultacie gra staje się w pełni przezroczysta dla narzędzi wbudowanych w Chrome czy Firefox. Programiści mogą zapisać stan rozgrywki jako statyczny plik .html. Ponadto, brak zewnętrznych zależności sprawia, że projekt ładuje się błyskawicznie, obciążając głównie procesor podczas przeliczania macierzy transformacji. Silnik przetwarza dane w czasie rzeczywistym.

Dlaczego CSSQuake zdobył popularność na Hacker News?

Dyskusja na portalu Hacker News ukazuje autentyczne zachwycenie społeczności nad koncepcją narzędzia. Wiele osób uważa, że implementacja pełnoprawnej strzelanki 3D bez użycia Canvas to poważne osiągnięcie programistyczne. Wątek zgromadził 131 punktów oraz kilkadziesiąt komentarzy analizujących wydajność i ograniczenia tego podejścia. Zainteresowanie wynika z czystej ciekawości inżynieryjnej. Użytkownicy chętnie testują nietypowe implementacje starych technologii.

Przede wszystkim, projekt udowadnia, że kaskadowe arkusze stylów ewoluowały daleko poza prostą stylizację tekstu i układów kafelkowych na stronach. Choć implementacja nie zastąpi natywnych silników takich jak Unreal Engine, stanowi doskonałe ćwiczenie z optymalizacji przeglądarki. Co więcej, kod źródłowy pozwala innym programistom analizować zaawansowane techniki renderowania. To idealny materiał edukacyjny dla pasjonatów grafiki sieciowej.

Jakie są ograniczenia technologiczne gry opartej na CSS?

Podstawowym wąskim gardłem projektu CSSQuake jest wydajność przeglądarki podczas manipulacji rozbudowanym drzewem DOM. Przeglądarki internetowe nie są natywnie zoptymalizowane pod masowe aktualizacje transformacji 3D na setkach elementów jednocześnie w każdej klatce. Z tego powodu silnik PolyCSS musi agresywnie odrzucać niewidoczne wierzchołki przed ich dodaniem do kodu HTML. Optymalizacja wyświetlania ma tu znaczenie fundamentalne. Każdy zbędny węzeł drastycznie obniża płynność rozgrywki.

Na przykład, renderowanie skomplikowanych modelów z ogromną liczbą wielokątów powoduje natychmiastowe spadki klatek na sekundę. Zamiast tego, projekt musi operować na uproszczonej geometrii, przypominającej wczesne lata grafiki trójwymiarowej. Mimo to, płynność poruszania się po mapie udowadnia, że przeglądarki radzą sobie z obliczeniami wektorowymi. To pokazuje skalę optymalizacji silnika. Wymaga on ciągłego balansowania między szczegółowością sceny a responsywnością interfejsu.

W jaki sposób uruchomić Quake bez instalacji dodatków?

Aby uruchomić grę, wystarczy wejść na oficjalną stronę cssQuake, która natychmiast inicjuje silnik PolyCSS. Proces ten nie wymaga pobierania plików wykonywalnych ani konfiguracji środowiska uruchomieniowego. Strona wczytuje strukturę mapy oraz logikę sterowania, pozwalając na grę za pomocą klawiatury i myszy. To maksymalna dostępność dla każdego użytkownika. Próg wejścia jest tutaj zerowy.

Ponadto, całe repozytorium jest publicznie dostępne, co pozwala na uruchomienie lokalne na własnym serwerze. Programiści mogą sklonować kod, modyfikować zmienne odpowiadające za oświetlenie, prędkość poruszania się czy układ poziomów. Rozwiązanie to udowadnia, że dystrybucja gier przeglądarkowych może być całkowicie zdecentralizowana. Wobec tego, kod staje się uniwersalnym nośnikiem danych i grafiki. To podejście znacznie upraszcza proces publikacji niezależnych projektów programistycznych.

Jak silnik PolyCSS radzi sobie z oświetleniem i teksturowaniem?

Silnik PolyCSS implementuje oświetlenie i teksturowanie ścian bez użycia tradycyjnych shaderów GPU, bazując wyłącznie na właściwościach takich jak background-image oraz manipulacji kanałem alfa. Według informacji na stronie cssQuake, gra renderuje przestrzeń jako inspectable HTML and CSS, co oznacza, że każda tekstura ściany to fizyczny plik graficzny nałożony na element blokowy. Zatem oświetlenie sceny symulowane jest przez modyfikację krycia nakładanych warstw.

Ponadto, brak zaawansowanych technik takich jak normal mapping czy dynamiczne cienie wymusza zastosowanie klasycznych rozwiązań z lat dziewięćdziesiątych. Oświetlenie statyczne jest wcześniejszo wyliczone, a wierzchołki posiadają przypisane wartości jasności. Choć to drastycznie upraszcza potok renderowania, pozostaje w pełni zgodne z oryginalnym duchem gry z 1996 roku. Wynik to estetyka retro pozbawiona ciężkich obliczeń nałożonych na przeglądarkę.

Czy CSSQuake obsługuje pełną logikę gry z oryginału?

Implementacja dostępna pod adresem cssQuake skupia się na wiernym odwzorowaniu mechaniki poruszania się oraz renderowania map z oryginalnego Quake. Projekt oferuje interfejs obsługiwany przez klawiaturę i mysz, pozwalający na swobodne rozglądanie się i przemieszczanie po trójwymiarowej przestrzeni. Został on zaprojektowany jako port gry z 1996 roku. Użytkownik otrzymuje dostęp do funkcjonalnego silnika graficznego.

Jednakże, pełna logika sztucznej inteligencji przeciwników czy złożone systemy fizyki pocisków nie są głównym celem tego eksperymentu. Kod źródłowy GitHub LayoutitStudio udostępnia środowisko do testowania wydajności przeglądarki. Zamiast skupiać się na strzelaniu, projekt demonstruje możliwości silnika w zakresie obliczania macierzy i rzutowania wektorów na ekran. Przede wszystkim udowadnia, że przeglądarki są gotowe na skomplikowane operacje wektorowe.

Czym różni się podejście CSSQuake od standardowego WebGL?

Standardowe API takie jak WebGL wykonuje operacje graficzne bezpośrednio na procesorze karty graficznej, omijając przy tym interpreter JavaScript i silnik renderujący dokumentu. Podejście CSSQuake przenosi ciężar obliczeń na węzły DOM, gdzie każda ściana jest niezależnym elementem HTML. Według dyskusji na Hacker News, projekt zyskał 131 punktów za udowodnienie, że kaskadowe arkusze stylów radzą sobie z macierzami transformacji. To zupełnie inna architektura renderowania.

W rezultacie, tradycyjne silniki 3D odrzucają niewidoczne wielokąty na etapie rasteryzacji w procesorze graficznym. W CSSQuake ten proces musi zostać wykonany wcześniej, zanim węzeł trafi do drzewa dokumentu, aby zapobiec zablokowaniu głównego wątku interfejsu. Na przykład, silnik PolyCSS filtruje geometrię, która znajduje się poza polem widzenia kamery. Wobec tego przeglądarka nie musi przetwarzać ukrytych obiektów.

Jakie techniki optymalizacji DOM zastosowano w projekcie?

Aby utrzymać płynność animacji, silnik PolyCSS eliminuje zbędne węzły przed ich wstrzyknięciem do struktury dokumentu HTML. Przeglądarki internetowe mają duże problemy z wydajnością, gdy muszą przetwarzać setki elementów z właściwościami trójwymiarowymi w czasie rzeczywistym. W związku z tym projekt stosuje mechanizm usuwania niewidocznych ścian oraz obiektów znajdujących się poza obszarem kamery. To drastycznie odciąża procesor podczas przeliczania klatek animacji.

Co więcej, transformacje są aplikowane bezpośrednio na istniejących węzłach, co minimalizuje koszty alokacji pamięci. Oto lista kluczowych technik optymalizacyjnych dostrzeżonych w projekcie:

• Agresywne odrzucanie geometrii znajdującej się poza polem widzenia kamery.
• Aktualizacja wyłącznie właściwości transform oraz opacity węzłów.
• Rezygnacja z skomplikowanych modeli szkieletowych na rzecz płaskich ścian.
• Ograniczenie liczby jednocześnie renderowanych elementów na pojedynczą klatkę.
• Wykorzystanie akceleracji sprzętowej dostępnej w przeglądarkach dla stylów CSS.
• Buforowanie wierzchołków i ponowne wykorzystywanie istniejących elementów blokowych.
• Wykorzystanie natywnego mechanizmu will-change do informowania przeglądarki o modyfikacjach.

Często zadawane pytania

Iakie zasoby sprzętowe są wymagane do uruchomienia CSSQuake?

Projekt nie wymaga dedykowanej karty graficznej i opiera się wyłącznie na standardowym silniku przeglądarki internetowej. Zgodnie z informacjami z cssQuake, gra uruchamia się bezpośrednio w oknie przeglądarki jako inspectable HTML and CSS. Zaleca się używanie przeglądarek opartych na Chromium ze względu na ich wydajność w przetwarzaniu węzłów DOM.

Czy kod źródłowy silnika PolyCSS jest dostępny publicznie?

Tak, pełne repozytorium projektu zostało udostępnione przez twórcę z organizacji LayoutitStudio. Kod źródłowy dostępny pod adresem GitHub LayoutitStudio zawiera implementację silnika oraz port map z oryginalnej gry z 1996 roku. Użytkownicy mogą samodzielnie sklonować pliki i uruchomić je na własnym serwerze lokalnym.

Jak społeczność odebrała projekt CSSQuake?

Społeczność portalu Hacker News pozytywnie oceniła eksperyment, przyznając mu 131 punktów w ciągu zaledwie kilku godzin. Wątek na platformie Hacker News wygenerował 24 komentarze, w których programiści analizują wydajność i architekturę opartą na kaskadowych arkuszach stylów. To dowodzi dużego zainteresowania nietypowymi implementacjami technologii sieciowych.

Czy w CSSQuake można grać na urządzeniach mobilnych?

Projekt CSSQuake został zaprojektowany jako interfejs obsługiwany przez klawiaturę i mysz, co wynika z ograniczeń oryginalnej strzelanki 3D z 1996 roku. Choć strona cssQuake ładuje się poprawnie na smartfonach, brak dedykowanych kontrolek dotykowych uniemożliwia swobodną rozgrywkę. Zaleca się uruchamianie projektu na komputerze osobistym z fizycznymi urządzeniami wejściowymi.

Podsumowanie

CSSQuake stanowi udowodnienie, że przeglądarki internetowe są w stanie poradzić sobie z renderowaniem przestrzeni trójwymiarowej bez użycia dedykowanych interfejsów programistycznych takich jak WebGL. Silnik PolyCSS skutecznie wykorzystuje drzewo węzłów dokumentu oraz natywne właściwości CSS do obliczania pozycji i rzutowania wierzchołków na ekran. Projekt zyskał 131 punktów na portalu Hacker News, co potwierdza zainteresowanie społeczności technologicznej. Kod został udostępniony jako open-source, co pozwala innym programistom na naukę i rozwijanie koncepcji grafiki sieciowej.

Zachęcam do samodzielnego sprawdzenia projektu CSSQuake pod adresem cssQuake oraz przeanalizowania kodu źródłowego silnika PolyCSS dostępnego na GitHub LayoutitStudio. Otwórz narzędzia deweloperskie w przeglądarce i zobacz, jak węzły HTML radzą sobie z transformacjami trójwymiarowymi w czasie rzeczywistym.