> ## Documentation Index
> Fetch the complete documentation index at: https://matiasgql.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Settings

export const Compare = ({before, after, beforeLabel = "Before", afterLabel = "After", height = "420px"}) => {
  const wrapRef = useRef(null);
  const [pos, setPos] = useState(50);
  const [width, setWidth] = useState(0);
  useEffect(() => {
    const el = wrapRef.current;
    if (!el) return;
    const update = () => setWidth(el.getBoundingClientRect().width);
    update();
    const ro = new ResizeObserver(update);
    ro.observe(el);
    return () => ro.disconnect();
  }, []);
  const move = clientX => {
    const el = wrapRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    setPos(Math.max(0, Math.min(100, (clientX - rect.left) / rect.width * 100)));
  };
  const onDown = e => {
    e.preventDefault();
    move(e.clientX);
    const mv = ev => move(ev.clientX);
    const up = () => {
      window.removeEventListener("pointermove", mv);
      window.removeEventListener("pointerup", up);
    };
    window.addEventListener("pointermove", mv);
    window.addEventListener("pointerup", up);
  };
  const lbl = {
    position: "absolute",
    bottom: 12,
    background: "rgba(0,0,0,0.6)",
    color: "#fff",
    padding: "4px 8px",
    fontSize: 12,
    borderRadius: 4,
    textTransform: "uppercase",
    letterSpacing: "0.5px",
    pointerEvents: "none",
    zIndex: 2
  };
  return <div ref={wrapRef} onPointerDown={onDown} style={{
    position: "relative",
    width: "100%",
    height,
    overflow: "hidden",
    borderRadius: 12,
    userSelect: "none",
    touchAction: "none",
    cursor: "col-resize",
    background: "#000"
  }}>
      <img src={after} alt={afterLabel} draggable={false} style={{
    position: "absolute",
    inset: 0,
    width: "100%",
    height: "100%",
    objectFit: "cover",
    display: "block",
    pointerEvents: "none",
    margin: 0,
    padding: 0
  }} />
      <span style={{
    ...lbl,
    right: 12
  }}>{afterLabel}</span>
      <div style={{
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    width: pos + "%",
    overflow: "hidden",
    zIndex: 2,
    pointerEvents: "none"
  }}>
        <div style={{
    position: "absolute",
    top: 0,
    left: 0,
    height: "100%",
    width: width ? width + "px" : "100vw"
  }}>
          <img src={before} alt={beforeLabel} draggable={false} style={{
    width: "100%",
    height: "100%",
    objectFit: "cover",
    display: "block",
    margin: 0,
    padding: 0
  }} />
        </div>
        <span style={{
    ...lbl,
    left: 12
  }}>{beforeLabel}</span>
      </div>
      <div style={{
    position: "absolute",
    top: 0,
    bottom: 0,
    left: pos + "%",
    width: 2,
    background: "#fff",
    zIndex: 3,
    transform: "translateX(-50%)",
    boxShadow: "0 0 10px rgba(0,0,0,0.5)",
    pointerEvents: "none"
  }} />
      <div style={{
    position: "absolute",
    top: "50%",
    left: pos + "%",
    transform: "translate(-50%,-50%)",
    width: 36,
    height: 36,
    background: "#fff",
    borderRadius: "50%",
    zIndex: 3,
    boxShadow: "0 2px 6px rgba(0,0,0,0.4)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontWeight: "bold",
    color: "#333",
    pointerEvents: "none"
  }}>↔</div>
    </div>;
};

## Enabled

<Compare before="/images/AODisabled.png" after="/images/AOEnabled.png" beforeLabel="Enabled 0" afterLabel="Enabled 1" />

Enable or disable the plugin entirely

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.Enabled 1
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.Enabled 1
  ```
</CodeGroup>

***

## Mode

<Compare before="/images/AOMode0.png" after="/images/AOMode1.png" beforeLabel="Mode 0" afterLabel="Mode 1" />

Controls how the plugin integrates into the rendering pipeline.

`0` — Post Process Pass, composited on top of SceneColor. `1` — Replaces the ScreenSpaceAO buffer during the Deferred Base Pass. This is the recommended mode for most projects.

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.Mode 1
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.Mode 1
  ```
</CodeGroup>

***

## Radius

<Compare before="/images/AORadius100.png" after="/images/AORadius500.png" beforeLabel="Radius 100" afterLabel="Radius 500" />

Controls the AO radius in world units. Higher values extend occlusion further from surfaces.

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.Radius 100.0
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.Radius 100.0
  ```
</CodeGroup>

***

## Bias

<Compare before="/images/AOBias01.png" after="/images/AOBias05.png" beforeLabel="Bias 0.1" afterLabel="Bias 0.5" />

Adjusts the self-occlusion threshold. Increase this value if you notice unwanted darkening on flat surfaces.

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.Bias 0.1
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.Bias 0.1
  ```
</CodeGroup>

***

## Intensity

<Compare before="/images/AOIntensity05.png" after="/images/AOIntensity1.png" beforeLabel="Intensity 0.5" afterLabel="Intensity 1" />

Controls the overall strength of the AO effect.

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.Intensity 1.5
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.Intensity 1
  ```
</CodeGroup>

***

## Quality

<Compare before="/images/AOQuality0.png" after="/images/AOQuality3.png" beforeLabel="Quality 0" afterLabel="Quality 3" />

Sets the sample quality of the AO. Accepts values from `0` to `3`. Higher values produce cleaner results at the cost of performance.

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.Quality 2
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.Quality 2
  ```
</CodeGroup>

***

## Blur Sharpness

Controls the depth-based sharpness of the blur pass. Higher values preserve edges more aggressively.

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.BlurSharpness 16.0
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.BlurSharpness 16.0
  ```
</CodeGroup>

***

## Normal Sharpness

<Compare before="/images/AONormalSharpness0.png" after="/images/AONormalSharpness8.png" beforeLabel="Normal Sharpness 0" afterLabel="Normal Sharpness 8" />

Controls the normal-based sharpness of the blur pass. Helps preserve occlusion detail along surface transitions.

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.NormalSharpness 8.0
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.NormalSharpness 8.0
  ```
</CodeGroup>

***

## Max Pixel Radius

<Compare before="/images/AOMaxPixelRadius16.png" after="/images/AOMaxPixelRadius100.png" beforeLabel="Max Pixel Radius 16" afterLabel="Max Pixel Radius 100" />

Clamps the maximum screen-space radius of the AO to prevent over-sampling artifacts on surfaces close to the camera.

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.MaxPixelRadius 100.0
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.MaxPixelRadius 100.0
  ```
</CodeGroup>

***

## Half Resolution

<Compare before="/images/AOHalfRes0.png" after="/images/AOHalfRes1.png" beforeLabel="HalfRes 0" afterLabel="HalfRes 1" />

Runs the AO at half resolution to improve performance. Disable for sharper results at the cost of additional GPU overhead.

`0` — Full resolution `1` — Half resolution

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.HalfRes 1
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.HalfRes 1
  ```
</CodeGroup>

***

## Distance Fade Start

<Compare before="/images/AODistanceFadeStart2k.png" after="/images/AODistanceFadeStart15k.png" beforeLabel="Distance Fade Start 2000" afterLabel="Distance Fade Start 15000" />

The distance in world units at which the AO effect begins to fade out.

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.DistanceFadeStart 15000.0
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.DistanceFadeStart 15000.0
  ```
</CodeGroup>

***

## Distance Fade End

<Compare before="/images/AODistanceFadeEnd30k.png" after="/images/AODistanceFadeEnd50k.png" beforeLabel="Distance Fade End 30000" afterLabel="Distance Fade End 50000" />

The distance in world units at which the AO effect is fully faded out.

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.DistanceFadeEnd 30000.0
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.DistanceFadeEnd 30000.0
  ```
</CodeGroup>

***

## Debug Mode

<Compare before="/images/AODebugMode0.png" after="/images/AODebugMode1.png" beforeLabel="Debug Mode 0" afterLabel="Debug Mode 1" />

Visualizes the raw AO buffer, useful for tuning parameters.

`0` — Off `1` — AO Only

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.DebugMode 0
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.DebugMode 0
  ```
</CodeGroup>

***

## Temporal Accumulation

<Compare before="/images/AOTemporalAccumulation0.png" after="/images/AOTemporalAccumulation1.png" beforeLabel="Temporal Accumulation 0" afterLabel="Temporal Accumulation 1" />

Enables temporal accumulation and jittering for smoother results over time. Only active when TAA or TSR is enabled.

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.TemporalAccumulation 1
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.TemporalAccumulation 1
  ```
</CodeGroup>

***

## Temporal Blend

Controls how much history is accumulated per frame. Higher values produce smoother results but may introduce ghosting on fast-moving geometry.

<CodeGroup>
  ```text HBAO+ theme={null}
  r.HBAOPlus.TemporalBlend 0.95
  ```

  ```text GT-VBAO theme={null}
  r.GTVBAO.TemporalBlend 0.95
  ```
</CodeGroup>
