本文记录了我在 不依赖任何 3D 引擎 的前提下，
使用 JavaScript + Canvas 实现一个最小 3D 渲染系统的过程与认知总结。
目标不是效果，而是理解现代 3D 渲染管线的本质结构。
1. 为什么要手写 3D 渲染，而不是直接使用引擎
在使用 Three.js / Unity / Unreal 之前，我遇到的典型问题是：
-
模型显示异常，不知道是法线问题还是 UV 问题
-
光照不对，只能靠“调参数”
-
一旦脱离教程，问题定位成本极高
根本原因在于：
我只理解“接口”，不理解“管线”
因此我选择了一个极端约束：
不用 WebGL / GPU
只用 Canvas 2D
手写完整的软件渲染流程
这迫使我正面面对所有核心问题。
2. 最小可用渲染管线的结构拆分
最终实现的渲染流程可以拆为以下阶段：
模型数据
↓
顶点变换（Model → World → View）
↓
透视投影（3D → NDC）
↓
屏幕映射
↓
三角形光栅化
↓
深度测试（Z-Buffer）
↓
属性插值（UV / Normal）
↓
纹理采样
↓
光照计算
↓
写入像素
这个流程与现代 GPU 管线 一一对应，只是全部在 CPU 上完成。
扫一扫
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
