mirror of
https://github.com/galacean/engine.git
synced 2026-05-07 23:37:11 +08:00
Add Screen Space Ambient Occlusion Docs (#2824)
* docs: add screen space ambient occlusion docs
This commit is contained in:
hhhhkrx
110
docs/en/graphics/light/ambientOcclusion.mdx
Normal file
110
docs/en/graphics/light/ambientOcclusion.mdx
Normal file
@@ -0,0 +1,110 @@
|
||||
---
|
||||
title: Ambient Occlusion
|
||||
order: 7
|
||||
---
|
||||
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*1fx8QIhX-MsAAAAAgCAAAAgAegDwAQ/original" />
|
||||
|
||||
Ambient Occlusion (AO) is a rendering technique that enhances scene realism by simulating how objects block ambient light in crevices, recesses, and contact areas, making the scene look more grounded and natural.
|
||||
|
||||
---
|
||||
|
||||
## Parameters Overview
|
||||
|
||||
| Parameter | Description |
|
||||
|------------------------|-------------|
|
||||
| [Enable](/apis/core/#AmbientOcclusion-enabled) | Toggle to enable or disable Ambient Occlusion |
|
||||
| [Quality](/apis/core/#AmbientOcclusion-quality) | Controls the quality of AO. Lower quality improves performance, higher quality gives finer detail but costs more performance |
|
||||
| [Intensity](/apis/core/#AmbientOcclusion-intensity) | Controls the overall strength of AO; higher values make AO more pronounced |
|
||||
| [Power](/apis/core/#AmbientOcclusion-power) | Adjusts the contrast of AO shadows; higher values make dark areas darker |
|
||||
| [Radius](/apis/core/#AmbientOcclusion-radius) | Controls the spread range of AO, in meters. Larger radius makes occlusion spread farther. Range: 0.1 m – 10 m |
|
||||
| [Bias](/apis/core/#AmbientOcclusion-bias) | Prevents self-occlusion artifacts, avoids surfaces darkening themselves. In meters. Range: 0 – 0.5 m |
|
||||
| [Bilateral Threshold](/apis/core/#AmbientOcclusion-bilateralThreshold) | Removes noise without blurring object edges. Higher values make AO smoother |
|
||||
| [Min Horizon Angle](/apis/core/#AmbientOcclusion-minHorizonAngle) | Ignores small angle occlusion to reduce artifacts |
|
||||
|
||||
---
|
||||
|
||||
## Parameter Details
|
||||
|
||||
**Radius**
|
||||
<Callout type="positive">
|
||||
Global range, determines how far AO can spread
|
||||
</Callout>
|
||||
- Controls the sampling range of AO.
|
||||
- Too small → AO only appears in narrow contact areas, looking “stuck to the edge.”
|
||||
- Too large → AO spreads into areas that shouldn’t be darkened.
|
||||
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*5YWVTZYSPuoAAAAAgQAAAAgAegDwAQ/original" />
|
||||
|
||||
---
|
||||
|
||||
**Bias**
|
||||
<Callout type="positive">
|
||||
Local adjustment, only affects the relation between the pixel itself and its sample points
|
||||
</Callout>
|
||||
- Typically a very small positive number (recommended `0.001 – 0.01`).
|
||||
- Adjusts the starting point of occlusion calculation to prevent a pixel from occluding itself.
|
||||
- Too small → surfaces may darken themselves.
|
||||
- Too large → valid occlusion may be ignored, making the image too clean.
|
||||
- If the image looks too dirty → increase Bias.
|
||||
- If occlusion looks too weak → decrease Bias.
|
||||
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*uQONRpF8Sv4AAAAAgIAAAAgAegDwAQ/original" />
|
||||
|
||||
---
|
||||
|
||||
**Bilateral Threshold**
|
||||
- Blurs the AO texture to remove noise, but only within the same object surface while preserving edge sharpness.
|
||||
- Higher values → AO becomes smoother and softer while keeping edges clear.
|
||||
- Lower values → AO may contain noise or banding artifacts.
|
||||
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*lq7WSK7fgjUAAAAAgFAAAAgAegDwAQ/original" />
|
||||
|
||||
---
|
||||
|
||||
**Min Horizon Angle**
|
||||
- Range: `0° – 45°`
|
||||
- Think of it as the “minimum angle required to start calculating occlusion.”
|
||||
- Near `0°`: even tiny gaps are considered occluded.
|
||||
- At `45°`: only more obvious recesses are considered.
|
||||
|
||||
Demonstration from `0° – 45°`:
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*zGxmS6vR8RoAAAAAgPAAAAgAegDwAQ/original" />
|
||||
|
||||
---
|
||||
|
||||
## Using Ambient Occlusion
|
||||
|
||||
1. In the **Scene** settings, locate **Ambient Occlusion**.
|
||||
2. Click **Enable**.
|
||||
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*FOuFQ4lKRLEAAAAAgEAAAAgAegDwAQ/original" />
|
||||
|
||||
- **Effect Comparison**
|
||||
|
||||
<Comparison
|
||||
leftSrc="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*LEn7SLWoc4MAAAAAgEAAAAgAegDwAQ/fmt.webp"
|
||||
leftText="AO Disabled"
|
||||
rightSrc="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*AT5IQ7dq3VsAAAAAgEAAAAgAegDwAQ/original"
|
||||
rightText="AO Enabled"
|
||||
/>
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Why does AO look too dirty?**
|
||||
- Don’t set the radius too high.
|
||||
- Large radius + high intensity = dirty.
|
||||
- Moderate radius + Bilateral Blur = natural.
|
||||
|
||||
2. **Combine with other post-processing**
|
||||
- Use with [Bloom](/en/docs/graphics/postProcess/effects/#bloom) and [Tonemapping](/en/docs/graphics/postProcess/effects/#tonemapping) to make AO blend more naturally into the final image.
|
||||
|
||||
---
|
||||
|
||||
## Limitations
|
||||
|
||||
Ambient Occlusion relies on the **depth buffer**, so it has the following limitations:
|
||||
|
||||
- **No support for transparent objects**: Transparent materials do not write to the depth buffer, so AO cannot be applied correctly to transparent surfaces.
|
||||
@@ -15,6 +15,7 @@ Proper use of lighting can provide realistic rendering effects. This section inc
|
||||
- [Spotlight](/en/docs/graphics/light/spot/)
|
||||
- Indirect Light
|
||||
- [Ambient Light](/en/docs/graphics/light/ambient/)
|
||||
- [Ambient Occlusion](/en/docs/graphics/light/ambientOcclusion/)
|
||||
- [Baking](/en/docs/graphics/light/bake/)
|
||||
- [Shadows](/en/docs/graphics/light/shadow/)
|
||||
|
||||
|
||||
92
docs/zh/graphics/light/ambientOcclusion.mdx
Normal file
92
docs/zh/graphics/light/ambientOcclusion.mdx
Normal file
@@ -0,0 +1,92 @@
|
||||
---
|
||||
title: 环境光遮蔽
|
||||
order: 7
|
||||
---
|
||||
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*1fx8QIhX-MsAAAAAgCAAAAgAegDwAQ/original" />
|
||||
|
||||
环境光遮蔽（Ambient Occlusion, AO）是一种增强场景真实感的渲染技术，主要用来增强物体表面在缝隙、凹陷、接触点等区域的遮蔽感，从而让画面更真实。
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 参数总览
|
||||
|
||||
| 参数 | 说明 |
|
||||
|-----------------------|------|
|
||||
| [启用](/apis/core/#AmbientOcclusion-enabled) | 是否启用环境光遮蔽效果 |
|
||||
| [质量](/apis/core/#AmbientOcclusion-quality) | 控制 AO 的质量，低质量能获得更好的性能，高质量更细腻但更耗性能 |
|
||||
| [强度](/apis/core/#AmbientOcclusion-intensity) | 控制 AO 的整体强弱，数值越大，AO 越明显 |
|
||||
| [对比度](/apis/core/#AmbientOcclusion-power) | 调整 AO 暗部的对比度，较高的值会让暗部更黑 |
|
||||
| [半径](/apis/core/#AmbientOcclusion-radius) | AO 的扩散范围，半径越大，扩散越远，以米为单位，范围：0.1 米 ~ 10 米 |
|
||||
| [偏移](/apis/core/#AmbientOcclusion-bias) | 防止自遮蔽伪影，避免物体表面自己发黑，以米为单位，范围： 0 米 ～ 0.5 米 |
|
||||
| [双边阈值](/apis/core/#AmbientOcclusion-bilateralThreshold) | 用于去掉噪点，不会糊到轮廓外，值越大效果越模糊|
|
||||
| [最小地平角](/apis/core/#AmbientOcclusion-minHorizonAngle)| 用于忽略小角度遮蔽，减少伪影 |
|
||||
---
|
||||
|
||||
## 参数说明
|
||||
**半径 (Radius)**
|
||||
<Callout type="positive">
|
||||
全局范围，决定 AO 能蔓延多远
|
||||
</Callout>
|
||||
- 控制 AO 采样的作用范围，半径太小 AO 只出现在很窄的接触区域，看起来“贴边”，半径太大 AO 会蔓延到本不该暗的地方。
|
||||
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*5YWVTZYSPuoAAAAAgQAAAAgAegDwAQ/original" />
|
||||
|
||||
|
||||
**偏移 (Bias)**
|
||||
<Callout type="positive">
|
||||
局部范围，只影响像素本身与采样点的关系
|
||||
</Callout>
|
||||
- 通常是一个很小的正数（建议 0.001 – 0.01）
|
||||
- 调整遮蔽的起点，避免像素把自己算进遮蔽里，偏移太小容易出现表面发黑，偏移太大本该有的遮蔽也会被忽略，画面过于干净，如果你的画面太脏建议增大偏移，如果画面遮蔽细节太弱建议减小偏移。
|
||||
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*uQONRpF8Sv4AAAAAgIAAAAgAegDwAQ/original" />
|
||||
|
||||
**双边阈值 (Bilateral Threshold)**
|
||||
- 模糊 AO 图像以去掉噪点，只在同一物体表面模糊，保留物体的边缘清晰度，数值越大 AO 更平滑柔和，同时边缘清晰，数值越小 AO 可能有噪点或条纹。
|
||||
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*lq7WSK7fgjUAAAAAgFAAAAgAegDwAQ/original" />
|
||||
|
||||
|
||||
**最小地平角 (Min Horizon Angle)**
|
||||
- 角度范围为 `0° – 45°`
|
||||
- 我们可以把它想象成“遮蔽开始计算的最小角度”，比如接近 `0°` 的时候任何小缝隙都会被算作遮蔽，而 `45°` 则只算比较明显的凹陷。
|
||||
|
||||
从`0° – 45°`的演示：
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*zGxmS6vR8RoAAAAAgPAAAAgAegDwAQ/original" />
|
||||
|
||||
---
|
||||
|
||||
## 使用环境光遮蔽
|
||||
|
||||
1. 在 **场景** 中找到 **环境光遮蔽 (Ambient Occlusion)**。
|
||||
2. 点击 **启用（Enable）**。
|
||||
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*FOuFQ4lKRLEAAAAAgEAAAAgAegDwAQ/original" />
|
||||
|
||||
|
||||
- **效果对比**
|
||||
|
||||
<Comparison
|
||||
leftSrc="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*LEn7SLWoc4MAAAAAgEAAAAgAegDwAQ/fmt.webp"
|
||||
leftText="AO 关闭"
|
||||
rightSrc="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*AT5IQ7dq3VsAAAAAgEAAAAgAegDwAQ/original"
|
||||
rightText="AO 开启"
|
||||
/>
|
||||
|
||||
---
|
||||
|
||||
## 最佳实践
|
||||
1. 为什么 AO 看起来过脏？
|
||||
- AO 半径不要开太大，半径大 + 强度高 = 脏，半径适中 + 双边模糊 = 自然。
|
||||
|
||||
2. 适当结合后处理
|
||||
- 搭配 [Bloom](/docs/graphics/postProcess/effects/#泛光（Bloom）)、[色调映射](/docs/graphics/postProcess/effects/#色调映射（Tonemapping）) 可以让 AO 的黑白层次在画面里更自然。
|
||||
---
|
||||
|
||||
## 使用限制说明
|
||||
|
||||
环境光遮蔽（AO）的计算依赖**深度图**，因此存在以下限制：
|
||||
|
||||
- **不支持透明物体** ：透明材质不会写入深度缓冲，所以 AO 无法正确计算透明表面的遮蔽效果。
|
||||
@@ -15,6 +15,7 @@ label: Graphics/Light
|
||||
- [聚光灯](/docs/graphics/light/spot/)
|
||||
- 间接光
|
||||
- [环境光](/docs/graphics/light/ambient/)
|
||||
- [环境光遮蔽](/docs/graphics/light/ambientOcclusion/)
|
||||
- [烘焙](/docs/graphics/light/bake/)
|
||||
- [阴影](/docs/graphics/light/shadow/)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user