# 屏幕空间反射

反射效果，是游戏中比较常见且重要的一个效果。

在表现光滑的表面（金属、光滑地面）、水面（湖面、地面积水）等材质时，反射出场景中的其他物体，可以让画面质量有很大提升，丰富真实感。

屏幕空间反射（Screen Space Reflection，SSR），是一个非常著名的基于屏幕空间的技术。

avatar avatar avatar avatar

# 初始化

使用SSR类添加SSR效果。

import { 
    
    Postprocessing, 
    SSR

} from '@tx3d/postprocessing';

// 创建后处理类
const postprocessing = new Postprocessing( engine );

// 添加后处理效果
const effect = postprocessing.addEffect( SSR, {

    resolutionScale: 1,
    velocityResolutionScale: 1,
    correctionRadius: 2,
    blend: 0.95,
    correction: 0.1,
    blur: 0,
    blurSharpness: 10,
    blurKernel: 1,
    distance: 10,
    intensity: 1,
    exponent: 1.75,
    maxRoughness: 0.99,
    jitter: 0,
    jitterRoughness: 2,
    roughnessFade: 1,
    fade: 1.03,
    thickness: 3.5,
    ior: 1.75,
    fade: 0,
    steps: 5,
    refineSteps: 6,
    maxDepthDifference: 50,
    missedRays: false
    
} );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

提示

描边初始化参数，详见SSRParams。

# 属性

🌏 intensity intensity of the reflections

effect.intensity = 1.0;

🌏 exponent exponent by which reflections will be potentiated when composing the current frame's reflections and the accumulated reflections into a final reflection; higher values will make reflections clearer by highlighting darker

effect.exponent = 1.0;

🌏 distance maximum distance a reflection ray can travel to find what it reflects

effect.distance = 10;

🌏 fade how much reflections will fade out by distance

effect.fade = 0;

🌏 roughnessFade how intense reflections should be on rough spots; a higher value will make reflections fade out quicker on rough spots

effect.roughnessFade = 1.0;

🌏 thickness maximum depth difference between a ray and the particular depth at its screen position before refining with binary search; higher values will result in better performance

effect.thickness = 10;

🌏 ior Index of Refraction, used for calculating fresnel; reflections tend to be more intense the steeper the angle between them and the viewer is, the ior parameter sets how much the intensity varies

effect.ior = 1.45;

🌏 maxRoughness maximum roughness a texel can have to have reflections calculated for it

effect.maxRoughness = 1;

🌏 maxDepthDifference maximum depth difference between a ray and the particular depth at its screen position after refining with binary search; higher values will result in better performance

effect.maxDepthDifference = 10;

🌏 blend a value between 0 and 1 to set how much the last frame's reflections should be blended in; higher values will result in less noisy reflections when moving the camera but a more smeary look

effect.blend = 0.9;

🌏 correction how much pixels should be corrected when doing temporal resolving; higher values will result in less smearing but more noise

effect.correction = 1;

🌏 correctionRadius how many surrounding pixels will be used for neighborhood clamping; a higher value can reduce noise when moving the camera but will result in less performance

effect.correctionRadius = 1;

🌏 blur how much the blurred reflections should be mixed with the raw reflections

effect.blur = 0.5;

🌏 blurKernel kernel size of the Box Blur Filter; higher kernel sizes will result in blurrier reflections with more artifacts

effect.blurKernel = 1.0;

🌏 blurSharpness exponent of the Box Blur filter; higher values will result in more sharpness

effect.blurSharpness = 10;

🌏 jitter how intense jittering should be

effect.jitter = 0;

🌏 jitterRoughness how intense jittering should be in relation to a material's roughness

effect.jitterRoughness = 0;

🌏 steps number of steps a reflection ray can maximally do to find an object it intersected (and thus reflects)

effect.steps = 20;

🌏 refineSteps once we had our ray intersect something, we need to find the exact point in space it intersected and thus it reflects; this can be done through binary search with the given number of maximum steps

effect.refineSteps = 5;

🌏 missedRays if there should still be reflections for rays for which a reflecting point couldn't be found; enabling this will result in stretched looking reflections which can look good or bad depending on the angle

effect.missedRays = true;

🌏 useNormalMap if normal maps should be taken account of when calculating reflections

effect.useNormalMap = true;

🌏 useRoughnessMap if roughness maps should be taken account of when calculating reflections

effect.useRoughnessMap = true;

🌏 resolutionScale resolution of the SSR effect, a resolution of 0.5 means the effect will be rendered at half resolution

effect.resolutionScale = 1.0;

🌏 velocityResolutionScale resolution of the velocity buffer, a resolution of 0.5 means velocity will be rendered at half resolution

effect.velocityResolutionScale = 1.0;

# 接口

🌏 patchDirectEnvIntensity 调整环境贴图强度

effect.patchDirectEnvIntensity(0.1);// 调整环境贴图强度

← 体积光柱状图 →