浅聊 Three.js 屏幕空间反射SSR-SSRShader

浅聊 Three.js 屏幕空间反射SSR(2)-SSRShader

前置基础
渲染管线中的相机和屏幕示意图

 -Z  (相机朝向的方向)|||       +--------------+  <- 屏幕/投影平面|       |              ||       |              ||       |     (f)      |  <- 焦距|       |              ||       |              ||       +--------------+|              ||              ||              O  <- 相机原点 (也称为视点)|              |||+---------------------- X (水平轴)

一、计算 viewPosition

根据深度图计算屏幕空间上的 视图位置。

float clipW = cameraProjectionMatrix[2][3] * viewZ+cameraProjectionMatrix[3][3];
vec3 viewPosition = getViewPosition( vUv, depth, clipW );

二、计算反射位置 d1viewPosition

vec3 viewNormal=getViewNormal( vUv );// 入射光线方向
vec3 viewIncidentDir=normalize(viewPosition);// 反射光线方向
vec3 viewReflectDir=reflect(viewIncidentDir, viewNormal);// 反射光线最大长度
float maxReflectRayLen=maxDistance/dot(-viewIncidentDir, viewNormal);// 反射位置
vec3 d1viewPosition = viewPosition + viewReflectDir * maxReflectRayLen;

处理反射位置在近平面（即 -cameraNear）之的情况

目标:
确保反射光线的目标位置 (d1viewPosition) 不在近平面之前。如果在近平面之前，则将其调整到近平面上。

if(d1viewPosition.z > -cameraNear){//https://tutorial.math.lamar.edu/Classes/CalcIII/EqnsOfLines.aspxfloat t= (-cameraNear - viewPosition.z) / viewReflectDir.z;d1viewPosition = viewPosition + viewReflectDir * t;
}

 ^ -z||||      * 视点(viewPosition)|       \|        \|------------ (近平面，z = -cameraNear)|          \|           \|            *|             \|              \|               * d1viewPosition (初始位置)|-------------------------------------> x

解释:
反射光线的参数方程:
$$P(t)=viewPosition+t\ast viewReflectDir$$

我们需要找到 $t$ 使得:
$$P(t).z=-cameraNear$$

因此，我们需要解方程:
$$viewPosition.z+t\ast viewReflectDir.z=-cameraNear$$

解这个方程，得到:
$$t=\frac{-cameraNear-viewPosition.z}{viewReflectDir.z}$$

最后, 调整反射后目标位置:
$$d1viewPosition=viewPosition+viewReflectDir\ast t;$$

三、计算反射位置在屏幕空间下的位置

// 屏幕分辨率
uniform vec2 resolution;// 视图空间转屏幕空间
vec2 viewPositionToXY(vec3 viewPosition){vec2 xy;vec4 clip = cameraProjectionMatrix * vec4(viewPosition,1);//clipxy = clip.xy;float clipW = clip.w;//NDCxy /= clipW;//uvxy = (xy + 1.) / 2.;//screenxy *=resolution;return xy;
}vec2 d1 = viewPositionToXY(d1viewPosition);

四、屏幕空间光线步进(Ray Marching)

参考: DDA 画直线算法

// 片段着色器中的当前像素坐标
vec2 d0 = gl_FragCoord.xy;vec2 d1 = viewPositionToXY(d1viewPosition);// x 和 y 方向上的距离
float xLen = d1.x-d0.x;
float yLen = d1.y-d0.y;// 两个点之间的欧几里得距离
float totalLen = length(d1-d0);// 在 x 和 y 方向上步数的最大值，用于决定采样的步数
float totalStep = max(abs(xLen), abs(yLen));// 每一步在 x 和 y 方向上的增量
float xSpan = xLen / totalStep;
float ySpan = yLen / totalStep;for(float i = 0.; i<float(MAX_STEP); i++) {if(i >= totalStep) break;vec2 xy = vec2(d0.x + i * xSpan, d0.y + i * ySpan);if(xy.x < 0. || xy.x > resolution.x || xy.y < 0. || xy.y > resolution.y) break;// 比例进度, 0~1float s = length(xy - d0) / totalLen;vec2 uv = xy / resolution;float d = getDepth(uv);// 当前像素的视图空间深度值float vZ = getViewZ(d);if(-vZ >= cameraFar) continue;float cW = cameraProjectionMatrix[2][3] * vZ+cameraProjectionMatrix[3][3];vec3 vP = getViewPosition( uv, d, cW );// https://comp.nus.edu.sg/~lowkl/publications/lowk_persp_interp_techrep.pdffloat recipVPZ = 1. / viewPosition.z;// 基于插值得到的透视矫正后的深度值float viewReflectRayZ = 1. / (recipVPZ + s * (1. / d1viewPosition.z - recipVPZ));if(viewReflectRayZ <= vZ){// 只处理无限厚度的情况vec3 vN = getViewNormal(uv);if(dot(viewReflectDir,vN) >= 0.) continue;float distance = pointPlaneDistance(vP, viewPosition, viewNormal);if(distance > maxDistance) break;vec4 reflectColor = texture2D(tDiffuse, uv);gl_FragColor = reflectColor;}
}

只处理 viewReflectRayZ <= vZ的情况

^ -z|||            * viewPosition (反射的起始位置)|             \|              \|               \|                \|                 \|                  * viewReflectRayZ  (矫正后的深度值)|                   \|                    \|                     * vZ (当前像素深度值)|                      \|                       \|                        \|                         \|-------------------------------------> x

• 在透视投影下，深度值绝对值越小，表示距离相机越近。在进行光线行进时，我们希望光线从起点出发，经过所有可能的深度值，直到目标位置

• viewReflectRayZ 是矫正后的深度值，它应该始终小于或等于 vZ，以确保光线距离起点从近到远进行插值和计算。

• 如果 viewReflectRayZ 大于 vZ, 这种情况可能导致光线跳过当前像素，直接到达更远的像素，产生穿透问题

• 通过确保 viewReflectRayZ <= vZ，可以保证光线在行进过程中深度值是连续变化的，从而提高插值的精度，避免因不连续的深度值变化而产生的伪影

只处理钝角的情况
点积大于或等于零，表示这两个单位向量的夹角小于或等于 90 度。

点到平面距离

float pointPlaneDistance(vec3 point,vec3 planePoint,vec3 planeNormal){// https://mathworld.wolfram.com/Point-PlaneDistance.html https://en.wikipedia.org/wiki/Plane_(geometry) http://paulbourke.net/geometry/pointlineplane/float a = planeNormal.x;float b = planeNormal.y;float c = planeNormal.z;float x0 = point.x;float y0 = point.y;float z0 = point.z;float x = planePoint.x;float y = planePoint.y;float z = planePoint.z;float d = -(a * x + b * y + c * z);float distance = (a * x0 + b * y0 + c * z0 + d)/sqrt(a * a + b * b + c * c);return distance;
}