游戏渲染技术：JavaScript射线投射教程

如果你写过一点 JavaScript，能操作 DOM、会写循环和函数，但一想到「渲染」两个字就下意识划走，这门课正好卡在你的缺口上。射线投射（raycasting）是 2D 地图算出 3D 画面的那类算法，上世纪《德军总部 3D》那一代就是用它的思路跑起来的。它不依赖 WebGL，也不需要你懂矩阵库，纯粹用 JavaScript 加 Canvas 就能把一堵墙立起来。缺的是数学直觉和一条能跑通的实现路径，这门课补的就是这两块。

先说清楚它不解决什么

射线投射不等于现代游戏渲染管线。它不做光照模型、不做阴影贴图、不做 PBR 材质，也不涉及 GPU 着色器编程。学完你不会因此会写 Unity 或 Three.js 项目里的渲染部分。它的价值在于：把「三维画面是怎么被算出来的」这件事，压缩到你能在一两百行代码里亲手验证的程度。视角、投影、深度、遮挡、纹理采样这些概念，在射线投射里都是显式的、可以打断点看的，而不是藏在引擎黑盒里。对后面要接触真正渲染管线的人来说，这是一次成本很低的预习；对只想搞清楚原理的人来说，这已经够用了。

你需要提前补的三块数学

课程说没有先修要求，这话指的是它会把数学随讲随补。但如果你是奔着「看懂每行代码为什么这么写」去的，提前把这三件事弄明白会顺很多：

• 三角函数在单位圆上的含义，特别是 sin 和 cos 与角度、方向向量的关系；
• 二维向量的加减与归一化，知道「方向乘距离得到位置」这句话在做什么；
• 相似三角形与比例关系，3D 墙体投影那一步的核心就是它。

不提前补也能跟，但遇到投影高度公式时会卡一下。建议边看边拿纸画图，尤其是视线与墙面相交那一段。

练习该怎么跟上

这类课最大的坑是「看着都懂，自己写就废」。每讲完一个模块，别急着往下看，先把上一段代码关掉重写一遍。具体可以这样切：先只画出 2D 俯视地图和玩家的位置与朝向；再加一条射线，让它在撞墙时停下来；然后把多条射线扇形铺开；最后才做 3D 投影，把每条射线的距离换算成屏幕上一列墙的高度。纹理和精灵放在更后面，是锦上添花的部分，前面这条主线跑不通，纹理贴上去也是歪的。另外建议保留一个调试开关，能随时切回 2D 视图看射线打在哪，很多 bug 在 3D 画面里看不出来，在俯视图里一眼就现形。

看完应该能回答的问题

• 为什么射线投射能只用一维距离数组就画出 3D 画面，它省掉了什么？
• 玩家转身时，是所有射线重新计算，还是可以只改变基准角度？
• 墙面纹理的横向偏移由什么决定，为什么近处的墙纹理不会跟着变形？
• 精灵（敌人、道具）的遮挡关系是怎么判断的，和墙体的深度比较有何不同？
• 画面出现「鱼眼」拉伸时，问题出在距离还是角度上？

如果这几个问题你能不看笔记讲清楚，并且手上有一个能走动、能转身、墙上有纹理的小场景，这门课就算吃透了。做不到也没关系，回到卡住的那一节重写一遍，比往后赶进度有用得多。