OpenGL ES FBO 缩放

Posted 2023-02-22

【中文标题】OpenGL ES FBO 缩放

【英文标题】：OpenGL ES FBO Scaling

【发布时间】：2016-06-28 08:54:42

【问题描述】：

这个问题是对 the original question 推荐的 Matic Oblak

一旦设置并渲染到 FBO，渲染图像如何返回到默认渲染缓冲区并以缩放版本显示。

-(void)setupFBO 
glGenTextures(1, &tex);
glBindTexture(GL_TEXTURE_2D, tex);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, 256, 256, 0, GL_BGRA, GL_UNSIGNED_BYTE, NULL);

glGenFramebuffers(1, &fbo);
glBindFramebuffer(GL_FRAMEBUFFER, fbo);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, tex, 0);

首先渲染到 FBO：

-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect

glBindFramebuffer(GL_FRAMEBUFFER, fbo);
glViewport (0, 0, 160, 144);
glClearColor (1.0f, 0.0f, 0.0f, 0.5f);
glClear (GL_COLOR_BUFFER_BIT);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, tex);
glViewport(0, 0, 160, 144);

glBindVertexArrayOES(_vertexArray);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

如果我取消注释 fbo 绑定，方块会正确显示 - 所以我不认为它是 VBO 和 VAO 的问题。

尝试将结果显示回放大到适合屏幕的主视图：

[((GLKView *) self.view) bindDrawable];
glViewport (0, 0, view.frame.size.width, view.frame.size.height);
glClearColor (0.0f, 1.0f, 0.0f, 0.5f);
glClear (GL_COLOR_BUFFER_BIT);

//vb2 has the scaled vertex coordinates
glBindBuffer(GL_ARRAY_BUFFER, vb2);
glEnableVertexAttribArray(GLKVertexAttribPosition);
glVertexAttribPointer(GLKVertexAttribPosition, 2, GL_FLOAT, GL_FALSE, 0, 0);

//make sure we are not redrawing the same thing? the texture should be
//a colored cube based on what the fbo rendered.
glDisableVertexAttribArray(GLKVertexAttribColor);

//create a buffer for the texture coordinates
//should be moved in setup phase, but left in for testing
glGenBuffers(1, &texBuffer);
glBindBuffer(GL_ARRAY_BUFFER, texBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(GLfloat)*8, squareTex, GL_STATIC_DRAW);
glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, 0, 0);
//bind to the fbo texture
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, tex);

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

我阅读并遵循的一些教程。

OpenGL FBO Example Songho OGL FBO RTT

最终，我希望模拟 GB 屏幕（160x144 像素）以模拟器的全宽显示（保持高度比）。

我从一个小正方形开始，并尝试将其拉伸以实现复古平方像素效果。

【问题讨论】：

您使用的是什么版本的 OpenGL ES？您的调用至少需要 ES 2.0，但也有仅在 ES 1.x 中有效的调用。

Es2，哪些只有1.x？我发现的大多数教程都有相同的调用。

glEnable(GL_TEXTURE_2D) 在 ES 2.0 中无效。

删除并添加了 glActiveTexture。

【参考方案1】：

要实现拉伸效果，您需要做的就是用纹理绘制一个全屏矩形。如果不使用矩阵，您只需在 [-1,1] 范围内设置顶点位置数据，因此对于三角形带：

-1, -1,
  1, -1,
 -1,  1,
  1,  1

纹理坐标应取决于原始纹理视口与纹理大小的比率。对于您的160x144 示例，最接近的足够大的纹理大小数据是256x256，这会导致ratio = (160/256, 144/256)，所以坐标是

.0,       .0,
ratio.x,   .0,
.0,        ratio.y,
ratio.x,   ratio.y

如果这没有显示结果，您将需要找到可能在任何时候出现的问题。首先，我会先尝试用纯色绘制这个坐标，看看矩形是否是全屏绘制的。如果是，那么问题很可能出在从 FBO 收到的纹理中。如果我假设您正在使用 Xcode，那么最好的工具是创建一个帧快照（位于左下角的一个工具），它将向您显示帧中任何点的所有调用和所有纹理。有了它，您可以查看纹理是否正确绘制。

不要忘记检查 openGL 错误 (glGetError) 并检查附件后 FBO 缓冲区的状态glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE。

这是我的一个项目中创建 FBO 的一种方法。可能对你有点用处。

    glGenFramebuffers(1, &_frameBuffer);
    glBindFramebuffer(GL_FRAMEBUFFER, _frameBuffer);

    glGenRenderbuffers(1, &_renderBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, _renderBuffer);

    glRenderbufferStorage(GL_RENDERBUFFER, GL_RGBA8_OES, texture.textureWidth, texture.textureHeight);
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, _renderBuffer);

    [texture bind];
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texture.textureID, 0);

    glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH, &_bufferWidth);
    glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, &_bufferHeight);

    [GLGlobalTools checkFramebufferStatus];
    [GLGlobalTools checkError];

    _bufferWidthf = _bufferWidth;
    _bufferHeightf = _bufferHeight;

    _surfaceWidth = (GLint)texture.imageWidth;
    _surfaceHeight = (GLint)texture.imageHeight;

【讨论】：

所以一旦在 fbo 上进行渲染，那么它是如何呈现给 iPhone 上的视图的呢？此代码示例使用读取像素创建纹理，然后使用该纹理。 dbfinteractive.com/forum/…

与任何其他纹理相同。您使用附加到 FBO 的纹理并将其绘制到已经在视图上的主缓冲区。

我已经更新了问题中的代码 - 我确实得到了一个缩放的正方形，但纹理仍未渲染。

是没有渲染到主屏还是贴图本身是空的？因此，如果您在 FBO 上将颜色清除为某个非零值，您会在帧捕获中看到该颜色吗？

假设我应该看到一个按比例放大的彩色立方体（在 FBO 中渲染为纹理） - 我得到一个具有不同清晰颜色的白色立方体。我认为这与纹理绑定有关。我确定纹理坐标是正确的 - 我使用 ES1 和 gl*Pointer 调用进行了验证。