从零手写 2.5D 双层渲染引擎：Luminora 与 Silicon Conflict 的 C/OpenGL 实践

引言：为什么在 2024 年还要手写渲染引擎？

商业引擎（如 Unity、Unreal）让一名初学者也能在几分钟内拼凑出一个光影绚烂的 3D 场景。但随之而来的是数十 GB 的安装包、漫长的构建链、黑盒调试时的无力感，以及对底层 GPU 硬件运作逻辑的彻底脱节。

为了揭开这层黑盒，我在业余时间用纯 C11 和现代 OpenGL 3.3 Core 规范，从零手写了《Luminora｜流明洛原》与《Silicon Conflict｜智械霸权》的渲染底座。本文将毫无保留地分享这套超轻量 2.5D 双层瓦片与动态光影管线的设计全貌。

一、双层渲染架构：地表日光与地底暗穴的折衷

传统 2D 瓦片引擎（如 Tiled / SDL_Render）只支持单一视角的平铺。然而在《流明洛原》中，核心机制在于：**地表拥有完整的昼夜日光循环，而地下矿脉拥有独立的常暗空洞与自发光晶体；当玩家在地表开采出垂直矿井时，地表的阳光必须柔和地斜射进地底深处。**

我们设计了分层 Framebuffer 对象 (FBO) 渲染架构：

1. **Layer 0 (地底图层 FBO)**：渲染地下岩石、暗河、矿石自发光点光源（Point Lights）；

2. **Layer 1 (地表图层 FBO)**：渲染树木、农田、风车与方向性平行日光（Directional Sunlight）；

3. **Composite Pass (合成光线投射)**：利用 Stencil Buffer 标记地表被破坏的矿坑区域，使用屏幕空间射线投射（Raymarching）计算日光从地表向下衰减的渐变羽化。

二、批处理优化：从 10,000 次 DrawCall 压降至 4 次

如果在绘制每一片草地或墙体时都调用一次 `glDrawElements`，CPU 与 GPU 之间的驱动开销将瞬间把帧率压垮至 15FPS。

我们设计了动态合批顶点缓冲器 (Dynamic Quad Batcher)：

#define BATCH_MAX_QUADS 8192
#define BATCH_MAX_VERTICES (BATCH_MAX_QUADS * 4)
#define BATCH_MAX_INDICES  (BATCH_MAX_QUADS * 6)

typedef struct {
    float position[3];
    float uv[2];
    float normal[3];
    float color[4];
} Vertex2D;

typedef struct {
    GLuint vao, vbo, ebo;
    Vertex2D vertices[BATCH_MAX_VERTICES];
    uint32_t quad_count;
    GLuint current_texture;
} RenderBatch;

void batch_draw_quad(RenderBatch* b, float x, float y, float w, float h, 
                     float u0, float v0, float u1, float v1, uint32_t color) {
    if (b->quad_count >= BATCH_MAX_QUADS) {
        batch_flush(b); // 填满即刷新
    }
    // 填充 4 个顶点的位移、纹理坐标与法线
    // ...
    b->quad_count++;
}

void batch_flush(RenderBatch* b) {
    if (b->quad_count == 0) return;
    glBindBuffer(GL_ARRAY_BUFFER, b->vbo);
    glBufferSubData(GL_ARRAY_BUFFER, 0, b->quad_count * 4 * sizeof(Vertex2D), b->vertices);
    glBindVertexArray(b->vao);
    glDrawElements(GL_TRIANGLES, b->quad_count * 6, GL_UNSIGNED_INT, 0);
    b->quad_count = 0;
}

通过该机制，屏幕上数万个像素瓦片的绘制调用由数千次骤降至 **仅 3~4 次**，在核显笔记本上稳定跑满 144FPS。

三、WebAssembly 移植实战

在《Silicon Conflict》中，我们需要让玩家无需下载客户端，在浏览器中即可直接试玩。

使用 Emscripten 工具链，我们将 C11 源码编译为 WebAssembly：

emcc src/*.c -O3 -s USE_GLFW=3 -s FULL_ES3=1 \
     -s WASM=1 -s ALLOW_MEMORY_GROWTH=1 \
     --preload-file assets/ -o dist/silicon_conflict.html

在这个过程中，最关键的陷阱是 **主循环阻塞**。浏览器不支持桌面端常用的 `while (!glfwWindowShouldClose())` 阻塞式等待，必须改用 `emscripten_set_main_loop_arg()` 适配浏览器的 requestAnimationFrame 节拍。

四、写在最后

手写渲染引擎的过程并不轻松，它意味着你需要亲手解决内存泄漏、跨平台窗口居中、着色器编译报错等一切隐晦的问题。但当你看到第一束自己手算的动态漫反射光芒照亮像素矿坑时，那种从零掌控底层代码的从容与愉悦，是任何现成工具库都无法赋予的。