2D正交投影下缩放窗口/帧缓冲避免渲染内容拉伸的问题咨询

基础概念答疑 #

• 尺寸调整时必须同时修改正交投影矩阵和glViewport参数，二者职责完全不同，不能只改其中一项：
  • glViewport负责把OpenGL输出的[-1,1]范围归一化裁剪坐标（NDC）映射到当前帧缓冲的像素区域，它的宽高必须和当前绑定的帧缓冲附件的像素尺寸完全匹配，不能只匹配宽高比，否则会出现内容裁切、拉伸问题。
  • glm::ortho生成的正交投影矩阵负责把你自定义的世界坐标范围映射到[-1,1]的NDC空间，它只需要和视口/帧缓冲的宽高比保持一致即可，不需要和像素尺寸完全相等——固定世界坐标下的可视范围大小，就是实现“内容不随窗口缩放改变尺寸”的核心。
  • 视口的x、y参数是视口区域在帧缓冲上的左下角像素坐标，如果你要把内容渲染到整个帧缓冲，偏移量直接设为(0, 0)即可，之前写的负偏移是把世界坐标单位和像素单位搞混了，会导致一半渲染内容落到帧缓冲外被裁切。

现有代码问题排查 #

之前的实现有几个明确的错误，是导致拉伸、缩放异常的原因：

1. 帧缓冲纹理重分配后没有重新挂载：调用glTexImage2D重新给纹理分配内存后，必须重新调用glFramebufferTexture2D把纹理挂载到帧缓冲的颜色附件点位，否则帧缓冲还是关联旧的无效纹理资源，渲染结果不可控。
2. 视口参数错误：之前用的glViewport(-windowSize.x/2, -windowSize.y/2, windowSize.x, windowSize.y)偏移量为负，不符合像素坐标的设置规则，正确的全帧缓冲渲染视口偏移永远是(0,0)。
3. 正交矩阵逻辑错误：第一种写法把正交投影的可视范围直接设为窗口像素尺寸，窗口缩小时可视的世界范围同步缩小，内容自然跟着变小；第二种补充测试的写法虽然保证了宽高比，但是没有固定可视范围的基准值，可视范围完全随窗口宽高比浮动，自然没法保持内容尺寸固定，才会出现窗口缩小精灵同步变小的问题。
4. 遗漏ImGui层的拉伸处理：把帧缓冲纹理传给ImGui::Image渲染时，如果ImGui控件的宽高比和纹理本身的宽高比不一致，ImGui会直接把纹理拉伸到填满控件，也会导致变形。

正确实现步骤 #

核心思路是固定一个基准可视范围，水平方向的可视范围随帧缓冲宽高比自动适配，既保证无拉伸，又保证内容尺寸不随窗口缩放变化。

1. 帧缓冲尺寸变化时的处理逻辑：

void OnFramebufferResize(glm::ivec2 newSize) {
    // 更新颜色纹理尺寸
    colorTexture.Bind();
    this->size = newSize;
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, newSize.x, newSize.y, 0, GL_RGB, GL_UNSIGNED_BYTE, nullptr);
    colorTexture.Unbind();

    // 关键：重新挂载新尺寸的纹理到帧缓冲
    glBindFramebuffer(GL_FRAMEBUFFER, fboID);
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, colorTexture.ID, 0);
    // 如果有深度/模板附件也要同步重新挂载，最后检查帧缓冲完整性
    if(glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE) {
        // 这里加错误处理逻辑
    }
    glBindFramebuffer(GL_FRAMEBUFFER, 0);

    windowSize = newSize;
}

2. 帧缓冲渲染时的视口与矩阵设置：

// 绑定离屏帧缓冲开始渲染
glBindFramebuffer(GL_FRAMEBUFFER, fboID);
glClearColor(0.1f, 0.1f, 0.1f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);

// 视口和帧缓冲尺寸像素级完全匹配，偏移(0,0)
glViewport(0, 0, windowSize.x, windowSize.y);

// 固定垂直方向的可视范围，水平范围按宽高比自动计算
const float fixedVisibleWorldHeight = 10.0f; // 这个值按需调整，值越大同尺寸物体看起来越小
float aspectRatio = static_cast<float>(windowSize.x) / windowSize.y;
float halfHeight = fixedVisibleWorldHeight / 2.0f;
float halfWidth = halfHeight * aspectRatio;
// 生成正交投影矩阵
proj = glm::ortho(-halfWidth, halfWidth, -halfHeight, halfHeight, -1.0f, 1.0f);

// 视图矩阵保持原有逻辑即可，z轴垂直看向xy平面
view = glm::lookAt(glm::vec3(0, 0, 1), glm::vec3(0, 0, 0), glm::vec3(0, 1, 0));
// 世界矩阵当前用单位矩阵即可，后续做平移、缩放直接修改该矩阵
shaderProgram.SetMat4("view", view);
shaderProgram.SetMat4("proj", proj);
shaderProgram.SetMat4("world", glm::mat4(1.0f));

// 执行渲染逻辑
// ...

// 渲染完成解绑帧缓冲
glBindFramebuffer(GL_FRAMEBUFFER, 0);

3. ImGui渲染纹理适配：

调用ImGui::Image时，不要直接把纹理拉伸到整个ImGui窗口，先获取ImGui窗口的可用区域尺寸，在保持纹理宽高比的前提下计算适配的显示尺寸，让纹理刚好能完整放进可用区域即可，多余的区域留空，避免ImGui层的拉伸变形。

内容的提问来源于stack exchange，提问作者bonkt