獲取示例代碼
本文主要講解OpenGL ES對(duì)于透明顏色的處理，在例子中我繪制了三個(gè)平面，分別賦予綠色半透明紋理，紅色半透明紋理，和不透明紋理。
首先為這三張圖生成紋理。
- (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];
}
接著將繪制平面的代碼用一個(gè)方法封裝。
- (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];
}
我要繪制三個(gè)平面，并且位置不一樣，只要調(diào)用三次上面的方法就可以了。具體繪制代碼如下。
- (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];
}
根據(jù)繪制平面Z軸的位置，紅色平面在最下，不透明的在中間，綠色透明的在最上面。效果如下。
明顯沒有任何透明效果，如果要開啟對(duì)透明的支持，需要調(diào)用
glEnable(GL_BLEND);和glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);。我在GLBaseViewController的setupContext中設(shè)置了這兩項(xiàng)。
- (void)setupContext {
// 使用OpenGL ES2, ES2之后都采用Shader來管理渲染管線
self.context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
// 設(shè)置幀率為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];
// 設(shè)置OpenGL狀態(tài)
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);指定了混合方式。混合方式中有兩個(gè)決定因素，將要混合的像素顏色的比例Fs和當(dāng)前緩沖區(qū)像素顏色比例Fd,Fs和Fd是四維向量(Fr, Fg, Fb, Fa)，Fr, Fg, Fb, Fa分別代表每個(gè)顏色通道的混合比例。我們假定Fs = (Fsr, Fsg, Fsb, Fsa) Fd = (Fdr, Fdg, Fdb, Fda),緩沖區(qū)像素顏色為(Dr, Dg, Db, Da)，要混合的像素顏色為(Sr, Sg, Sb, Sa)。(Kr, Kg, Kb, Ka)是每個(gè)通道的最大值。那么最終像素值為：
R = min(Kr, FsrSr + FdrDr)
G = min(Kg, FsgSg + FdgDg)
B = min(Kb, FsbSb + FdbDb)
A = min(Ka, FsaSa + FdaDa)
下面是每個(gè)混合比例枚舉對(duì)應(yīng)的值，其中Rs,Gs,Bs,As是要混合的像素顏色，Rd,Gd,Bd,Ad是緩沖區(qū)中像素的顏色。(kR, kG, kB, kA)是每個(gè)通道的最大值。以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。假設(shè)要混合的像素alpha值為0.4，那么最終的顏色就是0.4乘以要混合的像素顏色加上0.6乘以緩沖區(qū)的像素顏色。
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);設(shè)置后效果如下。
綠色透明平面和不透明的平面很好的混合了，但是和紅色平面重疊的部分卻有問題，重疊部分紅色平面完全消失了。這是因?yàn)槲覀儐⒂昧松疃葴y(cè)試，紅色平面在綠色平面后面的部分在混合之前就已經(jīng)被忽略掉了。為了解決這個(gè)問題，有個(gè)通用的辦法，先繪制不透明物體，然后再繪制透明物體。繪制透明物體的時(shí)候設(shè)置glDepthMask(false);。glDepthMask為false時(shí)會(huì)禁止把當(dāng)前的像素深度值寫到深度緩沖區(qū)中，也就是說繪制透明物體的時(shí)候，深度測(cè)試永遠(yuǎn)都是和同一個(gè)深度值進(jìn)行測(cè)試，也就不會(huì)存在透明物體之間相互遮擋的問題了。
啟用深度測(cè)試，每個(gè)像素寫入緩沖區(qū)時(shí)也會(huì)寫入z軸對(duì)應(yīng)的深度，寫入前會(huì)和當(dāng)前的深度值對(duì)比，如果在當(dāng)前深度的后面，就舍棄掉這個(gè)像素。
下面是實(shí)現(xiàn)的代碼。
- (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中混合多個(gè)透明色。一般來說，顏色混合通常只會(huì)用在一些粒子，光效等特殊場(chǎng)合，因?yàn)樗鼤?huì)增加很多運(yùn)算負(fù)擔(dān)。下一篇中，會(huì)利用顏色混合實(shí)現(xiàn)一個(gè)簡(jiǎn)單的激光效果，下面是模擬器上的效果圖。
