用純 CSS 渲染 Quake：PolyCSS 引擎的瘋狂實驗

cssquake.com · 2026-06-21

一個名為 cssQuake 的開源專案近日在開發者社群引發熱議——它不靠 WebGL，也不靠 Canvas，而是純粹用 CSS 在瀏覽器中渲染了 1996 年的第一人稱射擊遊戲 Quake。整個專案由 LayoutitStudio 開發並發佈於 GitHub，核心技術是一套自製的 3D DOM 渲染引擎 PolyCSS。遊戲完整保留了單人關卡、敵人 AI、動態光源與粒子效果，讓人忍不住要反覆確認：這真的是 CSS 嗎？

PolyCSS：把多邊形貼進 DOM

PolyCSS 的核心思路是將 Quake 的三維幾何體轉換為真實的 HTML 元素，再透過 CSS 的 matrix3d() 變換將每個面片定位到正確的三維空間位置。材質貼圖則以 background-image 搭配 image-rendering: pixelated 的方式套用，還原 Quake 獨特的低解析度像素風格。幾何面片被組織成網格結構（mesh），方便批次更新 DOM，而非逐幀重繪 Canvas 位圖。

整個渲染管線的資料準備階段由 src/prepare/assets.mjs 負責：它解析 Quake 原版的 BSP、WAD、MDL、LMP 及實體資料，將材質透過 Quake 調色盤轉換為 PNG，並預先生成動畫序列所需的 CSS 動畫輸入與 PolyCSS 渲染包。預處理階段大量減少了執行期的計算負擔，是效能得以維持可玩水準的關鍵。

TypeScript 撐起遊戲邏輯

雖然名為「CSS Quake」，專案程式碼中 TypeScript 佔比高達 73.7%，JavaScript 22.2%，CSS 本身只有 1.6%。TypeScript 層負責遊戲迴圈、玩家物理、敵人 AI、拾取系統、UI 與音效，PolyCSS 則作為純粹的渲染輸出層接受指令。這種分工讓遊戲邏輯與 CSS 渲染層彼此解耦，也使 PolyCSS 本身可以獨立發展為通用的 CSS 3D 渲染工具。

效能方面，在 Debug 模式下可開啟 FPS 面板與統計資訊，可見作者十分清楚 DOM 操作的效能瓶頸。啟用動態光源、粒子效果等選項會顯著增加每幀的 DOM 更新量，因此遊戲貼心地提供了逐項關閉的選項。CSS 渲染 3D 遊戲的代價就是每新增一個視覺特效，都相當於在瀏覽器排版引擎上再壓一塊磚。

核心技術：matrix3d() CSS 3D 變換 + image-rendering: pixelated 材質貼圖
資產管線：BSP / WAD / MDL 解析 → PNG → PolyCSS 渲染包
遊戲邏輯：TypeScript（物理、AI、音效）
Debug 工具：FPS 面板、輪廓線顯示、動態光源 / 粒子可切換

/* PolyCSS 核心概念：用 CSS matrix3d 定位 3D 面片 */
.face {
  position: absolute;
  transform: matrix3d(
    m00, m01, m02, m03,
    m10, m11, m12, m13,
    m20, m21, m22, m23,
    tx,  ty,  tz,  1
  );
  background-image: url('texture.png');
  image-rendering: pixelated;
}

原始來源：cssquake.com · GitHub: LayoutitStudio/cssQuake

atproto 沒有「實例」：Dan Abramov 談 Bluesky 的去中心化架構

overreacted.io · 2026-06-21

React 核心成員 Dan Abramov 在個人部落格 overreacted.io 發表了一篇長文，直接點破許多人對 Bluesky（atproto 協議）去中心化程度的誤解：atproto 根本沒有「實例」這個概念。這不是語義上的細節，而是架構層面的根本差異，理解它才能真正看懂 Bluesky 與 Mastodon 在聯邦宇宙中各自走的路。

ActivityPub 的實例模型：身份與主機綁死了

Mastodon 採用的 ActivityPub 協議以「實例（instance）」為基本單位。你的帳號 alice@mastodon.social 既是身份識別，也是資料的儲存位置，身份與主機是綁定在一起的。若某個實例關閉，帳號的身份便消失了；若想搬遷，過程繁瑣且追蹤者關係難以完整遷移。隨著實例數量增加，實例之間的訊息傳遞呈現 O(n²) 的通訊複雜度，是聯邦架構難以迴避的擴展性挑戰。

Abramov 用 RSS 做類比：部落格文章存在你自己的主機上，閱讀器（Google Reader、Feedly……）只是聚合工具，兩者彼此獨立。你換了主機不影響訂閱者，因為身份（網域）和資料是你的，閱讀器只是視圖層。atproto 把這個比喻變成了協議設計的核心原則——「主機」和「應用」是兩件分開的事。

atproto 的分離架構：PDS、DID 與應用聚合器

在 atproto 中，使用者的資料存放在 PDS（Personal Data Server，個人資料伺服器），身份則由 DID（去中心化識別碼）表示，兩者完全解耦。Bluesky 的應用程式只是眾多能讀取這些分散式資料的「聚合器」之一；Tangled、Semble 等第三方應用同樣存取相同的底層資料，彼此競爭的是使用者體驗，而非資料本身的控制權。

Abramov 本人在撰文當天就親身示範了主機遷移：他把 PDS 搬到了 Eurosky，過程幾乎全自動，對追蹤者毫無影響——因為 DID 不變，追蹤關係自然延續。他在文中直接說：「根本沒有所謂的實例，只有你可以置換的主機，以及聚合所有人資料的應用程式。」「去中心化」的健康指標因此改變：有多少人遷移到替代主機、有多少新應用在共享基礎設施上湧現，比實例數量更有意義。

ActivityPub：身份 = 主機 + 帳號名稱，實例是資料與身份的聯合體
atproto：身份（DID）獨立於主機（PDS），應用層只是聚合視圖
遷移 PDS 不影響追蹤關係，因為 DID 不變
任何人都可以架設 PDS 或中繼節點，進入門檻相對低廉
多個應用（Bluesky、Tangled、Semble）共享同一份底層資料

原始來源：overreacted.io — Dan Abramov

瀏覽器裡的 Windows XP：Game Boy 模擬器與 iPod Classic 介面全都動了

mitchivin.com · 2026-06-21

工程師 Mitch Ivin 用自己的個人作品集網站做了一件讓 Hacker News 首頁停下來欣賞的事：整個網站就是一套運行在瀏覽器裡的 Windows XP 桌面模擬器，完整還原了開始選單、視窗管理員、工作列，而其中一個「應用程式」是能跑 ROM 的 Game Boy Color 模擬器，另一個則是互動式的 iPod Classic 介面，點擊轉盤還能滾動選單。這個專案登上了 Hacker News 百大，是近年難得一見把懷舊 UI 與實際功能結合得如此紮實的個人作品集。

DoodleDev：向量設計直接編譯成 Web Components

整個專案的底層技術是 Mitch 自己打造的 DoodleDev——一套「視覺編譯器（visual compiler）」，能將向量設計直接轉換為零外部依賴的生產就緒 Web Components。不依賴 React、Vue 或任何框架，所有元件都是原生 Custom Elements，透過 Shadow DOM 實現樣式隔離。這讓 Windows XP 的視窗、按鈕、圖示等 UI 元件既有設計精確度，又保持了極輕量的載入體積。

Game Boy Color 模擬器（gameboy 專案）在 DoodleDev 的 Shell 外殼下運行，提供像素完美的機身外觀、ROM 輪播選擇介面、鍵盤快捷鍵綁定，以及零執行期依賴的純 JavaScript 實作。不引入 emscripten 編譯的 C 核心或第三方模擬器函式庫，整個 CPU 指令集、記憶體映射、PPU 渲染均由 vanilla JS 手寫完成。

iPod Click Wheel 與自訂視窗管理員

iPod Classic 介面採用精密工程設計語言，轉盤的滑動互動以純 JavaScript 事件處理實作，模擬 click wheel 的觸感與選單捲動邏輯。整個 Windows XP 環境則由自訂視窗管理員負責協調：拖曳、最小化、最大化、Z 軸層疊順序管理一應俱全，視窗間的焦點切換也完整還原了 XP 的互動行為。

Mitch 選擇「不靠任何 npm 套件」作為設計約束，逼迫自己把底層機制全部從頭實作，反而讓每個元件都成了可獨立展示的技術作品。作品集即作品本身——這恐怕是目前最有說服力的履歷形式之一。

底層框架：DoodleDev（自製 Visual Compiler → Web Components，零依賴）
Game Boy Color 模擬器：純 JavaScript，Shadow DOM UI，ROM 輪播介面
iPod Classic：Click wheel 滑動互動，模組化 vanilla JS
視窗管理員：拖曳 / 最小化 / Z 軸層疊，完整 XP 互動邏輯
部署：全靜態，無伺服器端渲染

原始來源：mitchivin.com · GitHub: mitchivin

End of article