posts

《游戏引擎实现原理》渲染引擎 · 全书目录与章节索引(55 篇)

《游戏引擎实现原理》卷二《渲染引擎》全 55 篇,在卷一《引擎内核》的 helio 之上用 TypeScript 从零接出渲染引擎:从渲染架构总览与一帧的 CPU / GPU 时间线起步,经 RHI 抽象设计、命令与队列、GPU 资源与内存、WebGPU 与 WebGL2 多后端实现,再到几何与纹理资源、场景变换相机、可见性剔除与 LOD、排序与批次、材质与着色器、光照与阴影、帧图、后处理与全屏特效、2D 与 UI、多线程渲染,最后把全部零件装配成能画的渲染器,让《微光岛》在真实 GPU 上被完整画出来。

《游戏引擎实现原理》卷二《渲染引擎》全 55 篇,是接在卷一《引擎内核》之上的一套书:从第 1 章「一帧都发生了什么」起,到第 18 章把前 17 章的零件装配成一个能跑的渲染器,helio 会一路长出画面——一条从设备抽象到绘制命令的 RHI、一套命令编码与队列提交的帧同步机制、一组缓冲纹理与 GPU 内存池、一套 WebGPU 与 WebGL2 双后端加一个记录式 NullRHI、一套顶点纹理与采样器资源、一层场景图与变换相机、一条视锥剔除与 BVH 加速的可见性流水线、一套排序键与实例化合批、一层材质与着色器变体管理、一套光照与级联阴影、一张把 Pass 编排成图的帧图、一条色调映射与抗锯齿的后处理链、一套精灵与 SDF 的 2D / UI 渲染,以及一层多线程命令录制。每一节都写代码,每一节的代码都在本机真跑过,跑出来的是真实像素与真实计时。

本页是《渲染引擎》的全书目录:按章节顺序列出全部 55 篇,点击标题直达正文。也可以从各节末尾的「阅读导航」按顺序通读,或先看目录篇 里的阅读路径与周计划。

全书概览

项目内容
书稿《游戏引擎实现原理》卷二《渲染引擎》
篇数55 篇(正文 18 章 54 节 + 目录篇)
领域3D 渲染引擎从零实现
贯穿项目《微光岛》——一款低多边形 3D 收集冒险小游戏
从零引擎helio——纯 TypeScript,在卷一内核之上接出 render/
阅读方式从目录篇 进入按顺序通读,或按查漏场景跳读
实测环境Node 26 与 headless Chromium(WebGPU / WebGL2 后端)
可运行性L1 逻辑本机实跑;L2 渲染代码用 headless Chromium 验证,附真实像素与计时
前置卷一《引擎内核》,或了解句柄、ECS 与 Job System 的基本概念

全书目录

前置

篇目核心内容
目录本卷定位、与卷一的关系、阅读路径、周计划与可运行性口径

第一部分:架构与 RHI(第 1–5 章)

先看一帧的全貌,再花四章把 GPU 抽象层从零建起来。

节文章核心内容
1.11.1 一帧都发生了什么(CPU / GPU 时间线)一帧的 CPU 提交与 GPU 执行时间线
1.21.2 渲染器的分层:RHI / 渲染器 / 场景RHI、渲染器与场景三层职责划分
1.31.3 与 graphics 专题的分工表本卷讲实现、专题讲原理的分工表
2.12.1 为什么要 RHI:多后端与平台差异多后端统一与平台差异的动机
2.22.2 资源对象:缓冲、纹理、采样器缓冲、纹理、采样器三类资源对象
2.32.3 管线状态对象与着色器模块管线状态对象与着色器模块抽象
3.13.1 命令编码器与渲染通道命令编码器与渲染通道的录制
3.23.2 队列提交、帧同步与 fence队列提交、帧同步与 fence 机制
3.33.3 三缓冲与资源生命周期三缓冲与资源生命周期管理
4.14.1 资源绑定与 bind group资源绑定与 bind group 组织
4.24.2 上传、暂存与 mipmap 生成上传、暂存缓冲与 mipmap 生成
4.34.3 GPU 内存池与预算GPU 内存池与预算控制
5.15.1 WebGPU 后端实现WebGPU 后端的完整实现
5.25.2 WebGL2 后端实现与能力降级WebGL2 后端与能力降级策略
5.35.3 NullRHI:记录式假后端与测试记录式假后端与自动化测试

第二部分:资源与场景(第 6–9 章)

把几何、纹理、场景、相机接上,再解决「画哪些、按什么顺序画」。

节文章核心内容
6.16.1 顶点格式、属性布局与程序化网格顶点格式、属性布局与程序化网格
6.26.2 纹理格式、压缩与 mipmap纹理格式、压缩与 mipmap 链
6.36.3 采样器、寻址与各向异性采样器寻址与各向异性过滤
7.17.1 场景图与变换层级(ECS 之上的一层视图)场景图与变换层级
7.27.2 脏标记传播与 world matrix 缓存脏标记传播与 world matrix 缓存
7.37.3 相机、裁剪面与拾取射线相机、裁剪面与拾取射线
8.18.1 视锥剔除与包围体视锥剔除与包围体测试
8.28.2 空间划分与 BVH空间划分与 BVH 加速结构
8.38.3 GPU 驱动剔除与 LOD 协同(compute + indirect)GPU 驱动剔除与 LOD 协同
9.19.1 排序键与前后绘制排序键设计与前后绘制
9.29.2 状态缓存与冗余剔除状态缓存与冗余剔除
9.39.3 实例化与合批实例化与合批

第三部分:材质、着色与光照(第 10–13 章)

让画面「有材质、有光、有影」。

节文章核心内容
10.110.1 材质模型与参数材质模型与参数组织
10.210.2 着色器变体与宏着色器变体与宏管理
10.310.3 变体爆炸与编译缓存变体爆炸治理与编译缓存
11.111.1 WGSL 组织与 includeWGSL 代码组织与 include
11.211.2 反射驱动的参数绑定反射驱动的参数绑定
11.311.3 着色器调试与错误定位(getCompilationInfo)着色器调试与错误定位
12.112.1 光照模型与着色路径光照模型与着色路径
12.212.2 光源类型与衰减光源类型与衰减
12.312.3 集群光照的引擎侧装配集群光照的引擎侧装配
13.113.1 阴影贴图的引擎侧实现阴影贴图的引擎侧实现
13.213.2 级联阴影与投影矩阵拟合级联阴影与投影矩阵拟合
13.313.3 阴影性能与质量权衡阴影性能与质量权衡

第四部分:帧图、后处理与 2D(第 14–16 章)

把一帧的 Pass 编排成图,加上全屏特效,再接上 UI。

节文章核心内容
14.114.1 Pass 依赖与资源生命周期Pass 依赖与资源生命周期
14.214.2 WebGPU 约束下的帧图WebGPU 约束下的帧图设计
14.314.3 帧图的编译与执行帧图的编译与执行
15.115.1 全屏 Pass 链全屏 Pass 链的搭建
15.215.2 色调映射与抗锯齿接入色调映射与抗锯齿接入
15.315.3 后处理链的性能预算后处理链的性能预算
16.116.1 精灵批次与图集精灵批次与图集
16.216.2 SDF 文本与矢量 UISDF 文本与矢量 UI
16.316.3 UI 与 3D 的合成顺序UI 与 3D 的合成顺序

第五部分:多线程与综合(第 17–18 章)

让它跑满多核,最后把全部零件装成一个能画的渲染器。

节文章核心内容
17.117.1 渲染线程模型与命令缓冲渲染线程模型与命令缓冲
17.217.2 OffscreenCanvas 与并行命令录制OffscreenCanvas 与并行命令录制
17.317.3 与 Job System 的对接与内核 Job System 的对接
18.118.1 渲染器装配与场景接入渲染器装配与场景接入
18.218.2 昼夜循环与光照表现昼夜循环与光照表现
18.318.3 渲染性能剖析与收口渲染性能剖析与收口

说明:本卷没有序、前言与附录(与卷一《引擎内核》不同),全部内容就是上表的 18 章 54 节,外加一篇目录 。

怎么用这份索引

相关阅读

全部文章 Golang Game Saas Rust Python Java 游戏开发 客户端开发 GameDev TypeScript
engine

《游戏引擎实现原理》17.1 渲染线程模型与命令缓冲

主线程一边跑游戏逻辑一边录渲染命令,逻辑一卡帧就掉。本节把录制与提交拆到渲染线程上:主线程只往命令缓冲里塞命令,渲染线程按帧取走执行,用一个双缓冲的生产消费环把「还没消费完就覆写」变成一条确定性异常,并跑出背压的真实时间线,看清三缓冲比双缓冲多出的那一份缓冲垫换来了什么。

8 分钟阅读
游戏引擎 渲染引擎 多线程渲染
engine

《游戏引擎实现原理》16.3 UI 与 3D 的合成顺序

精灵和矢量图形都能画了,但它们和 3D 世界还没有规矩:谁先画、谁压在谁上面、半透明怎么混。本节把一帧的绘制定成三段——3D 不透明近到远、3D 透明远到近、UI 永远在最上——再在同一个 render pass 里先画 3D 绿底、再用 alpha 混合叠上左半屏的红色 UI,回读出 0.5 红加 0.5 绿的真实像素。

7 分钟阅读
游戏引擎 渲染引擎 合成顺序
engine

《游戏引擎实现原理》16.2 SDF 文本与矢量 UI

文字和矢量图形由曲线定义,位图放大会糊、图集也装不下任意字号。本节用有向距离场(SDF)把形状变成一段距离函数:距离直接转成抗锯齿覆盖率,一个全屏三角形就能画出边缘半透明的圆角矩形,任意放大都不糊。CPU 参考与 WGSL 逐字对齐,跑出中心全白、角外全黑、边界 128 的真实像素。

7 分钟阅读
游戏引擎 渲染引擎 SDF
engine

《游戏引擎实现原理》16.1 精灵批次与图集

2D 与 UI 渲染的第一个问题是「一张界面里成百上千个精灵怎么画」。本节先把小图打进一张 2 次幂图集(货架装箱),再用一条精灵批次键把同层同深度的同页精灵并成一次绘制:10 万个精灵在单页图集下只剩 16 次绘制,最后在真实 WebGPU 设备上跑出一次 draw(6,2) 从图集采出红蓝两个精灵。

8 分钟阅读
游戏引擎 渲染引擎 精灵批次
engine

《游戏引擎实现原理》15.3 后处理链的性能预算

后处理链的代价可以提前算出来:每个全屏 pass 都要把纹理读一遍、写一遍,这就是带宽。本节在 helio 里实现一份带宽账本,把 pass 的读写字节按格式与分辨率算清楚,再在真实 WebGPU 设备上实测 1/5/13 抽样三个全屏 pass 的每帧耗时,看成本到底由「固定开销」还是「像素数」主导。

7 分钟阅读
游戏引擎 渲染引擎 性能预算