WebGL 正交相机的 SSAO 解析

2024-01-03 20:32:11

简介

SSAO（屏幕空间环境光遮蔽）是一种技术，用于在实时渲染中模拟物体表面的阴影和间隙。它在 WebGL 中尤为有用，因为 WebGL 可以直接访问像素数据。当使用正交相机时，SSAO 的实现方式与使用透视相机有所不同。本文将深入探讨 WebGL 中正交相机下 SSAO 的解析，重点介绍获得深度图和应用 SSAO 效果。

获取深度图

在正交相机下获得深度图的第一步是渲染场景。在此步骤中，禁用颜色缓冲区，只启用深度缓冲区。这会产生一张仅包含深度值的纹理，称为深度图。

// 禁用颜色缓冲区
gl.disable(gl.COLOR_BUFFER_BIT);

// 启用深度缓冲区
gl.enable(gl.DEPTH_BUFFER_BIT);

// 绘制场景以生成深度图
gl.drawScene();

应用 SSAO

一旦获得了深度图，就可以应用 SSAO 效果。此过程涉及以下步骤：

对深度图进行模糊处理： 使用高斯模糊内核对深度图进行模糊处理。这有助于柔化阴影边缘并创建更自然的外观。
生成随机采样方向： 生成随机方向集，用于在每个像素周围采样。这些方向通常以半球分布均匀分布。
对每个像素进行采样： 对于每个像素，根据随机采样方向对周围像素进行采样。如果采样到的像素的深度值大于当前像素的深度值，则将当前像素标记为被遮蔽。
计算遮蔽因子： 遮蔽因子是采样到的被遮蔽像素数除以总采样数。遮蔽因子越高，该像素越被遮蔽。
应用 SSAO 效果： 遮蔽因子可用于修改场景中的光照。例如，可以乘以光照值或修改法线贴图，以模拟阴影和间隙。

// 对深度图进行模糊处理
var blurredDepth = blur(depthTexture);

// 生成随机采样方向
var sampleDirections = generateRandomDirections();

// 对每个像素进行采样
var occlusionFactor = 0.0;
for (var i = 0; i < numSamples; i++) {
  var samplePosition = pixelPosition + sampleDirections[i];
  var sampleDepth = texture2D(blurredDepth, samplePosition);
  if (sampleDepth > depth) {
    occlusionFactor += 1.0;
  }
}
occlusionFactor /= numSamples;

// 应用 SSAO 效果
var lighting = lighting * (1.0 - occlusionFactor);