Learn OpenGL 笔记6.3 Shadow Mapping(阴影贴图)

Learn OpenGL 笔记6.3 Shadow Mapping(阴影贴图)

在学习和应用阴影映射(Shadow Mapping)技术时,理解其背后的原理和实现细节非常重要。以下是对你所描述内容的详细解释:

1. 基本概念

阴影映射是一种用于计算物体在场景中阴影的技术。它通过在一个深度缓冲区(Depth Buffer)中存储光源视角下的场景深度信息来工作。

2. 光源视角的深度缓冲区

首先,我们需要渲染场景从光源的角度看。这通常是一个单独的帧缓冲区(Framebuffer),其中包含一个深度缓冲区。在这个帧缓冲区中,我们只关心物体的深度信息,而不关心颜色。

// 渲染场景到光源视角的深度缓冲区 void renderDepthMap() { // 设置深度纹理 glBindFramebuffer(GL_FRAMEBUFFER, depthMapFBO); glFramebufferTexture2D(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_TEXTURE_2D, depthMap, 0); glDrawBuffer(GL_NONE); glReadBuffer(GL_NONE); // 清空深度缓冲区 glClear(GL_DEPTH_BUFFER_BIT); // 设置光源视角的投影矩阵 glm::mat4 lightSpaceMatrix = lightProjection * lightView; // 设置着色器中的光源空间矩阵 shader.use(); shader.setMat4("lightSpaceMatrix", lightSpaceMatrix); // 渲染场景,只更新深度缓冲区 glCullFace(GL_FRONT); renderScene(shader); glCullFace(GL_BACK); } 

3. 片段着色器中的阴影计算

在渲染主场景时,我们需要使用光源视角的深度缓冲区来计算每个像素是否在阴影中。

// 计算阴影 float checkShadow(vec3 fragPosLightSpace) { // 将片段坐标转换到纹理坐标 vec3 projCoords = fragPosLightSpace / fragPosLightSpace.w; projCoords = projCoords * 0.5 + 0.5; float closestDepth = texture(shadowMap, projCoords.xy).r; float currentDepth = projCoords.z; // 添加偏移以避免阴影伪影 float bias = 0.001; return currentDepth - bias > closestDepth ? 1.0 : 0.0; } 

4. 阴影贴图的处理

为了在视觉上看到深度信息,我们通常将深度值转换为线性深度值。

// 转换线性深度值 float LinearizeDepth(float depth) { float z = depth * 2.0 - 1.0; // 将深度从 [0, 1] 范围映射到 [-1, 1] return (2.0 * near_plane * far_plane) / (far_plane + near_plane - z * (far_plane - near_plane)); } // 使用线性深度值 FragColor = vec4(vec3(LinearizeDepth(depthValue) / far_plane), 1.0); // perspective // FragColor = vec4(vec3(depthValue), 1.0); // orthographic 

5. 正交和透视投影

透视投影常用于聚光灯和点光源,而正交投影则用于平行光。

  • 透视投影:深度被转换为非线性深度值,大部分显着范围靠近近平面。为了正确查看深度值,需要将非线性深度值转换为线性深度值。
  • 正交投影:深度是线性的,因此可以直接使用。
// 转换线性深度值 float LinearizeDepth(float depth) { float z = depth * 2.0 - 1.0; return (2.0 * near_plane * far_plane) / (far_plane + near_plane - z * (far_plane - near_plane)); } 

6. 贝塞尔阴影贴图(Bent Normal Shadow Mapping)

贝塞尔阴影贴图是一种改进的阴影映射技术,通过使用贝塞尔曲线来更好地模拟光照方向,从而产生更自然的阴影效果。

// 计算贝塞尔阴影 float bentNormalShadow(vec3 fragPosLightSpace) { // 获取法线和光源方向 vec3 normal = texture(normalMap, TexCoords).rgb; vec3 lightDir = normalize(lightPos - fragPosWorld); // 计算贝塞尔曲线的偏移量 float offset = dot(normal, lightDir) * 0.1; // 计算阴影 return checkShadow(fragPosLightSpace + offset); } 

通过这些步骤,你可以实现一个基本的阴影映射系统,并根据需要进行优化和改进。

Read more

前端防范 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订阅) 关键配置项: // 在项目根目录创建.