学习OpenGL ES之透明和混合

获取示例代码

本文主要讲解OpenGL ES对于透明颜色的处理，在例子中我绘制了三个平面，分别赋予绿色半透明纹理，红色半透明纹理，和不透明纹理。

首先为这三张图生成纹理。

- (void)genTexture {
    NSString *opaqueTextureFile = [[NSBundle mainBundle] pathForResource:@"texture" ofType:@"jpg"];
    NSString *redTransparencyTextureFile = [[NSBundle mainBundle] pathForResource:@"red" ofType:@"png"];
    NSString *greenTransparencyTextureFile = [[NSBundle mainBundle] pathForResource:@"green" ofType:@"png"];
    NSError *error;
    self.opaqueTexture = [GLKTextureLoader textureWithContentsOfFile:opaqueTextureFile options:nil error:&error];
    self.redTransparencyTexture = [GLKTextureLoader textureWithContentsOfFile:redTransparencyTextureFile options:nil error:&error];
    self.greenTransparencyTexture = [GLKTextureLoader textureWithContentsOfFile:greenTransparencyTextureFile options:nil error:&error];
}

接着将绘制平面的代码用一个方法封装。

- (void)drawPlaneAt:(GLKVector3)position texture:(GLKTextureInfo *)texture {
    self.modelMatrix = GLKMatrix4MakeTranslation(position.x, position.y, position.z);
    GLuint modelMatrixUniformLocation = glGetUniformLocation(self.shaderProgram, "modelMatrix");
    glUniformMatrix4fv(modelMatrixUniformLocation, 1, 0, self.modelMatrix.m);
    bool canInvert;
    GLKMatrix4 normalMatrix = GLKMatrix4InvertAndTranspose(self.modelMatrix, &canInvert);
    if (canInvert) {
        GLuint modelMatrixUniformLocation = glGetUniformLocation(self.shaderProgram, "normalMatrix");
        glUniformMatrix4fv(modelMatrixUniformLocation, 1, 0, normalMatrix.m);
    }
    
    // 绑定纹理
    GLuint diffuseMapUniformLocation = glGetUniformLocation(self.shaderProgram, "diffuseMap");
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, texture.name);
    glUniform1i(diffuseMapUniformLocation, 0);
    
    [self drawRectangle];
}

我要绘制三个平面，并且位置不一样，只要调用三次上面的方法就可以了。具体绘制代码如下。

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    [super glkView:view drawInRect:rect];
  
    GLuint projectionMatrixUniformLocation = glGetUniformLocation(self.shaderProgram, "projectionMatrix");
    glUniformMatrix4fv(projectionMatrixUniformLocation, 1, 0, self.projectionMatrix.m);
    GLuint cameraMatrixUniformLocation = glGetUniformLocation(self.shaderProgram, "cameraMatrix");
    glUniformMatrix4fv(cameraMatrixUniformLocation, 1, 0, self.cameraMatrix.m);
    
    GLuint lightDirectionUniformLocation = glGetUniformLocation(self.shaderProgram, "lightDirection");
    glUniform3fv(lightDirectionUniformLocation, 1,self.lightDirection.v);

    [self drawPlaneAt:GLKVector3Make(0, 0, -0.3) texture:self.opaqueTexture];
    [self drawPlaneAt:GLKVector3Make(0.2, 0.2, 0) texture:self.greenTransparencyTexture];
    [self drawPlaneAt:GLKVector3Make(-0.2, 0.3, -0.5) texture:self.redTransparencyTexture];
}

根据绘制平面Z轴的位置，红色平面在最下，不透明的在中间，绿色透明的在最上面。效果如下。

明显没有任何透明效果，如果要开启对透明的支持，需要调用glEnable(GL_BLEND);和glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);。我在GLBaseViewController的setupContext中设置了这两项。

- (void)setupContext {
    // 使用OpenGL ES2, ES2之后都采用Shader来管理渲染管线
    self.context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    // 设置帧率为60fps
    self.preferredFramesPerSecond = 60;
    if (!self.context) {
        NSLog(@"Failed to create ES context");
    }
    
    GLKView *view = (GLKView *)self.view;
    view.context = self.context;
    view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    view.drawableMultisample = GLKViewDrawableMultisample4X;
    [EAGLContext setCurrentContext:self.context];
    
    // 设置OpenGL状态
    glEnable(GL_DEPTH_TEST);
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
}

glEnable(GL_BLEND);开启了颜色混合，glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);指定了混合方式。混合方式中有两个决定因素，将要混合的像素颜色的比例Fs和当前缓冲区像素颜色比例Fd,Fs和Fd是四维向量(Fr, Fg, Fb, Fa)，Fr, Fg, Fb, Fa分别代表每个颜色通道的混合比例。我们假定Fs = (Fsr, Fsg, Fsb, Fsa) Fd = (Fdr, Fdg, Fdb, Fda),缓冲区像素颜色为(Dr, Dg, Db, Da)，要混合的像素颜色为(Sr, Sg, Sb, Sa)。(Kr, Kg, Kb, Ka)是每个通道的最大值。那么最终像素值为：

R = min(Kr, FsrSr + FdrDr)
G = min(Kg,  FsgSg + FdgDg)
B = min(Kb,  FsbSb + FdbDb)
A = min(Ka, FsaSa + FdaDa)

下面是每个混合比例枚举对应的值，其中Rs,Gs,Bs,As是要混合的像素颜色，Rd,Gd,Bd,Ad是缓冲区中像素的颜色。(kR, kG, kB, kA)是每个通道的最大值。以glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);为例，Fs就是As/kA, As/kA, As/kA, As/kA,Fd就是1 - As/kA, 1 - As/kA, 1 - As/kA, 1 - As/kA。假设要混合的像素alpha值为0.4，那么最终的颜色就是0.4乘以要混合的像素颜色加上0.6乘以缓冲区的像素颜色。

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);设置后效果如下。

绿色透明平面和不透明的平面很好的混合了，但是和红色平面重叠的部分却有问题，重叠部分红色平面完全消失了。这是因为我们启用了深度测试，红色平面在绿色平面后面的部分在混合之前就已经被忽略掉了。为了解决这个问题，有个通用的办法，先绘制不透明物体，然后再绘制透明物体。绘制透明物体的时候设置glDepthMask(false);。glDepthMask为false时会禁止把当前的像素深度值写到深度缓冲区中，也就是说绘制透明物体的时候，深度测试永远都是和同一个深度值进行测试，也就不会存在透明物体之间相互遮挡的问题了。

启用深度测试，每个像素写入缓冲区时也会写入z轴对应的深度，写入前会和当前的深度值对比，如果在当前深度的后面，就舍弃掉这个像素。

下面是实现的代码。

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    [super glkView:view drawInRect:rect];
  
    GLuint projectionMatrixUniformLocation = glGetUniformLocation(self.shaderProgram, "projectionMatrix");
    glUniformMatrix4fv(projectionMatrixUniformLocation, 1, 0, self.projectionMatrix.m);
    GLuint cameraMatrixUniformLocation = glGetUniformLocation(self.shaderProgram, "cameraMatrix");
    glUniformMatrix4fv(cameraMatrixUniformLocation, 1, 0, self.cameraMatrix.m);
    
    GLuint lightDirectionUniformLocation = glGetUniformLocation(self.shaderProgram, "lightDirection");
    glUniform3fv(lightDirectionUniformLocation, 1,self.lightDirection.v);

    [self drawPlaneAt:GLKVector3Make(0, 0, -0.3) texture:self.opaqueTexture];
    
    glDepthMask(false);
    [self drawPlaneAt:GLKVector3Make(0.2, 0.2, 0) texture:self.greenTransparencyTexture];
    [self drawPlaneAt:GLKVector3Make(-0.2, 0.3, -0.5) texture:self.redTransparencyTexture];
    glDepthMask(true);

}

效果如下。

本文主要介绍了如何在OpenGL ES中混合多个透明色。一般来说，颜色混合通常只会用在一些粒子，光效等特殊场合，因为它会增加很多运算负担。下一篇中，会利用颜色混合实现一个简单的激光效果，下面是模拟器上的效果图。