像素风不是画出来的，是算出来的

V2EX 上 11 月 3 日有个帖子标题朴素：《做了几个像素风格小游戏，渲染出来非常漂亮》。正文只有一句话「游戏地址：games.songjian.li」加四张预览图，但点开站点 Pixels 之后，真正有意思的东西藏在源码里：这些像素风画面不是画出来的贴图，而是一个手写的微型 3D 渲染管线实时算出来的像素。

Dockhand：码头主题的像素游戏画面

一、四款游戏与一个开源款

站点 Pixels 上有四款游戏：Dockhand（码头）、Dicewright（骰子工坊）、Shade（一只猫穿过阳光广场）、Puff（小生物在黑暗洞穴里靠吸入空气、水和孢子漂浮）。作者 ffdshow233 开源了其中一款：仓库 abcdlsj/pixels-public，11 月 3 日创建、只有 1 个 commit，README 说明仓库只放了 Dockhand。原生环境是 vanilla JS 加 Canvas，整个游戏是单个 HTML 文件，JS 全部 inline，单文件 90 到 200KB，没有 Phaser，没有 Pixi，也没有 Three.js。

二、真正的故事：手写的微型光栅化器

Dockhand 源码的头部注释值得整段引用：这是一个 tiny software rasteriser：正交相机、深度缓冲、旋转三角形、光空间阴影贴图、色相偏移渐变配 Bayer 抖动屏、基于 object id 加深度的描边。翻译一下：作者在 Canvas 上手写了一个微型 3D 渲染管线，用它输出 2D 像素风画面。阴影、渐变抖动、描边全是实时算出来的，不是美术画出来的贴图，这就是「商业级」光影质感的来源。渲染和贴图是两条技术路线，作者选了算的那条。

Shade：光照方向随时间变化

三、动态光照与整数倍超采样

两个实现细节最能说明「算出来的」是什么概念。Shade 那款里太阳会动：光照方向是时间的函数，阴影贴图每帧重建，阳光广场上猫的影子会随着游戏内时间移动。分辨率处理同样讲究：游戏本身只有 320×228 像素，桌面端按设备像素的整数倍超采样渲染（作者确认是 2 倍），低分辨率的美感和高分屏的锐度兼得。

四、冷水：四条都得泼

一，这是渲染 demo，不是游戏评测：四款的玩法深度未知，原帖 0 条第三方回复。二，「不输商业作品」是观感判断：有光影质感不等于有游戏性，渲染水平不能偷换成游戏品质。三，单文件 inline JS 加手写光栅化器很酷，但往里加玩法、修 bug 的成本也高：没有引擎，就没有引擎自带的场景管理和调试工具。四，刚发布：仓库 1 个 commit，长期更新未知。