獲取示例代碼
本文主要講解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軸的位置昆咽，紅色平面在最下驾凶，不透明的在中間，綠色透明的在最上面掷酗。效果如下调违。
明顯沒(méi)有任何透明效果，如果要開(kāi)啟對(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來(lái)管理渲染管線
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);開(kāi)啟了顏色混合浮声，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è)置后效果如下。
綠色透明平面和不透明的平面很好的混合了软啼，但是和紅色平面重疊的部分卻有問(wèn)題桑谍，重疊部分紅色平面完全消失了。這是因?yàn)槲覀儐⒂昧松疃葴y(cè)試祸挪，紅色平面在綠色平面后面的部分在混合之前就已經(jīng)被忽略掉了锣披。為了解決這個(gè)問(wèn)題，有個(gè)通用的辦法，先繪制不透明物體雹仿，然后再繪制透明物體增热。繪制透明物體的時(shí)候設(shè)置glDepthMask(false);。glDepthMask為false時(shí)會(huì)禁止把當(dāng)前的像素深度值寫(xiě)到深度緩沖區(qū)中胧辽，也就是說(shuō)繪制透明物體的時(shí)候峻仇，深度測(cè)試永遠(yuǎn)都是和同一個(gè)深度值進(jìn)行測(cè)試，也就不會(huì)存在透明物體之間相互遮擋的問(wèn)題了邑商。
啟用深度測(cè)試摄咆，每個(gè)像素寫(xiě)入緩沖區(qū)時(shí)也會(huì)寫(xiě)入z軸對(duì)應(yīng)的深度，寫(xiě)入前會(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è)透明色芹务。一般來(lái)說(shuō)蝉绷，顏色混合通常只會(huì)用在一些粒子，光效等特殊場(chǎng)合枣抱，因?yàn)樗鼤?huì)增加很多運(yùn)算負(fù)擔(dān)熔吗。下一篇中，會(huì)利用顏色混合實(shí)現(xiàn)一個(gè)簡(jiǎn)單的激光效果佳晶，下面是模擬器上的效果圖桅狠。
