Building a Simple Engine -- Advanced Topics--Planar reflections

引擎中的平面反射(Planar Reflections in Our Engine)

现实场景中,光洁的地面、透亮的窗户总能吸引目光,游戏开发中我们常会模拟这类视觉效果。本引擎选用了一种实用且稳定的实现方案 ——平面反射(Planar Reflections)。本文将讲解平面反射的定义、引擎选用该方案的原因、具体实现方式,以及其他反射方案的适用场景。

什么是平面反射?

平面反射是指沿单一平面(如平整地面、窗户)渲染场景的镜像画面,核心是创建一个「镜像相机」,从反射面的另一侧拍摄场景。我们会将这个镜像视角的画面渲染到一张纹理中,绘制玻璃(或其他平面反射表面)时,对该纹理进行采样即可实现反射效果。

平面反射的适用场景

  • 平面镜、平静的水面、抛光地面、玻璃幕墙等平面反射表面。
  • 对反射效果有稳定性、高质量要求,且希望避免大量噪点、时间域不稳定性的场景。

平面反射的不适用场景

  • 曲面、粗糙表面,这类表面需要全视角的光泽模糊效果。
  • 任意反射方向的场景(如具有复杂微观几何结构的金属材质)。

引擎选用平面反射的原因

本引擎对反射方案的核心要求为:

  1. 易理解:仅需新增一个渲染通道、一张纹理,实现逻辑简洁。
  2. 确定性与稳定性:无画面「闪烁」问题,无需处理时间域累积带来的各类问题。
  3. 实用性:适配前向渲染器中存在单个主要反射面(玻璃、地面)的场景。

平面反射完美满足以上三点要求,且无需光线追踪硬件,能在不同性能的 GPU 上稳定运行、良好扩展。

引擎中的实现逻辑

我们仅在主渲染通道外新增一个轻量级渲染通道,并在主通道中增加一次简单的混合操作,即可实现平面反射:

镜像通道(离屏渲染)

  1. 将相机沿目标平面做镜像变换,计算得到镜像视图矩阵
  2. 关闭(或调整)面剔除功能,将场景中的不透明物体渲染到反射纹理的颜色 + 深度渲染目标中。
  3. 完成同步操作,确保反射纹理能在后续通道中被正常采样。

主通道(原相机视角)

  1. 按常规流程绘制不透明物体与透明物体。
  2. 绘制玻璃时,采样反射纹理,并结合菲涅尔公式(Fresnel)粗糙度(roughness) 以及用户可控的反射强度(reflection intensity),将反射效果与玻璃的着色效果混合。

整个实现无复杂的渲染图逻辑,无需光线查询,也无需时间域累积,核心逻辑简洁易懂。

核心镜像变换算法(简洁高效)

  1. 在世界空间中定义反射平面,公式为:ax+by+cz+d=0。
  2. 基于该平面构建反射矩阵 R,将原相机的视图矩阵与 R 相乘,即可得到镜像相机的视图矩阵。
  3. 实际实现中,需对镜像通道的面剔除进行调整(如设置cullMode = none或翻转正面),因为反射变换会改变顶点的环绕顺序。

同时,我们会将反射平面参数传入着色器,实现可选的裁剪功能:通过将世界空间位置与平面参数进行简单的点积运算,即可在镜像通道中丢弃平面「后方」的片元,避免无效渲染。

详细渲染步骤

镜像通道

  1. 创建反射颜色纹理(格式与主通道匹配,确保合成 / 玻璃绘制通道可轻松采样)与反射深度纹理。
  2. 渲染前:通过 Vulkan Synchronization 2vkCmdPipelineBarrier2,将反射颜色纹理的布局从SHADER_READ_ONLY_OPTIMAL转换为COLOR_ATTACHMENT_OPTIMAL;深度纹理同理,转换为DEPTH_ATTACHMENT_OPTIMAL
  3. 启动动态渲染,绑定不透明物体的 PBR 渲染管线,关闭面剔除(或翻转正面)。
  4. 渲染不透明网格,若有需要,可增加基于反射平面的裁剪测试。
  5. 结束渲染,将反射颜色纹理的布局转换回SHADER_READ_ONLY_OPTIMAL,确保主通道可正常采样。

主通道

  1. 按常规流程渲染不透明物体(本引擎会渲染至离屏缓冲区,为后续的色调映射合成做准备)。
  2. 透明通道绘制玻璃时,采样反射纹理并执行混合操作,混合规则为:
    • 结合菲涅尔公式(掠射角下反射效果更强),并根据粗糙度削弱反射强度。
    • 乘以 UI 中可调节的反射强度系数,快速调整反射效果的可见度。

同步机制与内存屏障(核心注意点)

本引擎基于 Vulkan Synchronization 2 实现简洁的同步逻辑,核心规则如下:

  1. 禁止在活跃的动态渲染通道内修改图像布局,需先结束渲染通道。
  2. 调用vkCmdPipelineBarrier2时,需正确设置源 / 目标阶段掩码访问掩码以及旧 / 新布局
  3. 反射颜色纹理:镜像通道前从SHADER_READ_ONLY_OPTIMAL转为COLOR_ATTACHMENT_OPTIMAL,渲染后恢复为SHADER_READ_ONLY_OPTIMAL
  4. 交换链纹理:合成 / 透明通道前转为COLOR_ATTACHMENT_OPTIMAL所有渲染通道结束后,再转为PRESENT_SRC_KHR

描述符绑定:反射纹理的绑定位置

  1. 我们在 PBR 描述符集中预留了绑定点 10,用于绑定反射纹理的采样器。
  2. 在每帧的安全执行点(上一帧的渲染工作完成后),刷新当前帧的绑定点 10,使其指向上一帧生成的反射纹理。
  3. 玻璃着色器会检测 UBO 中的reflectionEnabled标志位,仅当存在有效反射纹理时,才执行反射纹理的采样操作。

玻璃混合模型(简易实用)

玻璃的核心视觉效果是透射,但我们希望实现逼真且鲜明的反射效果,因此采用以下简易混合模型:

  1. 菲涅尔项(Schlick 近似):掠射角下反射效果更强,贴合物理规律。
  2. 粗糙度因子:粗糙度越高,反射效果越弱、越模糊(本引擎做了简化处理,仅通过粗糙度削弱反射强度)。
  3. 反射强度滑动条:在 UI 中暴露该参数,可实时调整反射效果的明显程度。

该模型并非完整的物理光谱模型,但足够简洁易懂,且能输出逼真的视觉效果,完全满足示例引擎的需求。

其他反射方案及适用场景

屏幕空间反射(SSR)

  • 无需新增渲染通道,直接使用当前帧的颜色 / 深度缓冲区。
  • 适合水坑、局部小范围反射效果,但无法渲染屏外物体,且存在时间域不稳定性问题。
  • 适用场景:希望快速实现全场景反射,且可接受偶尔的画面瑕疵。

环境贴图 / 立方体贴图 / 反射探针

  • 预计算实现,渲染速度极快。
  • 对近距离物体的反射效果缺乏视角准确性,适合远距离的光泽反射。
  • 适用场景:实现全局环境反射,或反射面非完美平面的场景。

硬件光线追踪 / 混合渲染方案

  • 反射效果高度精准,支持复杂的反射场景。
  • 需光线追踪硬件,且需实现高级去噪算法,代码复杂度与性能开销较高。
  • 适用场景:面向高端 GPU 开发,且要求全场景反射效果达到「物理级逼真」。

平面反射(本引擎方案)

  • 仅需新增一个渲染通道,效果确定、稳定。
  • 完美适配单个或少数大型平面反射面(地面、窗户、平静水面)。
  • 适用场景:希望为特定平面实现高质量镜面反射,且不想引入光线追踪技术。

性能优化技巧

  1. 降低镜像通道的渲染分辨率:本引擎提供了分辨率缩放滑动条,可灵活调整。
  2. 激进的剔除策略:引擎的 CPU 视锥剔除对原相机和镜像相机均生效,可大幅减少渲染量。
  3. 按需启用镜像通道:当反射面不在相机可视范围内时,直接关闭镜像通道。
  4. 反射纹理模糊:若希望粗糙表面呈现柔和的反射效果,可对反射纹理采样结果进行模糊处理。

常见问题排查

反射效果过弱

调高 UI 中的反射强度滑动条,或降低反射面的粗糙度参数。

代码对应位置

镜像相机矩阵计算、反射通道及通道顺序配置

renderer_rendering.cpp

反射渲染目标与管线配置

renderer_pipelines.cpp

反射纹理采样 + 玻璃着色逻辑

shaders/pbr.slangshaders/pbr_utils.slang

反射纹理描述符绑定与每帧安全执行点刷新

renderer_rendering.cpp(反射描述符刷新逻辑)

未来拓展方向

若希望进一步优化平面反射效果,可参考以下方向:

  1. 实现基于粗糙度的反射纹理模糊(通过 mip 链或可分离模糊算法)。
  2. 支持多个反射平面,适配多层地板等复杂场景。
  3. 新增屏幕空间反射(SSR)作为兜底方案,在平面反射无效的区域混合 SSR 效果。
  4. 为非平面表面实现选择性光线查询反射,打造混合反射方案。

后续推荐阅读

若希望深入了解本引擎的其他核心功能,可阅读以下文档:

  1. Synchronization and Streaming(同步机制与资源流式加载)
  2. Forward+ Rendering(Forward + 渲染)
  3. Descriptor Indexing and Stable Descriptor Updates(描述符索引与稳定的描述符更新)
  4. Rendering Pipeline Overview(渲染管线总览)

你可以基于本方案自由尝试与拓展,平面反射的实现被刻意设计得简洁直观,让你能专注于学习 Vulkan 的核心知识点,而无需在复杂的图形技术中迷失。

Read more

GLM-4.6V-Flash-WEB Web界面使用指南,拖图就出结果

GLM-4.6V-Flash-WEB Web界面使用指南,拖图就出结果 你不需要配置环境、不用写一行推理代码、甚至不用打开终端——只要把一张截图拖进浏览器窗口,几秒钟后,它就能告诉你图里写了什么、画了什么、哪里有问题。这不是未来预告,而是你现在就能在本地跑起来的真实体验。 GLM-4.6V-Flash-WEB 是智谱AI最新开源的轻量级视觉语言模型,专为Web端实时交互而生。它不像某些“实验室模型”那样只存在于论文和Benchmark表格里,而是真正做到了:部署快、启动快、响应快、上手更快。一块RTX 3090,一个浏览器,一次拖拽,结果即刻呈现。 本文不讲训练原理,不列参数表格,不堆技术术语。我们只聚焦一件事:怎么用好它的Web界面?从零开始,到稳定产出,每一步都清晰可操作。 1. 为什么说“拖图就出结果”不是宣传话术? 很多多模态模型标榜“支持图文理解”,但实际用起来才发现:要装依赖、改路径、调精度、修CUDA版本、

前端防范 XSS(跨站脚本攻击)

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境(npm/yarn) 2. 浏览器环境 核心 API 基础使用 1. 基础过滤(默认规则) 2. 自定义过滤规则 (1)允许特定标签 (2)允许特定属性 (3)自定义标签处理 (4)自定义属性处理 (5)转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签(如富文本编辑器内容) 注意事项 更多配置 XSS(跨站脚本攻击)是一种常见的网络攻击手段,它允许攻击者将恶意脚本注入到其他用户的浏览器中。

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.