Cube Engine — 纯 HTML5 Canvas 体素 3D 引擎（不使用 OpenGL）

世界生成

世界形态参考了 Minecraft 这类流行的方块体素 3D 游戏。玩家可以增删任意方块节点，引擎提供多种不同类型的节点。

• 动态扩展：世界的边界只受 JavaScript 中整数大小的限制，也就是说世界会随着玩家探索新区域而动态生成。
• 纵向无上限：垂直方向没有高度限制，但渲染距离是有限的。
• 地形算法：地形由伪随机函数生成。底层系统模仿 Minecraft 的做法，世界由 16×16×无限 的节点“区块（chunk）”构成；伪随机函数为每个区块生成一个高度值，区块之间的高度值通过插值过渡。高度值以下填充节点，以上留空。
• 地表材质：根据高度不同，会出现不同种类的地表（草、泥土、沙子等）。

与 Minecraft 的差异也很明确：世界渲染器使用的是 2D perlin 噪声而非 3D 噪声，因此地下没有矿石、没有隧道；世界里没有敌人或生物，没有树木，也没有物理系统。作者的解释很直接——渲染器已经吃掉了几乎全部算力，功能必须受限。

菜单中还可以开启高度图（height map）与帧率（FPS）曲线图，便于观察生成结果与性能表现。

渲染技术

渲染采用简单的画家算法（painter's algorithm）：所有内容从后往前绘制，靠近摄像机的节点覆盖在更远的节点之上。由于 Canvas 本身不具备任何 3D 渲染能力，引擎只能使用非常基础的 3D 渲染技术，并实现了一些优化手段：

• 背面剔除（back-face culling）
• 遮挡剔除（occlusion culling）
• 视锥剔除（frustum culling）

作者还提到，八叉树（octrees）不适合这个游戏及其规模，区块（chunks）是更合适的组织方式。想要更快的话，可以在设置中选择更低的渲染距离。

纹理方面，Canvas 不支持纹理，因此纹理实现必须从零搭建，项目使用了一套仿射纹理映射（affine texture mapping）系统。带纹理渲染会明显变慢，所以引擎同时提供一个使用纯色的简单渲染器。纹理存放在一个 PNG 文件中，纹理排布与 Minecraft 完全一致，因此理论上可以直接套用现成的 Minecraft 材质包。

存档机制

游戏支持本地保存：它会把一个 3×3 区块（玩家位于中间区块）内的所有节点存入浏览器的本地存储，或保存为文件。数据可以从本地加载，但出于安全原因不能从文件加载；若要从文件载入世界，程序必须运行在服务器上。

已知问题

README 专门用一节坦率列出了局限，这些也是理解项目边界的重要信息：

• 不支持角落裁剪（corner clipping），玩家离某个节点太近时该节点会被移除，从而能看到它的另一侧。
• JavaScript 处理浮点数的方式使精确整数难以保证，而碰撞系统依赖整数；作者通过“接近整数时进行舍入”来解决，但承认这不是优雅的方案。
• Chrome 在纯色渲染时有些问题，具体表现为 context.fill() 调用过于频繁时似乎会失效。
• Firefox 不允许浏览器锁定指针，除非处于全屏模式；而作者又表示这个程序除非在超级计算机上，否则不应全屏运行。

运行与许可

项目提供在线 Demo（见项目主页），可直接在浏览器中体验。源码以 WTFPL 许可证发布。

学习建议

这个项目适合作为“在受限平台上做 3D”的教学样本：可以重点阅读区块数据结构、伪随机地形与插值、画家算法的绘制顺序，以及三种剔除策略的实现方式；纹理部分则能观察仿射纹理映射在 Canvas 上的落地方式。由于没有硬件加速，阅读时也应结合 README 的性能说明，理解作者为何砍掉矿石、生物、树木与物理等特性。