RayCasting 光线投射伪3D技术

引言

本文主要讲解光线投射的原理——一种简单的伪3d渲染技术，广泛应用于早期的计算机图形渲染中。

具体来讲，什么是光线投射呢？

Untitled

简单讲就是将线转化成面的投影技术，如上图所示，从视点发出一簇光线最终投射在几条线上，通过光线投射技术的转化，可以得到右图所示的3D投影。更直观的场景如下图所示。

Untitled

可以发现，人物在简单的二维平面上下左右移动，可以映射成三维空间的前进、后退、向左向右。

基本原理

光线投射的核心思想是从视点（通常是摄像机的位置）向物体投射光线，判断光线与物体的交点，从而确定该物体的三维特征，比如纹理、颜色和亮度。

更确切地说，我们需要找到光线打在物体上时，此时的光线传播距离，这个距离与三维视图中对应位置的高度有直接关系：光线的传播距离越远，物体在视角中的高度就越小；反之，光线的传播距离越近，物体在视角中的高度就越大。

设光线的传播距离为 ( d )，视角中的墙体高度为 ( h )，那么墙体高度的计算公式通常是：

$$
h = \frac{C}{d}
$$

其中，C 是一个常数，用于调整物体高度的比例。

投射光线

建立坐标系$(x,y)$
初始化视点位置 $(x_0,y_0)$和光线的方向$\theta_0$
$\theta_0$的范围为$[-\pi,\pi]$，取逆时针方向为正方向

Untitled

function castRay(xo,y0,angle) {
  const stepSize = 0.1;
  
 
  let x = x0;
  let y = y0;

  while (1) {
    x += Math.cos(angle) * stepSize;
    y += Math.sin(angle) * stepSize;
  }

}

确定交点

如何计算光线和物体的交点，也就是光线打到物体上，传播了多少距离？

function castRay(x0,y0,angle) {
  const stepSize = 0.1;
  let distance = 0;
  let hit = false;
  
  let x = x0;
  let y = y0;

  while (1) {
    x += Math.cos(angle) * stepSize;
    y += Math.sin(angle) * stepSize;
    distance += stepSize;

    const mapX = Math.floor(x);
    const mapY = Math.floor(y);
    

    if (maze[mapY][mapX] === 1) {
      hit = true;
      break;
    }
  }

  return { distance, hit };
}

绘制3D视图

Untitled

function draw3D(rayAngle) {

  const ray = castRay(rayAngle);
  const distance = ray.distance;
  const wallHeight = FACTOR / distance;

  ctx3D.fillStyle = ray.hit ? ray.color : 'rgba(255, 255, 255, 0.6)';
  ctx3D.fillRect(i, (canvas3D.height / 2) - wallHeight / 2, 1, wallHeight); 
}

边界处理

1. 光线传播距离的边界判断

离散的，所以会出现超出了墙壁，死循环。

Untitled

这时候步长stepSize可以设置小点，但是再怎么小无法避免不出现死循环，所以可以设置一个最远传播距离maxDepth。

while (distance < maxDepth) {
  x += Math.cos(angle) * stepSize;
  y += Math.sin(angle) * stepSize;
  distance += stepSize;

  const mapX = Math.floor(x);
  const mapY = Math.floor(y);
  

  if (maze[mapY][mapX] === 1) {
    hit = true;
    break;
  }
}