JavaScript 里的光影魔术师：光线投射

想象你正站在一个漆黑的房间里，手里攥着一把能穿透万物的 "光箭"。当你把这支光箭射向黑暗，它会一路横冲直撞，直到撞上某个物体才停下脚步 ------ 这就是计算机图形学里 "光线投射（Ray Casting）" 的核心概念。在这个由 0 和 1 编织的数字世界里，我们要用 JavaScript 代码扮演上帝，让虚拟光线在屏幕上跳起光影之舞。

一、光箭出鞘：光线投射的底层魔法

光线投射的原理简单得令人着迷：从观察者的眼睛（或者说是屏幕上的每个像素点）发射出一条光线，让它在三维空间中自由穿梭，直到遇到场景中的物体。这就好比你在玩第一人称射击游戏时，屏幕上每个像素都在替你 "探头张望"，计算自己看到了什么。

在计算机的世界里，这条光线本质上是一个数学向量，它包含了方向和起点信息。就像你发射一枚火箭，不仅要知道从哪里起飞，更要明确它的飞行轨迹。而光线与物体的碰撞检测，则是整个流程的重头戏 ------ 这就像让火箭精准命中目标，需要通过一系列精妙的几何计算来完成。

二、代码锻造：用 JavaScript 打造光箭生产线

在 JavaScript 中，我们可以用对象来模拟光线：

ini 复制代码

// 定义光线对象
function Ray(origin, direction) {
    this.origin = origin;
    this.direction = direction;
}
// 定义一个简单的点对象作为光线起点
function Point(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
}
// 定义一个向量对象作为光线方向
function Vector(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
}

上面这段代码就像搭建了一个 "光线工厂"，Ray函数负责组装光箭，Point和Vector则分别生产箭尾（起点）和箭头（方向）。接下来，我们要教会这些光箭如何 "撞南墙"------ 也就是检测光线与物体的交点。

以最简单的球体为例，光线与球体的碰撞检测可以类比为寻找子弹是否击中西瓜。我们需要检查光线的轨迹是否与球体表面有交点：

ini 复制代码

// 定义球体对象
function Sphere(center, radius) {
    this.center = center;
    this.radius = radius;
}
// 检测光线与球体是否相交
function intersectRaySphere(ray, sphere) {
    // 计算从光线起点到球心的向量
    const oc = {
        x: ray.origin.x - sphere.center.x,
        y: ray.origin.y - sphere.center.y,
        z: ray.origin.z - sphere.center.z
    };
    // 一系列"数学魔法"（此处省略复杂计算）
    // 最终返回最近交点距离，若没交点则返回-1
    let a = 1; // 简化计算假设光线方向为单位向量
    let b = 2 * (oc.x * ray.direction.x + oc.y * ray.direction.y + oc.z * ray.direction.z);
    let c = oc.x * oc.x + oc.y * oc.y + oc.z * oc.z - sphere.radius * sphere.radius;
    let discriminant = b * b - 4 * a * c;
    if (discriminant < 0) {
        return -1;
    } else {
        return (-b - Math.sqrt(discriminant)) / (2 * a);
    }
}

这段代码里，我们通过一系列 "数学咒语"（其实是解方程），让计算机判断光线是否撞上了球体。如果返回值大于 0，就说明光箭成功命中目标！

三、点亮像素：从光线到屏幕的视觉狂欢

有了光线和碰撞检测，我们还需要把结果 "翻译" 成屏幕上的像素颜色。这就像把侦察兵（光线）收集到的情报，转化成指挥官（GPU）能看懂的战报。

ini 复制代码

// 假设屏幕是一个二维网格，每个像素对应一条光线
function renderScene() {
    const width = 800;
    const height = 600;
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    document.body.appendChild(canvas);
    const ctx = canvas.getContext('2d');
    const sphere = new Sphere({ x: 0, y: 0, z: -5 }, 1);
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // 计算当前像素对应的光线方向
            const direction = {
                x: (x - width / 2) / height,
                y: (y - height / 2) / height,
                z: -1
            };
            const ray = new Ray({ x: 0, y: 0, z: 0 }, direction);
            const distance = intersectRaySphere(ray, sphere);
            if (distance > 0) {
                ctx.fillStyle = 'white';
            } else {
                ctx.fillStyle = 'black';
            }
            ctx.fillRect(x, y, 1, 1);
        }
    }
}
renderScene();

这段代码遍历屏幕上的每个像素，为它们发射光线并检测是否命中球体。如果命中，就把像素涂成白色，否则涂成黑色。最终，一个悬浮在黑暗中的白色球体就会奇迹般地出现在画布上！

四、光影进化：从黑白世界到绚丽舞台

上面的例子只是光线投射的入门级应用。现实世界中，我们可以给球体添加纹理、反射效果，甚至模拟复杂的透明材质。这就像给单调的素描画上添上色彩，让虚拟世界变得栩栩如生。

比如，我们可以通过计算光线反射方向，实现镜面反射效果；或者递归地发射 "次级光线"，模拟光线在多个物体间的弹射 ------ 这就像让光箭在房间里不断反弹，直到精疲力竭。

五、挑战与未来：光箭的无限可能

光线投射虽然强大，但也有自己的 "阿喀琉斯之踵"。当场景中的物体数量暴增时，每帧需要发射的光线数量会呈指数级增长，这对计算机性能是个巨大考验。于是，聪明的程序员们发明了空间分割算法，就像给三维世界划分 "格子"，让光线只在可能存在物体的区域内活动，大大提高了效率。

随着硬件技术的发展，光线追踪（光线投射的 "豪华升级版"）已经走进了游戏和影视制作领域。未来，我们或许能在浏览器里用 JavaScript 实现电影级别的光影特效，让每个网页都变成互动的虚拟世界。

当你合上这篇教程，那些藏在代码里的光箭依然在屏幕背后不知疲倦地穿梭。它们用数学的精准和代码的浪漫，在二进制的深渊里绘制出五彩斑斓的数字宇宙。下次打开游戏或观看科幻电影时，不妨想象一下：或许在某个看不见的角落，无数条虚拟光线正在上演着属于它们的光影传奇。

上述文章结合底层原理与 JavaScript 代码，为你展示了光线投射的魅力。若你还想深入了解某个部分，或添加更多进阶内容，欢迎随时和我说。