当像素跳起光影圆舞曲：用 JavaScript 解锁实时全局光照的魔法

在计算机图形学的宇宙里，我们都是数字世界的造物主。但曾经，我们创造的虚拟世界像是被囚禁在永恒白昼里的孤岛 ------ 物体只会生硬地反射直射光线，墙面与墙面之间毫无光影交流，仿佛每一个像素都签署了互不打扰协议。直到实时全局光照（Real-Time Global Illumination，简称 RTGI）横空出世，才让数字世界的光影真正有了 "社交生活"。

一、光影社交的底层逻辑：从自闭像素到社交达人

传统渲染就像让每个像素独自在小黑屋里玩拼图。光源发射的光线直接撞向物体表面，像素只计算自己头顶那束光的强度，对隔壁像素发生的光影故事不闻不问。这就导致你渲染的房间里，哪怕把灯泡塞到墙角，墙面也不会有半点间接照明，活脱脱一个不懂物理的反乌托邦世界。

而实时全局光照则强制所有像素开启 "社交模式"：光线不再是单程票，它会在物体表面反复弹跳，每一次碰撞都要和周围像素分享能量。想象一下，你打开一盏红色台灯，不仅灯罩会变红，连对面的白墙都会泛起微妙的红晕 ------ 这就是光线在物体间 "串门" 的成果。这种像素级的光影对话，让虚拟世界突然有了呼吸感。

二、破解光影密码的三大神兵

1. 光线追踪：光影世界的私家侦探

光线追踪堪称最硬核的全局光照算法。它让计算机化身福尔摩斯，从相机出发逆向发射光线，模拟每一道光子的奇幻漂流。当光线撞上物体表面，它会记录颜色、材质信息，并根据反射定律继续追踪下一段旅程。这就像在数字世界里布置了无数微型无人机，全方位记录光线的一举一动。但这种方法计算量巨大，就像让每个像素都雇佣一个私人侦探，实时渲染时很容易让显卡累到 "冒烟"。

2. 辐射度方法：光影世界的能量账本

辐射度方法更像是一位严谨的会计，把场景分割成无数小块，给每块区域建立能量账户。它会精确计算每个小块接收和发出的光能，通过反复迭代平衡能量收支。这种方法虽然精准，但就像用算盘计算万亿级数据，实时性欠佳，更适合离线渲染的慢工出细活。

3. 屏幕空间反射：偷懒却聪明的光影作弊术

在实时渲染领域，屏幕空间反射（SSR）堪称 "偷天换日" 的魔术师。它只关注当前屏幕可见区域，利用深度缓冲数据快速计算反射光线。就像在像素们聚会时，偷偷给它们戴上能反光的墨镜，通过镜面反射看到周围的场景。虽然这种方法存在视野盲区，但胜在效率极高，成为游戏引擎中最受欢迎的全局光照 "快捷指令"。

三、JavaScript 实战：让网页里的光影活过来

现在，我们用 JavaScript 在网页画布上实现一个简单的实时全局光照效果。这里我们采用 "烘焙 + 实时更新" 的混合策略，既能保证效率又能捕捉动态变化。

xml 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>实时全局光照示例</title>
</head>
<body>
  <canvas id="myCanvas" width="800" height="600"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    // 定义光源
    const light = { x: 400, y: 100, intensity: 200 };
    // 定义场景物体（简单矩形模拟墙面）
    const wall = { x: 100, y: 200, width: 600, height: 400 };
    // 绘制函数
    function draw() {
      // 清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // 绘制墙面
      ctx.fillStyle = 'gray';
      ctx.fillRect(wall.x, wall.y, wall.width, wall.height);
      // 模拟全局光照效果：简单的漫反射计算
      const diffuseIntensity = light.intensity / Math.sqrt(Math.pow(light.x - wall.x - wall.width / 2, 2) + Math.pow(light.y - wall.y - wall.height / 2, 2));
      const diffuseColor = `rgb(${Math.min(255, diffuseIntensity)}, ${Math.min(255, diffuseIntensity)}, ${Math.min(255, diffuseIntensity)})`;
      ctx.fillStyle = diffuseColor;
      ctx.fillRect(wall.x, wall.y, wall.width, wall.height);
      // 绘制光源
      ctx.beginPath();
      ctx.arc(light.x, light.y, 10, 0, 2 * Math.PI);
      ctx.fillStyle = 'yellow';
      ctx.fill();
      requestAnimationFrame(draw);
    }
    draw();
  </script>
</body>
</html>

这段代码通过计算光源与墙面的距离，模拟简单的漫反射效果，让墙面能 "感受" 到光源的存在。虽然这只是个玩具级实现，但已经能看到全局光照的雏形。想要实现更复杂的效果，可以结合光线追踪的简化版算法，让光线在画布上进行有限次数的反弹模拟。

四、未来展望：当数字光影遇见元宇宙

随着硬件性能的指数级增长，实时全局光照正在打破游戏与电影的界限。想象一下，在元宇宙中，你戴上 VR 设备走进一间虚拟咖啡馆，阳光透过彩色玻璃在地面投下斑斓的光影，咖啡杯的倒影随着你的动作实时变化，每一块砖缝里都藏着光线的秘密 ------ 这就是实时全局光照正在编织的未来图景。而我们，这些用代码塑造世界的魔术师，正站在这场光影革命的最前沿。