光线投射之伪3d

光线投射是一种在 2D 地图中创建 3D 透视的渲染技术。当计算机速度较慢时，不可能实时运行真正的 3D 引擎，光线投射是第一个解决方案。光线投射可以非常快，因为只需对屏幕的每条垂直线进行计算。

光线投射的基本思想如下：地图是一个 2D 方格网格，每个方格可以是 0（= 无墙），也可以是正值（= 具有特定颜色或纹理的墙）。

对于屏幕的每个 x（即屏幕的每个垂直条纹），发出一条从玩家位置开始的光线，其方向取决于玩家的观看方向和屏幕的 x 坐标。然后，让这条射线在 2D 地图上向前移动，直到它碰到一个地图方块（即墙）。如果它撞到了墙，计算这个击中点到玩家的距离，并使用这个距离来计算这堵墙必须在屏幕上绘制多高：墙越远，它在屏幕上越小，越近，看起来就越高。这些都是二维计算。此图显示了两条此类光线（红色）的自上而下的概述，它们从玩家（绿点​​）开始并击中蓝色墙壁：

 let rayDirX = Math.cos(theta) // -1 left 1 right
                            let rayDirY = Math.sin(theta) // -1 top 1 bottom
 
                            let cameraX = this.origin.x / cellWidth  // float
                            let cameraY = this.origin.y / cellHeight
 
                            let mapX = cameraX >> 0; // int
                            let mapY = cameraY >> 0;
 
                            // 从相机到当前格子的距离
                            let sideDistX, sideDistY;
                            // 1/cos =dist/dx= sec（正割）
                            // 1/sin =dist/dy =csc (余割)
                            // 计算距离，当x或y行进多少步后，当前距离是多少了
                            // 方便快速计算距离
                            // 保证x轴和y轴两个的步率是一样的
                            /**
                             *  ◿ c=5 a=3 b=4   
                             * cos=4/5, 1/cos=5/4  
                             * sin=3/5, 1/sin=5/3
                            */
                            let deltaDistX = rayDirX === 0 ? 1e30 : Math.abs(1 / rayDirX)
                            let deltaDistY = rayDirY === 0 ? 1e30 : Math.abs(1 / rayDirY)
 
                            let stepX, stepY;
 
                            // 侧面距离
                            if (rayDirX < 0) {
                                // 光线朝右
                                stepX = -1
                                // 当前相机距离当前格子距离是多少
                                sideDistX = (cameraX - mapX) * deltaDistX
                            } else {
                                stepX = 1
                                // 下一个格子，左侧距离相机距离是多少
                                sideDistX = (mapX + 1 - cameraX) * deltaDistX
                            }
                            // 正面，距离
                            if (rayDirY < 0) {
                                // 光线朝下
                                stepY = -1
                                // 当前相机距离当前格子距离是多少
                                sideDistY = (cameraY - mapY) * deltaDistY
                            } else {
                                stepY = 1;
                                // 下一个格子，左侧距离相机距离是多少
                                sideDistY = (cameraY + 1 - mapY) * deltaDistY
                            }
 
                            let isCollided = false;
                            let isSide = false // 是否是墙
                            let distance = 0
 
                            // 计算光线投射
                            while (!isCollided) {
                                // 如果横向距离小于纵向距离,就向x轴前进
                                if (sideDistX < sideDistY) {
 
                                    sideDistX += deltaDistX // 更新当前相机与当前格子的侧边距离
                                    mapX += stepX // 移动到左边或右边格子
                                    // 如果光线与侧边距近更近,那就是侧边
                                    isSide = true;
                                } else {
                                    sideDistY += deltaDistY
                                    mapY += stepY // 移动到上边或下边格子
                                    isSide = false;
                                }
                                if (mapY >= map.length || map[mapY][mapX] > 0) {
                                    isCollided = true;
                                }
                            }
                            if (isSide) {
                                distance = sideDistX - deltaDistX
                            } else {
                                distance = sideDistY - deltaDistY
                            }
                            // 是否鱼眼观看
                            // 鱼眼
                            let notFish = true;
                            if (notFish) {
                                distance = distance * Math.cos(theta - startRadian)
                            }
 
                            let lineHeight = canvasHeight / distance
                            // lineHeight=lineHeight*Math.cos(theta - startRadian)
                            // 距离越近物体看起来越高，距离越远看起来越矮
                            let halfCanvasHeight = canvasHeight * 0.5
                            let wallTop = halfCanvasHeight - lineHeight * 0.5
                            let wallBottom = halfCanvasHeight + lineHeight * 0.5
                            wallTop = clamp(wallTop, 0, canvasHeight)
                            wallBottom = clamp(wallBottom, 0, canvasHeight)
 
 
                            // 计算光线投射最终位置
                            let x = this.origin.x + rayDirX * (distance * cellWidth)
                            let y = this.origin.y + rayDirY * (distance * cellHeight)

要找到光线在途中遇到的第一面墙，您必须让它从玩家的位置开始，然后始终检查光线是否在墙内。如果它在墙内（命中），则循环可以停止，计算距离，并以正确的高度绘制墙。如果光线位置不在墙壁内，则必须进一步追踪它：在该光线方向的方向上为其位置添加一定的值，对于这个新位置，再次检查它是否在墙壁内。继续这样做，直到最后撞到墙。

人类可以立即看到光线击中墙壁的位置，但不可能用单个公式找到光线立即击中哪个方块，因为计算机只能检查光线上有限数量的位置。许多光线投射器每一步都会为光线添加一个恒定值，但它有可能会错过墙壁！例如，对于这条红色光线，它的位置在每个红点处都被检查：

人类可以立即看到光线击中墙壁的位置，但不可能用单个公式找到光线立即击中哪个方块，因为计算机只能检查光线上有限数量的位置。许多光线投射器每一步都会为光线添加一个恒定值，但它有可能会错过墙壁！例如，对于这条红色光线，它的位置在每个红点处都被检查：

 

正如你所看到的，光线直接穿过蓝色的墙壁，但计算机没有检测到这一点，因为它只在红色的位置检查点。检查的位置越多，计算机检测不到墙壁的机会就越小，但需要的计算也就越多。这里步距减半，所以现在他检测到光线穿过了墙，

 

为了使用此方法获得无限精度，需要无限小的步长，因此需要无限数量的计算！这很糟糕，但幸运的是，有一种更好的方法，只需要很少的计算，就能检测到每面墙：其想法是检查射线将遇到的墙的每一侧。我们给每个正方形的宽度为 1，因此墙的每一边都是一个整数值，中间的位置在点之后有一个值。现在步长不是恒定的，它取决于到下一侧的距离：

 

正如您在上图中看到的，光线准确地击中了墙壁上我们想要的位置。在本教程中介绍的方式中，使用基于 DDA 或“数字微分分析”的算法。DDA 是一种快速算法，通常用于方形网格，用于查找一条线击中了哪些方形（例如，在屏幕上绘制一条线，屏幕是方形像素的网格）。因此，我们还可以使用它来查找射线击中的地图的哪些方块，并在击中墙体方块后停止算法。

一些光线追踪器使用欧几里德角度来表示玩家和光线的方向，并用另一个角度确定视野。然而，我发现使用向量和相机要容易得多：玩家的位置始终是向量（x 和 y 坐标），但现在，我们也将方向设为向量：所以方向现在是由两个值确定：方向的 x 和 y 坐标。方向向量可以这样理解：如果你沿着玩家看的方向画一条线，穿过玩家的位置，那么这条线的每个点都是玩家位置与方向的倍数之和向量。方向向量的长度并不重要，重要的是它的方向。

这种使用向量的方法还需要一个额外的向量，即相机平面向量。在真正的 3D 引擎中，还有一个相机平面，并且该平面实际上是一个 3D 平面，因此需要两个向量（u 和 v）来表示它。然而，光线投射发生在 2D 地图中，因此这里的相机平面并不是真正的平面，而是一条线，并用单个向量表示。相机平面应始终垂直于方向矢量。相机平面代表计算机屏幕的表面，而方向矢量垂直于相机平面并指向屏幕内部。玩家的位置是一个点，是相机平面前面的一个点。屏幕某个 x 坐标的某条射线就是从该玩家位置开始的射线