OpenGL & GLSL 教程(四)

这个系列教程 是https://github.com/mattdesl/lwjgl-basics/wiki的系列翻译。

2d和3d的编程的一个基本特性就是可以渲染多个sprite成为一个纹理( render-to-texture)。例如,我们有一个由两个sprite组成的滑动UI,我们使它的不透明度渐变。当以50%的不透明度渲染它们,重合的部分会出现一些我们不想要的混合现象:

左边的图形是100%的不透明度,中间图像的问题是每个精灵都是50%的不透明度重合部分我们能看到下面的sprite。而右边是我们想要的结果,先把所有sprite处理为一个texture( render-to-texture),然后再以50%的透明度渲染这个texture。


另一种利用 render-to-texture的作用是处理特效。我们先把所有的sprite处理为一个为屏幕大小的texture,然后在用shader去处理它,渲染到屏幕。
Note
在我们继续之前,我们必须指出,利用FBOs技术,特别是在每一个帧都用到的时候。可能导致性能的下降,因为它会进行多次转换状态,批量刷新, 缓存清理, 和 着色器的更新。所以在使用之前我们仔细考虑。

Frame Buffer Objects(FBO)
在OpenGL中我们为了render-to-texture,我们必须建立一个FBO。我们将利用Framebuffer类 使过程更简单些。
首先我们创建一个frame buffer 对象:

try {
    fbo = new FrameBuffer(width, height, Texture.NEAREST);
} catch (LWJGLException e) {
    ... if the FBO could not be created ...
}

为了最大的兼容性,我们应该把长和宽设置成2的幂,因为我们会把FrameBuffer转换为Texture。这样可以避免一些我们之前教程里说的硬件限制。
你可以利用Framebuffer.isSupported()去查看硬件是否支持帧缓存。如果返回是false,创建Framebuffer的时候会报错。只有特别老的版本才会出现这种情况,而且多数这时候都不支持shader。这里给一个统计大约93%的驱动支持GL_EXT_framebuffer_object。当用户不支持的时候你最好建议他们去更新显卡或者驱动。
下面是一段利用FBO的伪代码:

//make the FBO the current buffer
fbo.begin()

//... clear the FBO color with transparent black ...
glClearColor(0f, 0f, 0f, 0f); //transparent black
glClear(GL_COLOR_BUFFER_BIT); //clear the color buffer

//since the FBO may not be the same size as the display, 
//we need to give the SpriteBatch our new screen dimensions
batch.resize(fbo.getWidth(), fbo.getHeight());

//render some sprites 
batch.begin();

//draw our track and thumb button
batch.draw(track, ...);
batch.draw(slider, ...);

batch.end(); //flushes data to GL

//now we can unbind the FBO, returning rendering back to the default back buffer (the Display)
fbo.end();

//reset the batch back to the Display width/height
batch.resize(Display.getWidth(), Display.getHeight());

//now we are rendering to the back buffer (Display) again
batch.begin();

//draw our offscreen FBO texture to the screen with the given alpha
batch.setColor(1f, 1f, 1f, alpha);
batch.draw(fbo, 0, 0);

batch.end();

如果现在你用下面的sprite sheet去测试:

当50%不透明度的时候会如下图:

混合的苦恼
不透明的背景有些难看,但是只要我们以去掉它,我们在alpha通道就会丢掉一些信息:

这是因为我们进行了两次混合,当我们把sprite放入FBO时我们和背景进行了一次混合,当我们把sprite渲染到屏幕的时候我们又进行了一些混合,第二次混合使sprite比实际看起来更加透明了。
一种解决方案是使用FBO之前调用glDisable(GL_BLEND),或者使用一个不和背景混合的函数。但不幸的是,我们在一个sprite之上渲染另一个半透明的sprite就会用到混合。另一种方法是按下面的流程去做:

  1. 清理 FBO 为 black (0, 0, 0, 0).
  2. 设置 RGB 混合混合函数为 GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA and
    设置 Alpha 混合函数为GLONE, GL_ONE.
  3. 以100%的不透明度渲染sprites到FBO.
  4. 结束批处理,解除FBO的绑定.
  5. 使"pre-multipled alpha" blending, GL_ONE,
    GL_ONE_MINUS_SRC_ALPHA.
  6. 用batch.setColor(alpha, alpha, alpha, alpha) to 调整不透明度.
  7. 渲染FBO.
    结果如下图:

全屏FBOs 和后期处理:

像我们之前提到的,一些老的驱动不知道支持非2次幂的长和宽。当我们处理全屏FBO时,这是非常头疼的。因为很少有真正的屏幕的的长宽是2的次幂。
解决方法是利用TextureRegion 去渲染2的次幂的Texture的一部分。由于GL和TextureRegion 的坐标系不同,我们要做一下转换,代码如下:

TextureRegion fboRegion; //the region of our POT frame buffer
FrameBuffer fbo; //our POT frame buffer with a color texture attached

...
if (Texture.isNPOTSupported()) {
fbo = new FrameBuffer(width, height);
fboRegion = new TextureRegion(fbo.getTexture());
} else {
int texWidth = Texture.toPowerOfTwo(width);
int texHeight = Texture.toPowerOfTwo(height);
fbo = new FrameBuffer(texWidth, texHeight);
fboRegion = new TextureRegion(fbo.getTexture(), 0, texHeight-height, width, height);
}
fboRegion.flip(false, true);
...
后期处理的伪代码,如下:

//make offscreen texture active
fbo.begin(); 

//standard shader
batch.setShader(DEFAULT_SHADER);

//if FBO size == Display size, we can omit this
batch.resize(fbo.getWidth(), fbo.getHeight());

batch.begin();
... render all sprites here ...
batch.end();

//unbind FBO
fbo.end();

//now apply post-processing
batch.setShader(POST_PROCESS_SCENE);

//resize to display since we are no longer rendering to a FBO texture
batch.resize(Display.getWidth(), Display.getHeight());

//draw screen, will be affected by shader
batch.begin();
batch.draw(fboRegion, 0, 0);
batch.end();
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。
公众号推荐
   一个历史类的公众号,欢迎关注
一两拨千金