学习OpenGL ES之教你实现SkyBox
获取示例代码
前言
不知道大家是否还记得基于CubeMap的反射效果里介绍的CubeMap，本文将使用CubeMap来制作3D游戏中的一个经典技术，天空盒（SkyBox）。老规矩，先来看下效果图。效果中的地形模型在前面的文章中已经介绍过了。没看过的可以点此查看。
原理
SkyBox正如其名，它是基于正方体模型的渲染技术。将6个方向拍下来的天空图片分别贴在正方体的对应面上，从内部观察正方体，就可以得到一个密闭的天空环境了。下面是一张典型的SkyBox贴图。
可以把它分成上下左右前后六张图，然后创建CubeMap。标准化ModelMatrix矩阵处理后的顶点位置，就可以用来在CubeMap上进行采样了。渲染SkyBox时不需要使用光照模型，直接使用采样CubeMap得到的颜色即可。所以需要为天空盒单独写一个Fragment Shader。天空盒几何体
首先我们为天空盒准备基本的Cube几何体，创建SkyBox类，让它继承Cube类，这样就具备了渲染一个Cube的能力。然后我们对draw方法进行一些特殊处理。因为我们需要在内部观察这个Cube，所以我们需要让这个Cube的正面被裁剪，反面显示出来。glCullFace(GL_FRONT);正是用来做这件事情。渲染完后我们还需要将裁减状态回归到裁减背面。至于glDepthMask(GL_FALSE);的作用，我会在后面提到。
- (void)draw:(GLContext *)glContext {
glCullFace(GL_FRONT);
glDepthMask(GL_FALSE);
[super draw:glContext];
glDepthMask(GL_TRUE);
glCullFace(GL_BACK);
}准备天空CubeMap
接下来我们准备用于渲染天空盒的CubeMap，用于生成CubeMap的6张图已经在项目中包含。
使用GLKit提供的API可以很方便的生成CubeMap。- (void)createCubeTexture {
NSMutableArray *files = [NSMutableArray new];
for (int i = 0; i < 6; ++i) {
NSString *filename = [NSString stringWithFormat:@"cube-%d", i + 1];
NSString *filePath = [[NSBundle mainBundle] pathForResource:filename ofType:@"tga"];
[files addObject:filePath];
}
NSError *error;
self.cubeTexture = [GLKTextureLoader cubeMapWithContentsOfFiles:files options:nil error:&error];
}cubeMapWithContentsOfFiles接受的图片文件顺序为Right(右), Left(左), Top(上), Bottom(下), Front(前), Back(后)，这个顺序可以在API的注释中找到。生成好cubeTexture后，后面就可以传递给天空盒的Fragment Shader直接使用了。
Fragment Shader
我为SkyBox编写了新的Fragment Shader ， frag_skybox.glsl。内容非常简单，生成CubeMap的采样向量，然后返回采样结果。
precision highp float;
varying vec2 fragUV;
varying vec3 fragPosition;
uniform samplerCube envMap;
uniform mat4 modelMatrix;
void main(void) {
vec3 sampleVector = normalize(modelMatrix * vec4(fragPosition, 1.0)).xyz;
gl_FragColor = textureCube(envMap, sampleVector);
}正如前言所说，SkyBox的渲染不需要光照模型。在生成SkyBox模型时，将这个Fragment Shader用作SkyBox的渲染。为了使天空看起来更真实，我们需要把天空盒缩放到足够大，离我们足够远。这里我用了1000的缩放量。同时你还要注意天空盒没有超出你的视距。你如果单独给天空盒指定一个足够视距的投影矩阵那是最好。
- (void)createSkyBox {
NSString *vertexShaderPath = [[NSBundle mainBundle] pathForResource:@"vertex" ofType:@".glsl"];
NSString *fragmentShaderPath = [[NSBundle mainBundle] pathForResource:@"frag_skybox" ofType:@".glsl"];
GLContext *skyGlContext = [GLContext contextWithVertexShaderPath:vertexShaderPath fragmentShaderPath:fragmentShaderPath];
self.skyBox = [[SkyBox alloc] initWithGLContext:skyGlContext diffuseMap:nil normalMap:nil];
self.skyBox.modelMatrix = GLKMatrix4MakeScale(1000, 1000, 1000);
}和地形一起渲染
我们希望天空应该总是在所有场景物体之后，所以渲染时，先渲染天空盒，在渲染其他物体。并且在渲染天空盒时禁用深度写入，就是前面用到的glDepthMask(GL_FALSE);所做的事。这样渲染完天空盒后，深度缓冲区中所有的深度值依旧时1.0，后续渲染的物体就必然在天空盒的前面了。下面是渲染代码。
- (void)drawObjects {
[self.skyBox.context active];
[self.skyBox.context setUniformMatrix4fv:@"projectionMatrix" value:self.projectionMatrix];
[self.skyBox.context setUniformMatrix4fv:@"cameraMatrix" value:self.cameraMatrix];
[self.skyBox.context bindCubeTexture:self.cubeTexture to:GL_TEXTURE4 uniformName:@"envMap"];
[self.skyBox draw: self.skyBox.context];
[self.objects enumerateObjectsUsingBlock:^(GLObject *obj, NSUInteger idx, BOOL *stop) {
[obj.context active];
[obj.context setUniform1f:@"elapsedTime" value:(GLfloat)self.elapsedTime];
[obj.context setUniformMatrix4fv:@"projectionMatrix" value:self.projectionMatrix];
[obj.context setUniformMatrix4fv:@"cameraMatrix" value:self.cameraMatrix];
[obj.context setUniform3fv:@"eyePosition" value:self.eyePosition];
[obj.context setUniform3fv:@"light.direction" value:self.light.direction];
[obj.context setUniform3fv:@"light.color" value:self.light.color];
[obj.context setUniform1f:@"light.indensity" value:self.light.indensity];
[obj.context setUniform1f:@"light.ambientIndensity" value:self.light.ambientIndensity];
[obj.context setUniform3fv:@"material.diffuseColor" value:self.material.diffuseColor];
[obj.context setUniform3fv:@"material.ambientColor" value:self.material.ambientColor];
[obj.context setUniform3fv:@"material.specularColor" value:self.material.specularColor];
[obj.context setUniform1f:@"material.smoothness" value:self.material.smoothness];
[obj.context setUniform1i:@"useNormalMap" value:self.useNormalMap];
[obj.context bindCubeTexture:self.cubeTexture to:GL_TEXTURE4 uniformName:@"envMap"];
[obj draw:obj.context];
}];
}扩展
除了天空盒，还有天空穹，形象来说就是用一个半球盖在场景上，贴在半球上的贴图也和天空盒不同，大致如下图所示。和我们用手机拍的全景图很像。
总结
本文使用CubeMap实现了常用的游戏技术SkyBox，当然你也可以使用其他方式为Cube进行贴图。比如把6张图放在一起，然后为Cube设置适当的UV映射。读者可以去寻找或者自己制作其他环境的天空贴图，譬如夜晚，日落等等，放在项目中观察效果。